From f05497c0589ac37bfdf494a31e7215c36b9d726d Mon Sep 17 00:00:00 2001 From: Daniel Dudzic Date: Fri, 20 Jan 2023 15:56:29 +0100 Subject: [PATCH] Product Price: Transition from using CSS margin to Global Styles (#8195) * Product Price: Transition from using CSS margin to Global Styles * Product Price: Re-add css margins for Product Price inside of the All Products block. * Product Price: Change bottom margin to 1rem * Product Price: Fix the margin typescript declaration. --- .../blocks/product-elements/price/block.tsx | 21 ++++++++++++------- .../blocks/product-elements/price/style.scss | 6 +++++- .../blocks/product-elements/price/supports.ts | 7 +++++++ .../base/components/product-price/index.tsx | 12 ++++++++++- assets/js/blocks/product-query/constants.ts | 10 ++++++++- ...-query-1-1-image-4-column-products-row.php | 2 +- .../product-query-3-column-product-row.php | 2 +- .../product-query-4-column-product-row.php | 2 +- ...duct-query-large-image-product-gallery.php | 2 +- ...ct-query-minimal-5-column-products-row.php | 2 +- .../product-query-minimal-product-list.php | 2 +- patterns/product-query-product-gallery.php | 2 +- ...uct-query-product-list-with-1-1-images.php | 2 +- ...uct-list-with-full-product-description.php | 2 +- src/BlockTypes/ProductPrice.php | 2 +- 15 files changed, 56 insertions(+), 20 deletions(-) diff --git a/assets/js/atomic/blocks/product-elements/price/block.tsx b/assets/js/atomic/blocks/product-elements/price/block.tsx index c742adb62a3..473b6cb0a40 100644 --- a/assets/js/atomic/blocks/product-elements/price/block.tsx +++ b/assets/js/atomic/blocks/product-elements/price/block.tsx @@ -8,7 +8,11 @@ import { useInnerBlockLayoutContext, useProductDataContext, } from '@woocommerce/shared-context'; -import { useColorProps, useTypographyProps } from '@woocommerce/base-hooks'; +import { + useColorProps, + useSpacingProps, + useTypographyProps, +} from '@woocommerce/base-hooks'; import { withProductDataContext } from '@woocommerce/shared-hocs'; import type { HTMLAttributes } from 'react'; import { CurrencyCode } from '@woocommerce/type-defs/currency'; @@ -41,6 +45,7 @@ export const Block = ( props: Props ): JSX.Element | null => { const { product } = useProductDataContext(); const colorProps = useColorProps( props ); + const spacingProps = useSpacingProps( props ); const typographyProps = useTypographyProps( props ); const wrapperClassName = classnames( @@ -52,17 +57,19 @@ export const Block = ( props: Props ): JSX.Element | null => { } ); - const style = { - ...typographyProps.style, - ...colorProps.style, - }; - if ( ! product.id ) { return ( ); } + const style = { + ...colorProps.style, + ...typographyProps.style, + }; + const spacingStyle = { + ...spacingProps.style, + }; const prices: PriceProps = product.prices; const currency = getCurrencyFromPriceResponse( prices ); const isOnSale = prices.price !== prices.regular_price; @@ -75,7 +82,6 @@ export const Block = ( props: Props ): JSX.Element | null => { { [ `${ parentClassName }__product-price__regular` ]: parentClassName, } ) } + spacingStyle={ spacingStyle } /> ); }; diff --git a/assets/js/atomic/blocks/product-elements/price/style.scss b/assets/js/atomic/blocks/product-elements/price/style.scss index d71a17aeaae..b7b3279fbdd 100644 --- a/assets/js/atomic/blocks/product-elements/price/style.scss +++ b/assets/js/atomic/blocks/product-elements/price/style.scss @@ -1,3 +1,7 @@ .wc-block-components-product-price { - margin-bottom: $gap-small; + display: block; + + .wc-block-all-products & { + margin-bottom: $gap-small; + } } diff --git a/assets/js/atomic/blocks/product-elements/price/supports.ts b/assets/js/atomic/blocks/product-elements/price/supports.ts index 078b70d46c8..c4ae2a23093 100644 --- a/assets/js/atomic/blocks/product-elements/price/supports.ts +++ b/assets/js/atomic/blocks/product-elements/price/supports.ts @@ -2,6 +2,7 @@ * External dependencies */ import { isFeaturePluginBuild } from '@woocommerce/block-settings'; +import { __experimentalGetSpacingClassesAndStyles } from '@wordpress/block-editor'; /** * Internal dependencies @@ -23,6 +24,12 @@ export const supports = { __experimentalFontStyle: true, __experimentalSkipSerialization: true, }, + ...( typeof __experimentalGetSpacingClassesAndStyles === 'function' && { + spacing: { + margin: true, + __experimentalSkipSerialization: true, + }, + } ), __experimentalSelector: '.wc-block-components-product-price', } ), }; diff --git a/assets/js/base/components/product-price/index.tsx b/assets/js/base/components/product-price/index.tsx index bf02a763b89..97d48ef3b43 100644 --- a/assets/js/base/components/product-price/index.tsx +++ b/assets/js/base/components/product-price/index.tsx @@ -239,6 +239,15 @@ export interface ProductPriceProps { * Custom style to apply to the regular price wrapper. */ regularPriceStyle?: React.CSSProperties | undefined; + /** + * Custom margin to apply to the price wrapper. + */ + spacingStyle?: + | Pick< + React.CSSProperties, + 'marginTop' | 'marginRight' | 'marginBottom' | 'marginLeft' + > + | undefined; } const ProductPrice = ( { @@ -254,6 +263,7 @@ const ProductPrice = ( { regularPrice, regularPriceClassName, regularPriceStyle, + spacingStyle, }: ProductPriceProps ): JSX.Element => { const wrapperClassName = classNames( className, @@ -317,7 +327,7 @@ const ProductPrice = ( { } return ( - + { createInterpolateElement( format, { price: priceComponent, } ) } diff --git a/assets/js/blocks/product-query/constants.ts b/assets/js/blocks/product-query/constants.ts index 39c84b8539d..7056f310c02 100644 --- a/assets/js/blocks/product-query/constants.ts +++ b/assets/js/blocks/product-query/constants.ts @@ -90,7 +90,15 @@ export const INNER_BLOCKS_TEMPLATE: InnerBlockTemplate[] = [ ], [ 'woocommerce/product-price', - { textAlign: 'center', fontSize: 'small' }, + { + textAlign: 'center', + fontSize: 'small', + style: { + spacing: { + margin: { bottom: '1rem' }, + }, + }, + }, [], ], [ diff --git a/patterns/product-query-1-1-image-4-column-products-row.php b/patterns/product-query-1-1-image-4-column-products-row.php index d8742e50a14..e3e889cf417 100644 --- a/patterns/product-query-1-1-image-4-column-products-row.php +++ b/patterns/product-query-1-1-image-4-column-products-row.php @@ -12,7 +12,7 @@ - + diff --git a/patterns/product-query-3-column-product-row.php b/patterns/product-query-3-column-product-row.php index 54a80f098eb..b9cfd998795 100644 --- a/patterns/product-query-3-column-product-row.php +++ b/patterns/product-query-3-column-product-row.php @@ -14,7 +14,7 @@ - + diff --git a/patterns/product-query-4-column-product-row.php b/patterns/product-query-4-column-product-row.php index e363b577415..a5d985ada72 100644 --- a/patterns/product-query-4-column-product-row.php +++ b/patterns/product-query-4-column-product-row.php @@ -13,7 +13,7 @@ -
+
diff --git a/patterns/product-query-large-image-product-gallery.php b/patterns/product-query-large-image-product-gallery.php index 5864e0efee1..99abd97f09f 100644 --- a/patterns/product-query-large-image-product-gallery.php +++ b/patterns/product-query-large-image-product-gallery.php @@ -12,7 +12,7 @@ - + diff --git a/patterns/product-query-minimal-5-column-products-row.php b/patterns/product-query-minimal-5-column-products-row.php index 7b6eea53265..4d7984c6b53 100644 --- a/patterns/product-query-minimal-5-column-products-row.php +++ b/patterns/product-query-minimal-5-column-products-row.php @@ -16,7 +16,7 @@ -
+
diff --git a/patterns/product-query-minimal-product-list.php b/patterns/product-query-minimal-product-list.php index 99f6a061742..2742cd788b7 100644 --- a/patterns/product-query-minimal-product-list.php +++ b/patterns/product-query-minimal-product-list.php @@ -18,7 +18,7 @@ - + diff --git a/patterns/product-query-product-gallery.php b/patterns/product-query-product-gallery.php index 5610d046ab5..f60eb24700e 100644 --- a/patterns/product-query-product-gallery.php +++ b/patterns/product-query-product-gallery.php @@ -16,7 +16,7 @@ - + diff --git a/patterns/product-query-product-list-with-1-1-images.php b/patterns/product-query-product-list-with-1-1-images.php index 140123d4a62..d51643b0442 100644 --- a/patterns/product-query-product-list-with-1-1-images.php +++ b/patterns/product-query-product-list-with-1-1-images.php @@ -20,7 +20,7 @@ - + diff --git a/patterns/product-query-product-list-with-full-product-description.php b/patterns/product-query-product-list-with-full-product-description.php index 578d99b0127..cd1c0bc6bb6 100644 --- a/patterns/product-query-product-list-with-full-product-description.php +++ b/patterns/product-query-product-list-with-full-product-description.php @@ -26,7 +26,7 @@
-
+
diff --git a/src/BlockTypes/ProductPrice.php b/src/BlockTypes/ProductPrice.php index 43a8ca7fe60..795432374ad 100644 --- a/src/BlockTypes/ProductPrice.php +++ b/src/BlockTypes/ProductPrice.php @@ -82,7 +82,7 @@ protected function render( $attributes, $content, $block ) { $product = wc_get_product( $post_id ); if ( $product ) { - $styles_and_classes = StyleAttributesUtils::get_classes_and_styles_by_attributes( $attributes, array( 'font_size', 'font_weight', 'font_style', 'text_color', 'background_color' ) ); + $styles_and_classes = StyleAttributesUtils::get_classes_and_styles_by_attributes( $attributes, array( 'font_size', 'font_weight', 'font_style', 'text_color', 'background_color', 'margin' ) ); $text_align_styles_and_classes = StyleAttributesUtils::get_text_align_class_and_style( $attributes ); return sprintf(