Featured Product: add background color option

[frontdevde]

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

Fixes #6340

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 Product blocks.
3. For each block select the same product, it should have a product picture.
4. Select each block and use the Crop tool in the block toolbar to crop the product image smaller than the Featured product block e.g. by setting the aspect ratio to 2:3.
5. Now select the first Featured Product 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 Product > 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 Product: add background color option

[github-actions]

Size Change: 0 B

Total Size: 871 kB

ℹ️ 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-category.js	12.7 kB
build/featured-product.js	11.2 kB
build/handpicked-products.js	7.11 kB
build/legacy-template.js	2.19 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	7.99 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.92 kB
build/wc-blocks-editor-style.css	4.92 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 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}

[sunyatasattva]

Works as intended!