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

[Aljullu]

Fixes #9044.

Testing

User Facing Testing

Product Price styles don't leak into the Mini Cart block

1. Go to Appearance > Editor > Template Parts > Mini Cart.
2. Open the Styles sidebar > Blocks > Product Price.
3. Set some margin and color to the Product Price.
4. Verify that the new styles aren't applied to the product prices shown in the Mini Cart.
5. Go to the frontend and open the Mini Cart drawer.
6. Verify again that the styles you set in step 3 don't affect the product prices shown in the Mini Cart drawer.

Product Price styles are still applied to the Single Product template

1. Go to Appearance > Editor > Templates > Single Product. Add the Product Price block somewhere in the template.
2. Open the Styles sidebar > Blocks > Product Price.
3. Set some margin and color to the Product Price.
4. Verify that the Product Price block has the margin and color you set.
5. Open the single product page in the frontend.
6. Verify that the Product Price block has the margin and color you set.

Product Price styles are still applied to the Products and All Products blocks

1. Go to Appearance > Editor > Templates > Product Catalog. Add the Products and All Products blocks somewhere in the template.
2. Open the Styles sidebar > Blocks > Product Price.
3. Set some margin and color to the Product Price.
4. Verify that the Product Price inner blocks have the margin and color you set.
5. Open the Shop page in the frontend.
6. Verify that the Product Price inner blocks have the margin and color you set.

• Do not include in the Testing Notes

WooCommerce Visibility

• WooCommerce Core
• Feature plugin
• Experimental

Changelog

Prevent Product Price global styles leaking into the Mini Cart, Cart and Checkout blocks.

[github-actions]

The release ZIP for this PR is accessible via:

https://wcblocks.wpcomstaging.com/wp-content/uploads/woocommerce-gutenberg-products-block-9276.zip

Script Dependencies Report

There is no changed script dependency between this branch and trunk.

This comment was automatically generated by the ./github/compare-assets action.

TypeScript Errors Report

• Files with errors: 452
• Total errors: 2217

🎉 🎉 This PR does not introduce new TS errors.

_{comments-aggregator}

[github-actions]

Size Change: +245 B (0%)

Total Size: 1.1 MB

Filename	Size	Change
build/all-products-frontend.js	11.8 kB	+1 B (0%)
build/all-products.js	38.7 kB	+48 B (0%)
build/cart-blocks/cart-cross-sells-products-frontend.js	5.43 kB	+45 B (+1%)
build/cart-frontend.js	29.3 kB	-1 B (0%)
build/cart.js	44.5 kB	+34 B (0%)
build/product-price-frontend.js	2.17 kB	+58 B (+3%)
build/product-price.js	1.73 kB	+60 B (+4%)

ℹ️ View Unchanged

