Price Filter block: enable global style

[gigitux]

This PR adds support for global style for the Price Filter block.

Now, the user can edit the style for:

• text-color
• border (color and radius) on the input fields

Note

Unfortunately at the current stage, global style API doesn't support the customization of the inner element instead of block wrapper, so this PR contains a hacky CSS for accomplishing the goal

WordPress/gutenberg#33255
WordPress/gutenberg#32417

#4965

Screenshots

without global style

with global style

Testing

Manual Testing

Check out this branch:

1. On WordPress 5.9, install and enable the Gutenberg plugin.
2. Install and enable the Twenty Twenty-Two theme.
3. Add the Price Filter block to a post.
4. On the right sidebar, personalize the styles of the block.
5. Go on the page and check if there are changes.
6. Reset to default using the Reset button from the different sections.
7. Go to Dashboard and select Appearance > Editor (beta). On top of the screen, select Home > Browser all templates > Single Post. When the page is loaded, add the block to the page.
8. On the Editor page click on the Styles icon on the right-top corner.
9. Verify that the Price Filter block is shown under the Blocks section. Personalize again the block.
10. Save your changes.
11. Go on the page created earlier and check if all styles are applied correctly.
12. Edit your previous post/page again.
13. Change again the styles.
14. Save your changes.
15. Check if these styles have priority over the styles from the Site Editor.

Changelog

Add support for the global style for the Price Filter block.

[gigitux]

Do you think it makes sense to add some comments about this hacky approach in the CSS? (maybe where I use !important)

[github-actions]

Size Change: +293 B (0%)

Total Size: 816 kB

Filename	Size	Change
build/active-filters-frontend.js	6.21 kB	-2 B (0%)
build/active-filters.js	7.1 kB	+2 B (0%)
build/all-products-frontend.js	18.6 kB	-10 B (0%)
build/all-products.js	35 kB	-8 B (0%)
build/atomic-block-components/add-to-cart-frontend.js	7.05 kB	+2 B (0%)
build/atomic-block-components/button-frontend.js	1.48 kB	-2 B (0%)
build/atomic-block-components/image.js	1.05 kB	-1 B (0%)
build/atomic-block-components/price-frontend.js	1.74 kB	+2 B (0%)
build/atomic-block-components/stock-indicator-frontend.js	585 B	+1 B (0%)
build/atomic-block-components/summary--atomic-block-components/title.js	452 B	+1 B (0%)
build/atomic-block-components/summary-frontend.js	1.22 kB	+1 B (0%)
build/atomic-block-components/title-frontend.js	1.2 kB	-1 B (0%)
build/atomic-block-components/title.js	931 B	+1 B (0%)
build/attribute-filter-frontend.js	16.3 kB	+2 B (0%)
build/attribute-filter.js	12.6 kB	+1 B (0%)
build/cart-blocks/accepted-payment-methods-frontend.js	1.14 kB	-3 B (0%)
build/cart-blocks/checkout-button-frontend.js	1.14 kB	-1 B (0%)
build/cart-blocks/express-payment-frontend.js	4.86 kB	+1 B (0%)
build/cart-blocks/filled-cart-frontend.js	767 B	+4 B (+1%)
build/cart-blocks/items-frontend.js	299 B	+1 B (0%)
build/cart-blocks/line-items-frontend.js	5.48 kB	-3 B (0%)
build/cart-blocks/order-summary-frontend.js	8.97 kB	-2 B (0%)
build/cart-frontend.js	45.4 kB	+4 B (0%)
build/cart.js	44.5 kB	-7 B (0%)
build/checkout-blocks/billing-address--checkout-blocks/shipping-address-frontend.js	4.22 kB	+2 B (0%)
build/checkout-blocks/billing-address-frontend.js	888 B	+1 B (0%)
build/checkout-blocks/contact-information-frontend.js	2.94 kB	+1 B (0%)
build/checkout-blocks/express-payment-frontend.js	5.15 kB	+3 B (0%)
build/checkout-blocks/order-summary-frontend.js	11.4 kB	-3 B (0%)
build/checkout-blocks/payment-frontend.js	7.39 kB	+6 B (0%)
build/checkout-blocks/shipping-methods-frontend.js	4.81 kB	-1 B (0%)
build/checkout-frontend.js	47.5 kB	-1 B (0%)
build/legacy-template.js	2.19 kB	+2 B (0%)
build/mini-cart-contents.js	3.59 kB	+1 B (0%)
build/mini-cart.js	6.46 kB	-2 B (0%)
build/price-filter-frontend.js	12.6 kB	+7 B (0%)
build/price-filter.js	8.92 kB	+143 B (+2%)
build/product-category.js	9.11 kB	+2 B (0%)
build/product-on-sale.js	8.8 kB	-2 B (0%)
build/product-search.js	2.47 kB	-1 B (0%)
build/product-tag.js	8.5 kB	+2 B (0%)
build/product-top-rated.js	8.41 kB	-2 B (0%)
build/products-by-attribute.js	9.21 kB	-2 B (0%)
build/reviews-by-category.js	11.9 kB	+1 B (0%)
build/reviews-by-product.js	12.9 kB	+3 B (0%)
build/reviews-frontend.js	7.24 kB	-3 B (0%)
build/single-product-frontend.js	22.1 kB	-8 B (0%)
build/single-product.js	10.5 kB	-2 B (0%)
build/stock-filter-frontend.js	6.81 kB	+5 B (0%)
build/vendors--atomic-block-components/add-to-cart--cart-blocks/order-summary--checkout-blocks/billing-ad--c5eb4dcd-frontend.js	19 kB	-1 B (0%)
build/vendors--cart-blocks/order-summary--checkout-blocks/billing-address--checkout-blocks/order-summary---eb4d2cec-frontend.js	4.74 kB	-3 B (0%)
build/wc-blocks-editor-style-rtl.css	4.58 kB	+20 B (0%)
build/wc-blocks-editor-style.css	4.58 kB	+20 B (0%)
build/wc-blocks-style-rtl.css	21.8 kB	+66 B (0%)
build/wc-blocks-style.css	21.8 kB	+69 B (0%)
build/wc-blocks-vendors.js	65.5 kB	-13 B (0%)

