Featured Category: add background color option

[frontdevde]

This PR adds a background color option to the Featured Category block.

Fixes #6339

Screenshots

Before	After

Testing

User Facing Testing

Prerequisites:

• Use the latest WordPress version (we want to use the site editor / Global Styles in testing).
• Install & use a block theme e.g. Twenty Twenty-Two.
• Deactivate the Gutenberg plugin for testing as we're currently observing this issue.

1. Create a new post/page.
2. In the editor, add two Featured Category blocks.
3. For each block select the same category, it should have a product picture.
4. Select each block and use the Replace button in the block toolbar to add a product image smaller than the Featured Category block (for an example see screenshots above).
5. Now select the first Featured Category block. In the editor sidebar's Color section of the block select a Background color. The background color should be visible in the parts not covered by the product image.
6. Save your post/page.
7. In the admin dashboard navigate to Appearance > Editor (/wp-admin/site-editor.php).
8. Open the Styles sidebar by clicking the round Styles icon in the top right of the editor.
9. In the Styles sidebar navigate to Blocks > Featured Category > Colors > Background.
10. Change the background color and save your changes.
11. Navigate back to the post/page you previously created.
12. The first block should still show the background color you selected in step 5. The second block should show the Global Styles color you selected in step 10.
13. Click Preview > Preview in new tab and confirm the colors appear as expected on the Frontend of your site as well.

• Do not include in the Testing Notes

WooCommerce Visibility

• WooCommerce Core
• Feature plugin
• Experimental

Performance Impact

No considerable performance impact.

Changelog

Featured Category: add background color option

[github-actions]

Size Change: -2 B (0%)

Total Size: 872 kB

Filename	Size	Change
build/featured-category.js	12.7 kB	-2 B (0%)

ℹ️ View Unchanged

