From 58d25dcb383d6e1d0cc4245a256e9804b4c93e8e 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 (#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/assets/js/atomic/blocks/product-elements/image/supports.ts b/assets/js/atomic/blocks/product-elements/image/supports.ts
index 1180ce0da40..c8f480973d9 100644
--- a/assets/js/atomic/blocks/product-elements/image/supports.ts
+++ b/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/src/BlockTypes/ProductImage.php b/src/BlockTypes/ProductImage.php
index 432a9105bd5..95a8297490e 100644
--- a/src/BlockTypes/ProductImage.php
+++ b/src/BlockTypes/ProductImage.php
@@ -188,19 +188,20 @@ protected function render( $attributes, $content, $block ) {
 		}
 		$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 ),