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

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.
This commit is contained in:
Manish Menaria 2023-04-28 13:13:47 +05:30 committed by GitHub
parent d7fa7a3310
commit 1e1b82ad63
2 changed files with 25 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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' ],
];

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

@ -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;
}