ℹ️ View Unchanged

Filename	Size
build/all-reviews.js	8.35 kB
build/atomic-block-components/add-to-cart--atomic-block-components/button--atomic-block-components/image---a7e2bb9b.js	2.67 kB
build/atomic-block-components/add-to-cart--atomic-block-components/button--atomic-block-components/image---e400b4b2.js	238 B
build/atomic-block-components/add-to-cart--atomic-block-components/button.js	1.48 kB
build/atomic-block-components/add-to-cart.js	6.62 kB
build/atomic-block-components/button.js	850 B
build/atomic-block-components/category-list-frontend.js	458 B
build/atomic-block-components/category-list.js	460 B
build/atomic-block-components/image-frontend.js	1.37 kB
build/atomic-block-components/price.js	1.7 kB
build/atomic-block-components/rating-frontend.js	553 B
build/atomic-block-components/rating.js	555 B
build/atomic-block-components/sale-badge-frontend.js	624 B
build/atomic-block-components/sale-badge.js	622 B
build/atomic-block-components/sku-frontend.js	386 B
build/atomic-block-components/sku.js	386 B
build/atomic-block-components/stock-indicator.js	585 B
build/atomic-block-components/summary.js	926 B
build/atomic-block-components/tag-list-frontend.js	460 B
build/atomic-block-components/tag-list.js	459 B
build/blocks-checkout.js	17.6 kB
build/cart-blocks/empty-cart-frontend.js	345 B
build/cart-blocks/totals-frontend.js	321 B
build/checkout-blocks/actions-frontend.js	1.44 kB
build/checkout-blocks/fields-frontend.js	344 B
build/checkout-blocks/order-note-frontend.js	1.13 kB
build/checkout-blocks/shipping-address-frontend.js	973 B
build/checkout-blocks/terms-frontend.js	1.21 kB
build/checkout-blocks/totals-frontend.js	324 B
build/checkout.js	47.1 kB
build/featured-category.js	8.55 kB
build/featured-product.js	9.9 kB
build/handpicked-products.js	7.33 kB
build/mini-cart-component-frontend.js	14.2 kB
build/mini-cart-frontend.js	1.76 kB
build/price-format.js	1.18 kB
build/product-best-sellers.js	7.54 kB
build/product-categories.js	3.48 kB
build/product-new.js	8.44 kB
build/stock-filter.js	6.83 kB
build/vendors--atomic-block-components/add-to-cart-frontend.js	7.43 kB
build/vendors--atomic-block-components/price--cart-blocks/line-items--cart-blocks/order-summary--checkout--8a3571de-frontend.js	5.71 kB
build/vendors--cart-blocks/line-items--checkout-blocks/order-summary-frontend.js	3.14 kB
build/wc-blocks-data.js	8.84 kB
build/wc-blocks-google-analytics.js	1.56 kB
build/wc-blocks-middleware.js	949 B
build/wc-blocks-registry.js	2.7 kB
build/wc-blocks-shared-context.js	1.52 kB
build/wc-blocks-shared-hocs.js	1.14 kB
build/wc-blocks-vendors-style-rtl.css	1.28 kB
build/wc-blocks-vendors-style.css	1.28 kB
build/wc-blocks.js	2.96 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.61 kB

_{compressed-size-action}

[dinhtungdu]

Do you think it makes sense to add some comments about this hacky approach in the CSS?

Yes! I don't think that CSS is hacky. Having the child components inherit CSS from the parent is normal usage IMO.

[gigitux]

Thanks for the review!

Yes! I don't think that CSS is hacky. Having the child components inherit CSS from the parent is normal usage IMO.
Yeah, I agree with you! My concerns are more about !important usage.

Anyway, I will merge the PR!