Filename	Size
build/active-filters-frontend.js	7.99 kB
build/active-filters-wrapper-frontend.js	5.97 kB
build/active-filters.js	7.48 kB
build/all-reviews.js	7.66 kB
build/attribute-filter-frontend.js	22.5 kB
build/attribute-filter-wrapper-frontend.js	7.07 kB
build/attribute-filter.js	13.2 kB
build/blocks-checkout.js	35.1 kB
build/breadcrumbs.js	2.05 kB
build/cart-blocks/cart-accepted-payment-methods-frontend.js	1.38 kB
build/cart-blocks/cart-cross-sells-frontend.js	253 B
build/cart-blocks/cart-express-payment--checkout-blocks/express-payment-frontend.js	5.16 kB
build/cart-blocks/cart-express-payment-frontend.js	719 B
build/cart-blocks/cart-items-frontend.js	302 B
build/cart-blocks/cart-line-items--mini-cart-contents-block/products-table-frontend.js	5.39 kB
build/cart-blocks/cart-line-items-frontend.js	1.06 kB
build/cart-blocks/cart-order-summary-frontend.js	1.27 kB
build/cart-blocks/cart-totals-frontend.js	307 B
build/cart-blocks/empty-cart-frontend.js	345 B
build/cart-blocks/filled-cart-frontend.js	656 B
build/cart-blocks/order-summary-coupon-form-frontend.js	1.63 kB
build/cart-blocks/order-summary-discount-frontend.js	2.12 kB
build/cart-blocks/order-summary-fee-frontend.js	273 B
build/cart-blocks/order-summary-heading-frontend.js	333 B
build/cart-blocks/order-summary-shipping-frontend.js	11.8 kB
build/cart-blocks/order-summary-subtotal-frontend.js	274 B
build/cart-blocks/order-summary-taxes-frontend.js	431 B
build/cart-blocks/proceed-to-checkout-frontend.js	1.38 kB
build/catalog-sorting.js	1.7 kB
build/checkout-blocks/actions-frontend.js	1.84 kB
build/checkout-blocks/billing-address-frontend.js	4.19 kB
build/checkout-blocks/contact-information-frontend.js	2.05 kB
build/checkout-blocks/express-payment-frontend.js	1.13 kB
build/checkout-blocks/fields-frontend.js	331 B
build/checkout-blocks/order-note-frontend.js	1.14 kB
build/checkout-blocks/order-summary-cart-items-frontend.js	3.69 kB
build/checkout-blocks/order-summary-coupon-form-frontend.js	1.79 kB
build/checkout-blocks/order-summary-discount-frontend.js	2.29 kB
build/checkout-blocks/order-summary-fee-frontend.js	275 B
build/checkout-blocks/order-summary-frontend.js	1.27 kB
build/checkout-blocks/order-summary-shipping-frontend.js	11.8 kB
build/checkout-blocks/order-summary-subtotal-frontend.js	273 B
build/checkout-blocks/order-summary-taxes-frontend.js	430 B
build/checkout-blocks/payment-frontend.js	8.27 kB
build/checkout-blocks/pickup-options-frontend.js	4.14 kB
build/checkout-blocks/shipping-address-frontend.js	4.14 kB
build/checkout-blocks/shipping-method-frontend.js	2.59 kB
build/checkout-blocks/shipping-methods-frontend.js	5.64 kB
build/checkout-blocks/terms-frontend.js	1.56 kB
build/checkout-blocks/totals-frontend.js	310 B
build/checkout-frontend.js	30.9 kB
build/checkout.js	46.2 kB
build/customer-account.js	3.18 kB
build/featured-category.js	14.3 kB
build/featured-product.js	14.5 kB
build/filter-wrapper-frontend.js	14 kB
build/filter-wrapper.js	2.4 kB
build/general-style-rtl.css	1.31 kB
build/general-style.css	1.31 kB
build/handpicked-products.js	7.93 kB
build/legacy-template.js	5.62 kB
build/mini-cart-component-frontend.js	29.2 kB
build/mini-cart-contents-block/cart-button-frontend.js	867 B
build/mini-cart-contents-block/checkout-button-frontend.js	870 B
build/mini-cart-contents-block/empty-cart-frontend.js	360 B
build/mini-cart-contents-block/filled-cart-frontend.js	268 B
build/mini-cart-contents-block/footer-frontend.js	3.2 kB
build/mini-cart-contents-block/items-frontend.js	237 B
build/mini-cart-contents-block/products-table-frontend.js	589 B
build/mini-cart-contents-block/shopping-button-frontend.js	759 B
build/mini-cart-contents-block/title-frontend.js	1.09 kB
build/mini-cart-contents-block/title-items-counter-frontend.js	732 B
build/mini-cart-contents-block/title-label-frontend.js	660 B
build/mini-cart-contents.js	17.8 kB
build/mini-cart-frontend.js	2.02 kB
build/mini-cart.js	4.49 kB
build/price-filter-frontend.js	13.9 kB
build/price-filter-wrapper-frontend.js	7.03 kB
build/price-filter.js	8.45 kB
build/price-format.js	1.19 kB
build/product-add-to-cart--product-button--product-image--product-price--product-rating--product-sale-bad--49d3ecb2.js	253 B
build/product-add-to-cart--product-button--product-image--product-rating--product-title.js	151 B
build/product-add-to-cart-frontend.js	6.42 kB
build/product-add-to-cart.js	8.84 kB
build/product-best-sellers.js	8.26 kB
build/product-button--product-image--product-price--product-rating--product-sale-badge--product-sku--prod--408017d2.js	262 B
build/product-button--product-image--product-price--product-rating--product-sale-badge--product-sku--prod--5bce0384.js	464 B
build/product-button-frontend.js	1.92 kB
build/product-button.js	4.17 kB
build/product-categories.js	2.36 kB
build/product-category.js	9.25 kB
build/product-image-frontend.js	1.84 kB
build/product-image.js	4.3 kB
build/product-new.js	8.25 kB
build/product-on-sale.js	8.59 kB
build/product-query.js	11.3 kB
build/product-rating-frontend.js	1.33 kB
build/product-rating.js	920 B
build/product-results-count.js	1.66 kB
build/product-sale-badge-frontend.js	975 B
build/product-sale-badge.js	801 B
build/product-search.js	2.63 kB
build/product-sku-frontend.js	1 kB
build/product-sku.js	578 B
build/product-stock-indicator-frontend.js	1.19 kB
build/product-stock-indicator.js	769 B
build/product-summary-frontend.js	1.29 kB
build/product-summary.js	920 B
build/product-tag.js	8.74 kB
build/product-title-frontend.js	1.37 kB
build/product-title.js	3.73 kB
build/product-top-rated.js	8.5 kB
build/products-by-attribute.js	9.59 kB
build/rating-filter-frontend.js	20.8 kB
build/rating-filter-wrapper-frontend.js	5.59 kB
build/rating-filter.js	6.98 kB
build/reviews-by-category.js	11.9 kB
build/reviews-by-product.js	13 kB
build/reviews-frontend.js	7.1 kB
build/single-product.js	11 kB
build/stock-filter-frontend.js	21.1 kB
build/stock-filter-wrapper-frontend.js	5.83 kB
build/stock-filter.js	7.71 kB
build/store-notices.js	1.69 kB
build/vendors--attribute-filter-wrapper--cart-blocks/order-summary-coupon-form--cart-blocks/order-summary--48e1e4bb-frontend.js	6.82 kB
build/vendors--attribute-filter-wrapper--rating-filter-wrapper--stock-filter-wrapper-frontend.js	7.7 kB
build/vendors--cart-blocks/cart-cross-sells-products--cart-blocks/cart-line-items--cart-blocks/cart-order--3c5fe802-frontend.js	5.26 kB
build/vendors--cart-blocks/cart-line-items--checkout-blocks/order-summary-cart-items--mini-cart-contents---233ab542-frontend.js	3.14 kB
build/vendors--cart-blocks/order-summary-shipping--checkout-blocks/billing-address--checkout-blocks/order--decc3dc6-frontend.js	19.1 kB
build/vendors--cart-blocks/order-summary-shipping--checkout-blocks/order-summary-shipping--checkout-block--24d3fc0c-frontend.js	8.25 kB
build/vendors--checkout-blocks/billing-address--checkout-blocks/shipping-address-frontend.js	5.44 kB
build/vendors--checkout-blocks/shipping-method-frontend.js	12 kB
build/vendors--product-add-to-cart-frontend.js	7.25 kB
build/wc-blocks-data.js	21.8 kB
build/wc-blocks-editor-style-rtl.css	5.87 kB
build/wc-blocks-editor-style.css	5.87 kB
build/wc-blocks-google-analytics.js	1.56 kB
build/wc-blocks-middleware.js	933 B
build/wc-blocks-registry.js	3.15 kB
build/wc-blocks-shared-context.js	1.52 kB
build/wc-blocks-shared-hocs.js	1.75 kB
build/wc-blocks-style-rtl.css	27.7 kB
build/wc-blocks-style.css	27.6 kB
build/wc-blocks-vendors-style-rtl.css	1.96 kB
build/wc-blocks-vendors-style.css	1.96 kB
build/wc-blocks-vendors.js	62.8 kB
build/wc-blocks.js	2.63 kB
build/wc-payment-method-bacs.js	816 B
build/wc-payment-method-cheque.js	811 B
build/wc-payment-method-cod.js	909 B
build/wc-payment-method-paypal.js	837 B
build/wc-settings.js	2.6 kB
build/wc-shipping-method-pickup-location.js	30 kB
build/woo-directives-runtime.js	2.73 kB
build/woo-directives-vendors.js	7.91 kB

_{compressed-size-action}

[imanish003]

Hi @Aljullu, I have tested the changes, and it's working as expected. 🚀

I did come across one query during my review, but it's not a blocker and doesn't affect the overall functionality. Therefore pre-approving the PR. 🙌🏻