Products block: Using nested selector to add margin between Product elements (https://github.com/woocommerce/woocommerce-blocks/pull/8993)

* Using nested selector to style Product elements in Products Block

This commit simplifies the INNER_BLOCKS_TEMPLATE array in the product-query constants.ts file by removing the style properties from the individual elements. Instead, the default styles are now managed in the style.scss file, providing a more consistent and centralized approach to styling.

In the style.scss file, a new section for default styling has been added to handle product elements inside the Products Block, adhering to the Gutenberg styling hierarchy. This ensures the lowest precedence in the hierarchy, allowing for easier overrides when needed.

* Decrease specificity of styles for product elements in Products Block

The commit changes the default styles for product elements inside the 'Products Block'. It changes the way the margin-bottom and margin-top properties are set by using the :where() selector instead of using the .products-block-post-template class selector. This is done to decrease the specificity of the CSS selector, ensuring that the styles have the lowest precedence in the hierarchy. It also removes the display: inline-block property from the a selector, and moves the styles to the .editor-styles-wrapper class selector.

* Decrease specificity of CSS selectors

In these changes, the product elements inside the Products Block have been restyled. The specificity of the CSS selector has been decreased using the :where() selector, to ensure that these styles have the lowest precedence in the hierarchy.

In constants.ts, a new class name, products-block-post-template, has been added to the inner block template for the post. This class is used to add default styles for inner blocks.

In style.scss, the CSS selector for the inner blocks has been updated to include the new class name. The :where() selector has also been used to ensure that these styles have the lowest precedence in the hierarchy.

* Update default margins and remove redundant entries

This commit updates the default margin values for the Product Title in the Products block, moving them from the style.scss file to the constants.ts file. It also removes unnecessary empty arrays in the INNER_BLOCKS_TEMPLATE and background-color property from the style.scss file.

plugins/woocommerce-blocks/assets/js/blocks/product-query/constants.ts

@@ -79,19 +79,17 @@ export const QUERY_DEFAULT_ATTRIBUTES: QueryBlockAttributes = {
 export const INNER_BLOCKS_TEMPLATE: InnerBlockTemplate[] = [
 	[
 		'core/post-template',
-		{ __woocommerceNamespace: PRODUCT_TEMPLATE_ID },
+		{
+			__woocommerceNamespace: PRODUCT_TEMPLATE_ID,
+			/**
+			 * This class is used to add default styles for inner blocks.
+			 */
+			className: 'products-block-post-template',
+		},
 		[
 			[
 				'woocommerce/product-image',
 				{
-					style: {
-						spacing: {
-							margin: {
-								bottom: '0.75rem',
-								top: '0',
-							},
-						},
-					},
 					imageSizing: ImageSizing.THUMBNAIL,
 				},
 			],
@@ -112,39 +110,20 @@ export const INNER_BLOCKS_TEMPLATE: InnerBlockTemplate[] = [
 					isLink: true,
 					__woocommerceNamespace: PRODUCT_TITLE_ID,
 				},
-				[],
 			],
 			[
 				'woocommerce/product-price',
 				{
 					textAlign: 'center',
 					fontSize: 'small',
-					style: {
-						spacing: {
-							margin: {
-								bottom: '0.75rem',
-								top: '0',
-							},
-						},
-					},
 				},
-				[],
 			],
 			[
 				'woocommerce/product-button',
 				{
 					textAlign: 'center',
 					fontSize: 'small',
-					style: {
-						spacing: {
-							margin: {
-								bottom: '0.75rem',
-								top: '0',
-							},
-						},
-					},
 				},
-				[],
 			],
 		],
 	],
@@ -156,7 +135,6 @@ export const INNER_BLOCKS_TEMPLATE: InnerBlockTemplate[] = [
 				justifyContent: 'center',
 			},
 		},
-		[],
 	],
 	[ 'core/query-no-results' ],
 ];

plugins/woocommerce-blocks/assets/js/blocks/product-query/style.scss

@@ -12,3 +12,21 @@
 		margin-left: $gap-smaller;
 	}
 }
+
+/**
+ * These are the default styles for `product elements` that appear inside the 'Products Block'.
+ * These styles follow the Gutenberg styling hierarchy, which is as follows:
+ * Editor Styles > Global Styles > Child Theme > Parent Theme > These styles
+ *
+ * To ensure that the styles below have the lowest precedence in the hierarchy,
+ * we use the :where() selector to decrease the specificity of the CSS selector.
+ */
+:where(.products-block-post-template .wp-block-post) > * {
+	margin-bottom: 0.75rem;
+	margin-top: 0;
+}
+
+:where(.editor-styles-wrapper .products-block-post-template .wp-block-post) > * > * {
+	margin-bottom: 0;
+	margin-top: 0;
+}