Convert preset to css variable for padding

We are getting padding value in preset format like this:
"var:preset|spacing|50"
Therefore I added a function to convert it to CSS variable like this:
"var(--wp--preset--spacing--50)"

i.e. "var:preset|spacing|50" -> "var(--wp--preset--spacing--50)"

src/BlockTypes/ProductSaleBadge.php

@@ -96,9 +96,10 @@ protected function render( $attributes, $content, $block ) {
 		}
 
 		$classes_and_styles = StyleAttributesUtils::get_classes_and_styles_by_attributes( $attributes );
+		$classname          = isset( $attributes['className'] ) ? $attributes['className'] : '';
 
 		$output  = '';
-		$output .= '<div class="wc-block-components-product-sale-badge ' . $classes_and_styles['classes'] . ' ' . $attributes['className'] . '" style="' . $classes_and_styles['styles'] . '"">';
+		$output .= '<div class="wc-block-components-product-sale-badge ' . $classes_and_styles['classes'] . ' ' . $classname . '" style="' . $classes_and_styles['styles'] . '"">';
 		$output .= '<span class="wc-block-components-product-sale-badge__text" aria-hidden="true">' . __( 'Sale', 'woo-gutenberg-products-block' ) . '</span>';
 		$output .= '<span class="screen-reader-text">' . __(
 			'Product on sale',

src/Utils/StyleAttributesUtils.php

@@ -327,6 +327,27 @@ public static function get_align_class_and_style( $attributes ) {
 		return null;
 	}
 
+
+	/**
+	 * If spacing value is in preset format, convert it to a CSS var. Else return same value
+	 * For example:
+	 * "var:preset|spacing|50" -> "var(--wp--preset--spacing--50)"
+	 * "50px" -> "50px"
+	 *
+	 * @param string $spacing_value value to be processed.
+	 *
+	 * @return (string)
+	 */
+	public static function get_spacing_value( $spacing_value ) {
+		// If value is in format: var:preset|spacing|50.
+		if ( is_string( $spacing_value ) && str_contains( $spacing_value, 'var:preset|spacing|' ) ) {
+			$spacing_value = str_replace( 'var:preset|spacing|', '', 'var:preset|spacing|50' );
+			return sprintf( 'var(--wp--preset--spacing--%s)', $spacing_value );
+		}
+
+		return $spacing_value;
+	}
+
 	/**
 	 * Get class and style for padding from attributes.
 	 *
@@ -341,9 +362,23 @@ public static function get_padding_class_and_style( $attributes ) {
 			return null;
 		}
 
+		$padding_top    = $padding['top'] ? self::get_spacing_value( $padding['top'] ) : null;
+		$padding_right  = $padding['right'] ? self::get_spacing_value( $padding['right'] ) : null;
+		$padding_bottom = $padding['bottom'] ? self::get_spacing_value( $padding['bottom'] ) : null;
+		$padding_left   = $padding['left'] ? self::get_spacing_value( $padding['left'] ) : null;
+
 		return array(
 			'class' => null,
-			'style' => sprintf( 'padding: %s;', implode( ' ', $padding ) ),
+			'style' => sprintf(
+				'padding-top:%s;
+				padding-right:%s;
+				padding-bottom:%s;
+				padding-left:%s;',
+				$padding_top,
+				$padding_right,
+				$padding_bottom,
+				$padding_left
+			),
 		);
 	}