Commit cdd629301d8 for woocommerce
commit cdd629301d8c1380d3fcdd903b06584195265680
Author: Tung Du <dinhtungdu@gmail.com>
Date: Tue Jul 28 17:33:51 2026 +0700
Product Price: support responsive styling (#67007)
diff --git a/plugins/woocommerce/changelog/fix-product-price-block-responsive-styles b/plugins/woocommerce/changelog/fix-product-price-block-responsive-styles
new file mode 100644
index 00000000000..62f5d7ba45a
--- /dev/null
+++ b/plugins/woocommerce/changelog/fix-product-price-block-responsive-styles
@@ -0,0 +1,4 @@
+Significance: patch
+Type: add
+
+Product Price: support Responsive Styling.
diff --git a/plugins/woocommerce/client/blocks/assets/js/atomic/blocks/product-elements/price/block.json b/plugins/woocommerce/client/blocks/assets/js/atomic/blocks/product-elements/price/block.json
index 274b73cc1f0..216262498a4 100644
--- a/plugins/woocommerce/client/blocks/assets/js/atomic/blocks/product-elements/price/block.json
+++ b/plugins/woocommerce/client/blocks/assets/js/atomic/blocks/product-elements/price/block.json
@@ -26,7 +26,8 @@
"color": {
"text": true,
"background": true,
- "link": false
+ "link": false,
+ "__experimentalSkipSerialization": true
},
"typography": {
"fontSize": true,
@@ -34,13 +35,21 @@
"__experimentalFontFamily": true,
"__experimentalFontWeight": true,
"__experimentalFontStyle": true,
- "__experimentalLetterSpacing": true
+ "__experimentalLetterSpacing": true,
+ "__experimentalSkipSerialization": true
},
- "__experimentalSelector": ".wp-block-woocommerce-product-price .wc-block-components-product-price",
"email": true,
"spacing": {
"margin": true,
- "padding": true
+ "padding": true,
+ "__experimentalSkipSerialization": [ "padding" ]
+ }
+ },
+ "selectors": {
+ "root": ".wp-block-woocommerce-product-price .wc-block-components-product-price",
+ "spacing": {
+ "margin": ".wp-block-woocommerce-product-price",
+ "padding": ".wp-block-woocommerce-product-price .wc-block-components-product-price"
}
},
"ancestor": [
diff --git a/plugins/woocommerce/client/blocks/assets/js/atomic/blocks/product-elements/price/block.tsx b/plugins/woocommerce/client/blocks/assets/js/atomic/blocks/product-elements/price/block.tsx
index 625c8ca1c19..66778cc98f0 100644
--- a/plugins/woocommerce/client/blocks/assets/js/atomic/blocks/product-elements/price/block.tsx
+++ b/plugins/woocommerce/client/blocks/assets/js/atomic/blocks/product-elements/price/block.tsx
@@ -95,39 +95,50 @@ export const Block = ( props: Props ): JSX.Element | null => {
parentName ===
'woocommerce/add-to-cart-with-options-grouped-product-item';
- // If the block is not a descendant of the All Products block, we are
- // already printing the styles from the PHP side (in the frontend) and the
- // `edit.tsx` file (in the editor).
- const computedStyles = useStyleProps( props );
- let styleProps = {
- className: '',
- style: {},
+ const styleProps = useStyleProps( props );
+ const {
+ margin,
+ marginTop,
+ marginRight,
+ marginBottom,
+ marginLeft,
+ ...priceStyle
+ } = styleProps.style;
+ const blockMarginStyle = {
+ margin,
+ marginTop,
+ marginRight,
+ marginBottom,
+ marginLeft,
};
- if ( isDescendentOfAllProductsBlock ) {
- styleProps = computedStyles;
- }
const showPricePreview =
( isDescendentOfSingleProductTemplate &&
! isDescendentOfAddToCartGroupedProductSelectorBlock ) ||
! product;
- const wrapperClassName = clsx(
- 'wc-block-components-product-price',
- className,
- styleProps.className,
- {
- [ `${ parentClassName }__product-price` ]: parentClassName,
- }
+ const blockClassName = clsx(
+ 'wp-block-woocommerce-product-price',
+ className
);
+ const wrapperClassName = clsx( styleProps.className, {
+ [ `${ parentClassName }__product-price` ]: parentClassName,
+ } );
if ( ! product?.id && ! isDescendentOfSingleProductTemplate ) {
const productPriceComponent = (
- <ProductPrice align={ textAlign } className={ wrapperClassName } />
+ <ProductPrice
+ align={ textAlign }
+ className={ wrapperClassName }
+ style={ priceStyle }
+ />
);
if ( isDescendentOfAllProductsBlock ) {
return (
- <div className="wp-block-woocommerce-product-price">
+ <div
+ className={ blockClassName }
+ style={ isAdmin ? undefined : blockMarginStyle }
+ >
{ productPriceComponent }
</div>
);
@@ -190,9 +201,7 @@ export const Block = ( props: Props ): JSX.Element | null => {
<ProductPrice
align={ textAlign }
className={ wrapperClassName }
- style={ styleProps.style }
- regularPriceStyle={ styleProps.style }
- priceStyle={ styleProps.style }
+ style={ priceStyle }
priceClassName={ priceClassName }
currency={ currency }
price={ showPricePreview ? pricePreview : prices.price }
@@ -211,7 +220,10 @@ export const Block = ( props: Props ): JSX.Element | null => {
);
if ( isDescendentOfAllProductsBlock ) {
return (
- <div className="wp-block-woocommerce-product-price">
+ <div
+ className={ blockClassName }
+ style={ isAdmin ? undefined : blockMarginStyle }
+ >
{ productPriceComponent }
</div>
);
diff --git a/plugins/woocommerce/client/blocks/assets/js/base/components/product-price/index.tsx b/plugins/woocommerce/client/blocks/assets/js/base/components/product-price/index.tsx
index 52b29487d8e..a369bf76b42 100644
--- a/plugins/woocommerce/client/blocks/assets/js/base/components/product-price/index.tsx
+++ b/plugins/woocommerce/client/blocks/assets/js/base/components/product-price/index.tsx
@@ -239,14 +239,9 @@ export interface ProductPriceProps {
*/
regularPriceStyle?: React.CSSProperties | undefined;
/**
- * Custom margin to apply to the price wrapper.
+ * Custom styles to apply to the price wrapper.
*/
- style?:
- | Pick<
- React.CSSProperties,
- 'marginTop' | 'marginRight' | 'marginBottom' | 'marginLeft'
- >
- | undefined;
+ style?: React.CSSProperties | undefined;
}
const ProductPrice = ( {
diff --git a/plugins/woocommerce/src/Blocks/BlockTypes/ProductPrice.php b/plugins/woocommerce/src/Blocks/BlockTypes/ProductPrice.php
index 7d636a0019f..81fefc091f5 100644
--- a/plugins/woocommerce/src/Blocks/BlockTypes/ProductPrice.php
+++ b/plugins/woocommerce/src/Blocks/BlockTypes/ProductPrice.php
@@ -65,7 +65,8 @@ class ProductPrice extends AbstractBlock {
$product = wc_get_product( $post_id );
if ( $product ) {
- $styles_and_classes = StyleAttributesUtils::get_classes_and_styles_by_attributes( $attributes );
+ $wrapper_class = StyleAttributesUtils::get_classes_by_attributes( $attributes, array( 'extra_classes' ) );
+ $styles_and_classes = StyleAttributesUtils::get_classes_and_styles_by_attributes( $attributes, array(), array( 'extra_classes', 'margin' ) );
$is_descendant_of_product_collection = isset( $block->context['query']['isProductCollectionBlock'] );
$is_descendant_of_grouped_product_selector = isset( $block->context['isDescendantOfGroupedProductSelector'] );
@@ -83,8 +84,7 @@ class ProductPrice extends AbstractBlock {
}
$wrapper_attributes = array(
- 'style' => $styles_and_classes['styles'] ?? '',
- 'class' => $styles_and_classes['classes'] ?? '',
+ 'class' => $wrapper_class,
);
$interactive_attributes = '';
$context_directive = '';
@@ -101,11 +101,13 @@ class ProductPrice extends AbstractBlock {
}
return sprintf(
- '<div %1$s %2$s><div class="wc-block-components-product-price wc-block-grid__product-price" %3$s>
- %4$s
+ '<div %1$s %2$s><div class="wc-block-components-product-price wc-block-grid__product-price %3$s" style="%4$s" %5$s>
+ %6$s
</div></div>',
get_block_wrapper_attributes( $wrapper_attributes ),
$context_directive,
+ esc_attr( $styles_and_classes['classes'] ?? '' ),
+ esc_attr( $styles_and_classes['styles'] ?? '' ),
$interactive_attributes,
$product->get_price_html()
);