Skip to content
This repository has been archived by the owner on Feb 23, 2024. It is now read-only.

Fix Product Price styles leaking into the Mini Cart, Cart and Checkout blocks #9276

Merged
merged 2 commits into from
May 4, 2023
Merged

Fix Product Price styles leaking into the Mini Cart, Cart and Checkout blocks #9276

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
8ac10b0
Fix Product Price styles leaking into the Mini Cart
Aljullu Apr 28, 2023
749b74b
Add support for All Products block
Aljullu Apr 28, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
24 changes: 21 additions & 3 deletions assets/js/atomic/blocks/product-elements/price/block.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 );
Expand All @@ -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 = {
Expand All @@ -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 }
Expand Down Expand Up @@ -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 ) => {
Expand Down
3 changes: 2 additions & 1 deletion assets/js/atomic/blocks/product-elements/price/supports.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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: {
Expand Down
6 changes: 3 additions & 3 deletions src/BlockTypes/ProductPrice.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,7 @@ protected function get_block_type_supports() {
'__experimentalFontWeight' => true,
'__experimentalFontStyle' => true,
),
'__experimentalSelector' => '.wc-block-components-product-price',
'__experimentalSelector' => '.wp-block-woocommerce-product-price .wc-block-components-product-price',
);
}

Expand Down Expand Up @@ -86,9 +86,9 @@ protected function render( $attributes, $content, $block ) {
$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">
Aljullu marked this conversation as resolved.
Show resolved Hide resolved
%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'] ?? '' ),
Expand Down