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( - '
+ '
%3$s
', - 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 ),