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.
woocommerce · Jan 20, 2023 · f05497c · f05497c
1 parent 8ba1261
commit f05497c
Show file tree

Hide file tree

Showing 15 changed files with 56 additions and 20 deletions.
diff --git 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 (
 			<ProductPrice align={ textAlign } className={ wrapperClassName } />
 		);
 	}
 
+	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 => {
 		<ProductPrice
 			align={ textAlign }
 			className={ wrapperClassName }
-			priceStyle={ style }
 			regularPriceStyle={ style }
 			priceClassName={ priceClassName }
 			currency={ currency }
@@ -89,6 +95,7 @@ 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
@@ -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
@@ -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
@@ -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 (
-		<span className={ wrapperClassName }>
+		<span className={ wrapperClassName } style={ spacingStyle }>
 			{ createInterpolateElement( format, {
 				price: priceComponent,
 			} ) }

diff --git 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
@@ -12,7 +12,7 @@
 
 <!-- wp:post-title {"textAlign":"center","level":3,"isLink":true,"fontSize":"medium"} /-->
 
-<!-- wp:woocommerce/product-price {"isDescendentOfQueryLoop":true,"textAlign":"center","fontSize":"small"} /-->
+<!-- wp:woocommerce/product-price {"isDescendentOfQueryLoop":true,"textAlign":"center","fontSize":"small","style":{"spacing":{"margin":{"bottom":"1rem"}}}} /-->
 
 <!-- wp:woocommerce/product-button {"isDescendentOfQueryLoop":true,"textAlign":"center","fontSize":"small"} /-->
 <!-- /wp:post-template -->

diff --git a/patterns/product-query-3-column-product-row.php b/patterns/product-query-3-column-product-row.php
@@ -14,7 +14,7 @@
 
 <!-- wp:post-title {"textAlign":"center","level":3,"isLink":true,"style":{"spacing":{"margin":{"top":"0","bottom":"1rem"}}},"fontSize":"medium"} /-->
 
-<!-- wp:woocommerce/product-price {"isDescendentOfQueryLoop":true,"textAlign":"center","fontSize":"small"} /-->
+<!-- wp:woocommerce/product-price {"isDescendentOfQueryLoop":true,"textAlign":"center","fontSize":"small","style":{"spacing":{"margin":{"bottom":"1rem"}}}} /-->
 <!-- /wp:post-template -->
 
 <!-- wp:query-pagination {"layout":{"type":"flex","justifyContent":"center"}} -->

diff --git a/patterns/product-query-4-column-product-row.php b/patterns/product-query-4-column-product-row.php
@@ -13,7 +13,7 @@
 <!-- wp:post-title {"isLink":true,"fontSize":"medium"} /-->
 
 <!-- wp:group {"layout":{"type":"flex","flexWrap":"wrap","verticalAlignment":"top","justifyContent":"space-between","orientation":"horizontal"}} -->
-<div class="wp-block-group"><!-- wp:woocommerce/product-price {"isDescendentOfQueryLoop":true,"fontSize":"small"} /-->
+<div class="wp-block-group"><!-- wp:woocommerce/product-price {"isDescendentOfQueryLoop":true,"fontSize":"small","style":{"spacing":{"margin":{"bottom":"1rem"}}}} /-->
 
 <!-- wp:woocommerce/product-rating {"isDescendentOfQueryLoop":true,"fontSize":"small"} /--></div>
 <!-- /wp:group -->

diff --git a/patterns/product-query-large-image-product-gallery.php b/patterns/product-query-large-image-product-gallery.php
@@ -12,7 +12,7 @@
 
 <!-- wp:post-title {"textAlign":"center","level":3,"isLink":true,"style":{"spacing":{"margin":{"bottom":"1rem"}}},"fontSize":"medium"} /-->
 
-<!-- wp:woocommerce/product-price {"isDescendentOfQueryLoop":true,"textAlign":"center","fontSize":"small"} /-->
+<!-- wp:woocommerce/product-price {"isDescendentOfQueryLoop":true,"textAlign":"center","fontSize":"small","style":{"spacing":{"margin":{"bottom":"1rem"}}}} /-->
 <!-- /wp:post-template -->
 
 <!-- wp:query-pagination {"layout":{"type":"flex","justifyContent":"center"}} -->

diff --git a/patterns/product-query-minimal-5-column-products-row.php b/patterns/product-query-minimal-5-column-products-row.php
@@ -16,7 +16,7 @@
 <!-- /wp:column -->
 
 <!-- wp:column {"width":"50%"} -->
-<div class="wp-block-column" style="flex-basis:50%"><!-- wp:woocommerce/product-price {"isDescendentOfQueryLoop":true,"textAlign":"right","fontSize":"small"} /--></div>
+<div class="wp-block-column" style="flex-basis:50%"><!-- wp:woocommerce/product-price {"isDescendentOfQueryLoop":true,"textAlign":"right","fontSize":"small","style":{"spacing":{"margin":{"bottom":"1rem"}}}} /--></div>
 <!-- /wp:column --></div>
 <!-- /wp:columns -->
 <!-- /wp:post-template -->

diff --git a/patterns/product-query-minimal-product-list.php b/patterns/product-query-minimal-product-list.php
@@ -18,7 +18,7 @@
 
 <!-- wp:post-title {"level":3,"isLink":true,"style":{"spacing":{"margin":{"top":"0"}}},"fontSize":"large"} /-->
 
-<!-- wp:woocommerce/product-price {"isDescendentOfQueryLoop":true,"fontSize":"small"} /--></div>
+<!-- wp:woocommerce/product-price {"isDescendentOfQueryLoop":true,"fontSize":"small","style":{"spacing":{"margin":{"bottom":"1rem"}}}} /--></div>
 <!-- /wp:column --></div>
 <!-- /wp:columns -->
 <!-- /wp:post-template -->

diff --git a/patterns/product-query-product-gallery.php b/patterns/product-query-product-gallery.php
@@ -16,7 +16,7 @@
 
 <!-- wp:post-excerpt {"textAlign":"center","showMoreOnNewLine":false,"style":{"spacing":{"margin":{"top":"0"}}},"fontSize":"small","__woocommerceNamespace":"woocommerce/product-query/product-summary"} /-->
 
-<!-- wp:woocommerce/product-price {"isDescendentOfQueryLoop":true,"textAlign":"center","fontSize":"small"} /-->
+<!-- wp:woocommerce/product-price {"isDescendentOfQueryLoop":true,"textAlign":"center","fontSize":"small","style":{"spacing":{"margin":{"bottom":"1rem"}}}} /-->
 <!-- /wp:post-template -->
 
 <!-- wp:query-pagination {"layout":{"type":"flex","justifyContent":"center"}} -->

diff --git 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 @@
 
 <!-- wp:post-excerpt {"style":{"spacing":{"margin":{"top":"0"}}},"fontSize":"small","__woocommerceNamespace":"woocommerce/product-query/product-summary"} /-->
 
-<!-- wp:woocommerce/product-price {"isDescendentOfQueryLoop":true,"fontSize":"small"} /-->
+<!-- wp:woocommerce/product-price {"isDescendentOfQueryLoop":true,"fontSize":"small","style":{"spacing":{"margin":{"bottom":"1rem"}}}} /-->
 
 <!-- wp:woocommerce/product-button {"isDescendentOfQueryLoop":true,"fontSize":"small"} /--></div>
 <!-- /wp:column --></div>

diff --git 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 @@
 
 <!-- wp:columns -->
 <div class="wp-block-columns"><!-- wp:column {"width":"33.33%"} -->
-<div class="wp-block-column" style="flex-basis:33.33%"><!-- wp:woocommerce/product-price {"isDescendentOfQueryLoop":true,"fontSize":"small"} /--></div>
+<div class="wp-block-column" style="flex-basis:33.33%"><!-- wp:woocommerce/product-price {"isDescendentOfQueryLoop":true,"fontSize":"small","style":{"spacing":{"margin":{"bottom":"1rem"}}}} /--></div>
 <!-- /wp:column -->
 
 <!-- wp:column {"width":"66.66%"} -->

diff --git 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(