Steve-Dee-Designs
/
woocommerce
mirror of https://github.com/woocommerce/woocommerce.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

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.
This commit is contained in:
Manish Menaria 2023-03-30 12:35:32 +05:30 committed by GitHub
parent a0a6f0914c
commit 392f7e17fe
2 changed files with 9 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/image/supports.ts
View File

@ -3,7 +3,7 @@
* External dependencies * External dependencies
*/ */
import { isFeaturePluginBuild } from '@woocommerce/block-settings'; import { isFeaturePluginBuild } from '@woocommerce/block-settings';
import { __experimentalGetSpacingClassesAndStyles } from '@wordpress/block-editor'; import { __experimentalGetSpacingClassesAndStyles as getSpacingClassesAndStyles } from '@wordpress/block-editor';
/** /**
* Internal dependencies * Internal dependencies
@ -20,9 +20,10 @@ export const supports = {
fontSize: true, fontSize: true,
__experimentalSkipSerialization: true, __experimentalSkipSerialization: true,
}, },
...( typeof __experimentalGetSpacingClassesAndStyles === 'function' && { ...( typeof getSpacingClassesAndStyles === 'function' && {
spacing: { spacing: {
margin: true, margin: true,
padding: true,
__experimentalSkipSerialization: true, __experimentalSkipSerialization: true,
}, },
} ), } ),

11
plugins/woocommerce-blocks/src/BlockTypes/ProductImage.php
View File

@ -188,19 +188,20 @@ class ProductImage extends AbstractBlock {
} }
$parsed_attributes = $this->parse_attributes( $attributes ); $parsed_attributes = $this->parse_attributes( $attributes );
$border_radius = StyleAttributesUtils::get_border_radius_class_and_style( $attributes ); $border_radius = StyleAttributesUtils::get_border_radius_class_and_style( $attributes );
$margin = StyleAttributesUtils::get_margin_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']; $post_id = $block->context['postId'];
$product = wc_get_product( $post_id ); $product = wc_get_product( $post_id );
if ( $product ) { if ( $product ) {
return sprintf( 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 %3$s
</div>', </div>',
isset( $border_radius['style'] ) ? esc_attr( $border_radius['style'] ) : '', esc_attr( $classes_and_styles['classes'] ),
isset( $margin['style'] ) ? esc_attr( $margin['style'] ) : '', esc_attr( $classes_and_styles['styles'] ),
$this->render_anchor( $this->render_anchor(
$product, $product,
$this->render_on_sale_badge( $product, $parsed_attributes ), $this->render_on_sale_badge( $product, $parsed_attributes ),