From 392f7e17fe1e29cefe35fea0b2f346c274c9a847 Mon Sep 17 00:00:00 2001
From: Manish Menaria <the.manish.menaria@gmail.com>
Date: Thu, 30 Mar 2023 12:35:32 +0530
Subject: [PATCH] Add padding support for `Product Image` block
 (https://github.com/woocommerce/woocommerce-blocks/pull/8895)

* Refactor import and add padding support in image block

In this commit, the import statement for __experimentalGetSpacingClassesAndStyles has been refactored to use an alias getSpacingClassesAndStyles for better readability. Additionally, padding support has been added to the image block's spacing configuration.

* Refactor ProductImage to use consolidated style classes and attributes

This commit refactors the ProductImage block by using the consolidated classes and styles provided by the StyleAttributesUtils::get_classes_and_styles_by_attributes() function. This change simplifies the code, improves readability, and ensures consistent handling of styles across different block elements.
---
 .../atomic/blocks/product-elements/image/supports.ts  |  5 +++--
 .../src/BlockTypes/ProductImage.php                   | 11 ++++++-----
 2 files changed, 9 insertions(+), 7 deletions(-)

diff --git a/plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/image/supports.ts b/plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/image/supports.ts
index 1180ce0da40..c8f480973d9 100644
--- a/plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/image/supports.ts
+++ b/plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/image/supports.ts
@@ -3,7 +3,7 @@
  * External dependencies
  */
 import { isFeaturePluginBuild } from '@woocommerce/block-settings';
-import { __experimentalGetSpacingClassesAndStyles } from '@wordpress/block-editor';
+import { __experimentalGetSpacingClassesAndStyles as getSpacingClassesAndStyles } from '@wordpress/block-editor';
 
 /**
  * Internal dependencies
@@ -20,9 +20,10 @@ export const supports = {
 			fontSize: true,
 			__experimentalSkipSerialization: true,
 		},
-		...( typeof __experimentalGetSpacingClassesAndStyles === 'function' && {
+		...( typeof getSpacingClassesAndStyles === 'function' && {
 			spacing: {
 				margin: true,
+				padding: true,
 				__experimentalSkipSerialization: true,
 			},
 		} ),
diff --git a/plugins/woocommerce-blocks/src/BlockTypes/ProductImage.php b/plugins/woocommerce-blocks/src/BlockTypes/ProductImage.php
index 432a9105bd5..95a8297490e 100644
--- a/plugins/woocommerce-blocks/src/BlockTypes/ProductImage.php
+++ b/plugins/woocommerce-blocks/src/BlockTypes/ProductImage.php
@@ -188,19 +188,20 @@ class ProductImage extends AbstractBlock {
 		}
 		$parsed_attributes = $this->parse_attributes( $attributes );
 
-		$border_radius = StyleAttributesUtils::get_border_radius_class_and_style( $attributes );
-		$margin        = StyleAttributesUtils::get_margin_class_and_style( $attributes );
+		$border_radius      = StyleAttributesUtils::get_border_radius_class_and_style( $attributes );
+		$margin             = StyleAttributesUtils::get_margin_class_and_style( $attributes );
+		$classes_and_styles = StyleAttributesUtils::get_classes_and_styles_by_attributes( $attributes );
 
 		$post_id = $block->context['postId'];
 		$product = wc_get_product( $post_id );
 
 		if ( $product ) {
 			return sprintf(
-				'<div class="wc-block-components-product-image wc-block-grid__product-image" style="%1$s %2$s">
+				'<div class="wc-block-components-product-image wc-block-grid__product-image %1$s" style="%2$s">
 					%3$s
 				</div>',
-				isset( $border_radius['style'] ) ? esc_attr( $border_radius['style'] ) : '',
-				isset( $margin['style'] ) ? esc_attr( $margin['style'] ) : '',
+				esc_attr( $classes_and_styles['classes'] ),
+				esc_attr( $classes_and_styles['styles'] ),
 				$this->render_anchor(
 					$product,
 					$this->render_on_sale_badge( $product, $parsed_attributes ),