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

Fix Product Price styles leaking into the Mini Cart, Cart and Checkout blocks (https://github.com/woocommerce/woocommerce-blocks/pull/9276) 

* Fix Product Price styles leaking into the Mini Cart

* Add support for All Products block
This commit is contained in:
Albert Juhé Lluveras 2023-05-04 09:32:45 +02:00 committed by GitHub
parent 2e4557bdb7
commit 19332e960d
3 changed files with 26 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/price/block.tsx
View File

@ -41,9 +41,11 @@ interface PriceProps {
export const Block = ( props: Props ): JSX.Element | null => {
const { className, textAlign, isDescendentOfSingleProductTemplate } = props;
const { parentClassName } = useInnerBlockLayoutContext();
const { parentName, parentClassName } = useInnerBlockLayoutContext();
const { product } = useProductDataContext();
const isDescendentOfAllProductsBlock =
parentName === 'woocommerce/all-products';
const colorProps = useColorProps( props );
const spacingProps = useSpacingProps( props );
const typographyProps = useTypographyProps( props );
@ -59,9 +61,17 @@ export const Block = ( props: Props ): JSX.Element | null => {
);
if ( ! product.id && ! isDescendentOfSingleProductTemplate ) {
return (
const productPriceComponent = (
<ProductPrice align={ textAlign } className={ wrapperClassName } />
);
if ( isDescendentOfAllProductsBlock ) {
return (
<div className="wp-block-woocommerce-product-price">
{ productPriceComponent }
</div>
);
}
return productPriceComponent;
}
const style = {
@ -83,7 +93,7 @@ export const Block = ( props: Props ): JSX.Element | null => {
[ `${ parentClassName }__product-price__value--on-sale` ]: isOnSale,
} );
return (
const productPriceComponent = (
<ProductPrice
align={ textAlign }
className={ wrapperClassName }
@ -112,6 +122,14 @@ export const Block = ( props: Props ): JSX.Element | null => {
spacingStyle={ spacingStyle }
/>
);
if ( isDescendentOfAllProductsBlock ) {
return (
<div className="wp-block-woocommerce-product-price">
{ productPriceComponent }
</div>
);
}
return productPriceComponent;
};
export default ( props: Props ) => {

3
plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/price/supports.ts
View File

@ -27,7 +27,8 @@ export const supports = {
__experimentalSkipSerialization: true,
__experimentalLetterSpacing: true,
},
__experimentalSelector: '.wc-block-components-product-price',
__experimentalSelector:
'.wp-block-woocommerce-product-price .wc-block-components-product-price',
} ),
...( typeof __experimentalGetSpacingClassesAndStyles === 'function' && {
spacing: {

6
plugins/woocommerce-blocks/src/BlockTypes/ProductPrice.php
View File

@ -42,7 +42,7 @@ class ProductPrice extends AbstractBlock {
'__experimentalFontWeight' => true,
'__experimentalFontStyle' => true,
),
'__experimentalSelector' => '.wc-block-components-product-price',
'__experimentalSelector' => '.wp-block-woocommerce-product-price .wc-block-components-product-price',
);
}
@ -86,9 +86,9 @@ class ProductPrice extends AbstractBlock {
$text_align_styles_and_classes = StyleAttributesUtils::get_text_align_class_and_style( $attributes );
return sprintf(
'<div class="wc-block-components-product-price wc-block-grid__product-price %1$s %2$s" style="%3$s">
'<div class="wp-block-woocommerce-product-price"><div class="wc-block-components-product-price wc-block-grid__product-price %1$s %2$s" style="%3$s">
%4$s
</div>',
</div></div>',
esc_attr( $text_align_styles_and_classes['class'] ?? '' ),
esc_attr( $styles_and_classes['classes'] ),
esc_attr( $styles_and_classes['styles'] ?? '' ),