Filename	Size
build/active-filters-frontend.js	6.59 kB
build/active-filters.js	7.41 kB
build/all-products-frontend.js	18.1 kB
build/all-products.js	33.4 kB
build/all-reviews.js	7.8 kB
build/attribute-filter-frontend.js	17.7 kB
build/attribute-filter.js	13.7 kB
build/blocks-checkout.js	17.4 kB
build/cart-blocks/cart-accepted-payment-methods-frontend.js	1.16 kB
build/cart-blocks/cart-express-payment-frontend.js	5.24 kB
build/cart-blocks/cart-items-frontend.js	299 B
build/cart-blocks/cart-line-items--mini-cart-contents-block/products-table-frontend.js	5.27 kB
build/cart-blocks/cart-line-items-frontend.js	433 B
build/cart-blocks/cart-order-summary-frontend.js	1.1 kB
build/cart-blocks/cart-totals-frontend.js	322 B
build/cart-blocks/empty-cart-frontend.js	346 B
build/cart-blocks/filled-cart-frontend.js	783 B
build/cart-blocks/order-summary-coupon-form-frontend.js	2.81 kB
build/cart-blocks/order-summary-discount-frontend.js	2.31 kB
build/cart-blocks/order-summary-fee-frontend.js	273 B
build/cart-blocks/order-summary-heading-frontend.js	454 B
build/cart-blocks/order-summary-shipping--checkout-blocks/order-summary-shipping-frontend.js	6.34 kB
build/cart-blocks/order-summary-shipping-frontend.js	428 B
build/cart-blocks/order-summary-subtotal-frontend.js	273 B
build/cart-blocks/order-summary-taxes-frontend.js	433 B
build/cart-blocks/proceed-to-checkout-frontend.js	1.15 kB
build/cart-frontend.js	45.5 kB
build/cart.js	44.3 kB
build/checkout-blocks/actions-frontend.js	1.41 kB
build/checkout-blocks/billing-address--checkout-blocks/shipping-address-frontend.js	4.12 kB
build/checkout-blocks/billing-address-frontend.js	889 B
build/checkout-blocks/contact-information-frontend.js	2.83 kB
build/checkout-blocks/express-payment-frontend.js	5.53 kB
build/checkout-blocks/fields-frontend.js	345 B
build/checkout-blocks/order-note-frontend.js	1.07 kB
build/checkout-blocks/order-summary-cart-items-frontend.js	3.67 kB
build/checkout-blocks/order-summary-coupon-form-frontend.js	2.96 kB
build/checkout-blocks/order-summary-discount-frontend.js	2.43 kB
build/checkout-blocks/order-summary-fee-frontend.js	275 B
build/checkout-blocks/order-summary-frontend.js	1.11 kB
build/checkout-blocks/order-summary-shipping-frontend.js	603 B
build/checkout-blocks/order-summary-subtotal-frontend.js	273 B
build/checkout-blocks/order-summary-taxes-frontend.js	432 B
build/checkout-blocks/payment-frontend.js	7.84 kB
build/checkout-blocks/shipping-address-frontend.js	995 B
build/checkout-blocks/shipping-methods-frontend.js	4.71 kB
build/checkout-blocks/terms-frontend.js	1.22 kB
build/checkout-blocks/totals-frontend.js	326 B
build/checkout-frontend.js	47.7 kB
build/checkout.js	45.6 kB
build/featured-product.js	11.2 kB
build/handpicked-products.js	7.11 kB
build/legacy-template.js	2.2 kB
build/mini-cart-component-frontend.js	16.6 kB
build/mini-cart-contents-block/empty-cart-frontend.js	328 B
build/mini-cart-contents-block/filled-cart-frontend.js	230 B
build/mini-cart-contents-block/footer--mini-cart-contents-block/products-table-frontend.js	4.69 kB
build/mini-cart-contents-block/footer-frontend.js	5.63 kB
build/mini-cart-contents-block/items-frontend.js	225 B
build/mini-cart-contents-block/products-table-frontend.js	289 B
build/mini-cart-contents-block/shopping-button-frontend.js	287 B
build/mini-cart-contents-block/title-frontend.js	366 B
build/mini-cart-contents.js	22.7 kB
build/mini-cart-frontend.js	1.72 kB
build/mini-cart.js	6.1 kB
build/price-filter-frontend.js	12.5 kB
build/price-filter.js	8.73 kB
build/price-format.js	1.19 kB
build/product-add-to-cart--product-button--product-category-list--product-image--product-price--product-r--a0326d00.js	223 B
build/product-add-to-cart--product-button--product-image--product-title.js	2.65 kB
build/product-add-to-cart--product-button.js	565 B
build/product-add-to-cart-frontend.js	6.96 kB
build/product-add-to-cart.js	6.64 kB
build/product-best-sellers.js	7.38 kB
build/product-button--product-category-list--product-image--product-price--product-rating--product-sale-b--e17c7c01.js	500 B
build/product-button-frontend.js	1.84 kB
build/product-button.js	1.08 kB
build/product-categories.js	2.78 kB
build/product-category-list-frontend.js	924 B
build/product-category-list.js	500 B
build/product-category.js	8.49 kB
build/product-image-frontend.js	1.84 kB
build/product-image.js	1.07 kB
build/product-new.js	7.68 kB
build/product-on-sale.js	8 kB
build/product-price-frontend.js	1.94 kB
build/product-price.js	1.5 kB
build/product-rating-frontend.js	1.15 kB
build/product-rating.js	736 B
build/product-sale-badge-frontend.js	1.09 kB
build/product-sale-badge.js	678 B
build/product-search.js	2.18 kB
build/product-sku-frontend.js	380 B
build/product-sku.js	382 B
build/product-stock-indicator-frontend.js	1.03 kB
build/product-stock-indicator.js	621 B
build/product-summary-frontend.js	1.33 kB
build/product-summary.js	918 B
build/product-tag-list-frontend.js	918 B
build/product-tag-list.js	495 B
build/product-tag.js	7.81 kB
build/product-title-frontend.js	1.3 kB
build/product-title.js	909 B
build/product-top-rated.js	7.91 kB
build/products-by-attribute.js	8.38 kB
build/reviews-by-category.js	11.2 kB
build/reviews-by-product.js	12.2 kB
build/reviews-frontend.js	7.02 kB
build/single-product-frontend.js	21.5 kB
build/single-product.js	10 kB
build/stock-filter-frontend.js	6.87 kB
build/stock-filter.js	6.93 kB
build/vendors--cart-blocks/cart-line-items--cart-blocks/cart-order-summary--cart-blocks/order-summary-shi--c02aad66-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--5b8feb0b-frontend.js	4.75 kB
build/vendors--cart-blocks/order-summary-shipping--checkout-blocks/billing-address--checkout-blocks/order--decc3dc6-frontend.js	20.5 kB
build/vendors--mini-cart-contents-block/footer-frontend.js	6.86 kB
build/vendors--product-add-to-cart-frontend.js	7.53 kB
build/wc-blocks-data.js	9.87 kB
build/wc-blocks-editor-style-rtl.css	4.95 kB
build/wc-blocks-editor-style.css	4.94 kB
build/wc-blocks-google-analytics.js	1.56 kB
build/wc-blocks-middleware.js	930 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-style-rtl.css	22.1 kB
build/wc-blocks-style.css	22.1 kB
build/wc-blocks-vendors-style-rtl.css	1.28 kB
build/wc-blocks-vendors-style.css	1.28 kB
build/wc-blocks-vendors.js	71.4 kB
build/wc-blocks.js	2.62 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}

[albarin]

🚀