Add Fixed/Repeated background to the Featured Category block

[albarin]

This PR adds the Fixed image and Repeated image media controls for the Featured Category block and fixes the gradient overlay.

It also includes a small refactor of the Featured Product block to unify how things are done in the Featured Category as a first step for bigger refactor.

Fixes part of #6236

Testing

How to test the changes in this Pull Request:

1. Create a new page and add a Featured Category block.
2. On the block settings go to Media Settings and toggle Fixed image and Repeated image and save.
3. Check the rendered category on the frontend is correct and matches the one on the edit page.
4. Add a gradient overlay, save, and check the gradient is rendered on the frontend.
5. Edit the block again, repeat the steps above with different combinations on Fixed image, Repeated image and any other configuration.
6. Repeat steps 1-5 for the Featured Product block.

Changelog

Add the Fixed image and Repeated image media controls to the Featured Category block

[github-actions]

Size Change: +24 B (0%)

Total Size: 924 kB

Filename	Size	Change
build/featured-category.js	13.1 kB	+18 B (0%)
build/wc-blocks-style-rtl.css	22.1 kB	+3 B (0%)
build/wc-blocks-style.css	22.1 kB	+3 B (0%)

ℹ️ View Unchanged

Filename	Size
build/active-filters-frontend.js	6.59 kB
build/active-filters.js	7.43 kB
build/all-products-frontend.js	18.2 kB
build/all-products.js	33.3 kB
build/all-reviews.js	7.79 kB
build/attribute-filter-frontend.js	17.7 kB
build/attribute-filter.js	13.8 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.25 kB
build/cart-blocks/cart-items-frontend.js	299 B
build/cart-blocks/cart-line-items-frontend.js	5.51 kB
build/cart-blocks/cart-order-summary-frontend.js	1.1 kB
build/cart-blocks/cart-totals-frontend.js	321 B
build/cart-blocks/empty-cart-frontend.js	345 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	455 B
build/cart-blocks/order-summary-shipping-frontend.js	15.3 kB
build/cart-blocks/order-summary-subtotal-frontend.js	273 B
build/cart-blocks/order-summary-taxes-frontend.js	432 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-frontend.js	10.7 kB
build/checkout-blocks/contact-information-frontend.js	2.84 kB
build/checkout-blocks/express-payment-frontend.js	5.54 kB
build/checkout-blocks/fields-frontend.js	344 B
build/checkout-blocks/order-note-frontend.js	1.07 kB
build/checkout-blocks/order-summary-cart-items-frontend.js	3.66 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	15.4 kB
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.59 kB
build/checkout-blocks/shipping-address-frontend.js	10.8 kB
build/checkout-blocks/shipping-methods-frontend.js	4.46 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	13.4 kB
build/handpicked-products.js	7.39 kB
build/legacy-template.js	2.2 kB
build/mini-cart-component-frontend.js	16.5 kB
build/mini-cart-contents-block/empty-cart-frontend.js	365 B
build/mini-cart-contents-block/filled-cart-frontend.js	229 B
build/mini-cart-contents-block/footer-frontend.js	10.3 kB
build/mini-cart-contents-block/items-frontend.js	226 B
build/mini-cart-contents-block/products-table-frontend.js	9.69 kB
build/mini-cart-contents-block/shopping-button-frontend.js	288 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.74 kB
build/price-format.js	1.19 kB
build/product-add-to-cart--product-button--product-image--product-title.js	2.71 kB
build/product-add-to-cart-frontend.js	12.4 kB
build/product-add-to-cart.js	6.89 kB
build/product-best-sellers.js	7.47 kB
build/product-button-frontend.js	1.84 kB
build/product-button.js	1.77 kB
build/product-categories.js	2.78 kB
build/product-category-list-frontend.js	924 B
build/product-category-list.js	945 B
build/product-category.js	8.59 kB
build/product-image-frontend.js	1.84 kB
build/product-image.js	1.8 kB
build/product-new.js	7.76 kB
build/product-on-sale.js	8.08 kB
build/product-price-frontend.js	1.94 kB
build/product-price.js	1.93 kB
build/product-rating-frontend.js	1.15 kB
build/product-rating.js	1.17 kB
build/product-sale-badge-frontend.js	1.09 kB
build/product-sale-badge.js	1.11 kB
build/product-search.js	2.18 kB
build/product-sku-frontend.js	379 B
build/product-sku.js	382 B
build/product-stock-indicator-frontend.js	1.03 kB
build/product-stock-indicator.js	1.06 kB
build/product-summary-frontend.js	1.33 kB
build/product-summary.js	1.35 kB
build/product-tag-list-frontend.js	918 B
build/product-tag-list.js	940 B
build/product-tag.js	8.12 kB
build/product-title-frontend.js	1.29 kB
build/product-title.js	1.25 kB
build/product-top-rated.js	8 kB
build/products-by-attribute.js	8.69 kB
build/reviews-by-category.js	11.3 kB
build/reviews-by-product.js	12.3 kB
build/reviews-frontend.js	7.02 kB
build/single-product-frontend.js	21.5 kB
build/single-product.js	9.93 kB
build/stock-filter-frontend.js	6.87 kB
build/stock-filter.js	6.95 kB
build/vendor/dinero.js-frontend.js	3.14 kB
build/vendor/emotion-element-cbed451f.browser.esm.js-frontend.js	717 B
build/vendor/react-number-format.es.js-frontend.js	5.26 kB
build/vendor/stylis.mjs-frontend.js	2.89 kB
build/vendor/tinycolor.js-frontend.js	5.12 kB
build/wc-blocks-data.js	9.87 kB
build/wc-blocks-editor-style-rtl.css	5.04 kB
build/wc-blocks-editor-style.css	5.04 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-vendors-style-rtl.css	1.28 kB
build/wc-blocks-vendors-style.css	1.28 kB
build/wc-blocks-vendors.js	71.5 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.61 kB
build/wp/wp-components.js-frontend.js	22.3 kB

_{compressed-size-action}

[sunyatasattva]

Looks good to me and it works fine as far as I can see! :)

[github-actions]

Script Dependencies Report

The compare-assets action has detected some changed script dependencies between this branch and trunk. Please review and confirm the following are correct before merging.

Script Handle	Added	Removed
wc-blocks.js	wp-blocks, wp-compose, wp-element, wp-hooks, wp-i18n, wp-polyfill, wp-primitives		⚠️
handpicked-products.js	lodash, react, wc-settings, wp-api-fetch, wp-block-editor, wp-blocks, wp-components, wp-compose, wp-element, wp-escape-html, wp-html-entities, wp-i18n, wp-polyfill, wp-primitives, wp-server-side-render, wp-url		⚠️
product-best-sellers.js	lodash, wc-settings, wp-api-fetch, wp-block-editor, wp-blocks, wp-components, wp-compose, wp-element, wp-escape-html, wp-html-entities, wp-i18n, wp-polyfill, wp-primitives, wp-server-side-render, wp-url		⚠️
product-category.js	lodash, wc-settings, wp-api-fetch, wp-block-editor, wp-blocks, wp-components, wp-compose, wp-element, wp-escape-html, wp-html-entities, wp-i18n, wp-polyfill, wp-primitives, wp-server-side-render, wp-url		⚠️
product-categories.js	wc-settings, wp-block-editor, wp-blocks, wp-components, wp-element, wp-i18n, wp-polyfill, wp-primitives, wp-server-side-render		⚠️
product-new.js	lodash, wc-settings, wp-api-fetch, wp-block-editor, wp-blocks, wp-components, wp-compose, wp-element, wp-escape-html, wp-html-entities, wp-i18n, wp-polyfill, wp-primitives, wp-server-side-render, wp-url		⚠️
product-on-sale.js	lodash, wc-settings, wp-api-fetch, wp-block-editor, wp-blocks, wp-components, wp-compose, wp-element, wp-escape-html, wp-html-entities, wp-i18n, wp-polyfill, wp-primitives, wp-server-side-render, wp-url		⚠️
product-top-rated.js	lodash, wc-settings, wp-api-fetch, wp-block-editor, wp-blocks, wp-components, wp-compose, wp-element, wp-escape-html, wp-html-entities, wp-i18n, wp-polyfill, wp-primitives, wp-server-side-render, wp-url		⚠️
products-by-attribute.js	lodash, wc-settings, wp-api-fetch, wp-block-editor, wp-blocks, wp-components, wp-compose, wp-element, wp-escape-html, wp-html-entities, wp-i18n, wp-polyfill, wp-primitives, wp-server-side-render, wp-url		⚠️
featured-product.js	lodash, react, wc-settings, wp-api-fetch, wp-block-editor, wp-blocks, wp-components, wp-compose, wp-data, wp-element, wp-escape-html, wp-html-entities, wp-i18n, wp-is-shallow-equal, wp-polyfill, wp-primitives, wp-url		⚠️
all-reviews.js	lodash, react, wc-settings, wp-api-fetch, wp-block-editor, wp-blocks, wp-components, wp-compose, wp-element, wp-escape-html, wp-html-entities, wp-i18n, wp-is-shallow-equal, wp-polyfill, wp-primitives		⚠️
reviews-by-product.js	lodash, react, wc-settings, wp-api-fetch, wp-block-editor, wp-blocks, wp-components, wp-compose, wp-element, wp-escape-html, wp-html-entities, wp-i18n, wp-is-shallow-equal, wp-polyfill, wp-primitives, wp-url		⚠️
reviews-by-category.js	lodash, react, wc-settings, wp-api-fetch, wp-block-editor, wp-blocks, wp-components, wp-compose, wp-element, wp-escape-html, wp-html-entities, wp-i18n, wp-is-shallow-equal, wp-polyfill, wp-primitives, wp-url		⚠️
product-search.js	wc-settings, wp-block-editor, wp-blocks, wp-components, wp-compose, wp-element, wp-i18n, wp-polyfill, wp-primitives		⚠️
product-tag.js	lodash, wc-settings, wp-api-fetch, wp-block-editor, wp-blocks, wp-components, wp-compose, wp-element, wp-html-entities, wp-i18n, wp-polyfill, wp-primitives, wp-server-side-render, wp-url		⚠️
featured-category.js	lodash, react, wc-settings, wp-api-fetch, wp-block-editor, wp-blocks, wp-components, wp-compose, wp-data, wp-element, wp-escape-html, wp-html-entities, wp-i18n, wp-is-shallow-equal, wp-polyfill, wp-primitives, wp-url		⚠️
all-products.js	lodash, react, wc-blocks-data-store, wc-blocks-registry, wc-blocks-shared-context, wc-blocks-shared-hocs, wc-price-format, wc-settings, wp-a11y, wp-api-fetch, wp-autop, wp-block-editor, wp-blocks, wp-components, wp-compose, wp-data, wp-deprecated, wp-dom, wp-element, wp-escape-html, wp-hooks, wp-html-entities, wp-i18n, wp-is-shallow-equal, wp-polyfill, wp-primitives, wp-url, wp-warning, wp-wordcount		⚠️
price-filter.js	lodash, react, wc-blocks-data-store, wc-price-format, wc-settings, wp-block-editor, wp-blocks, wp-components, wp-compose, wp-data, wp-element, wp-i18n, wp-is-shallow-equal, wp-polyfill, wp-primitives, wp-url		⚠️
attribute-filter.js	lodash, react, wc-blocks-data-store, wc-settings, wp-a11y, wp-block-editor, wp-blocks, wp-components, wp-compose, wp-data, wp-element, wp-html-entities, wp-i18n, wp-is-shallow-equal, wp-polyfill, wp-primitives, wp-url		⚠️
stock-filter.js	lodash, react, wc-blocks-data-store, wc-settings, wp-a11y, wp-block-editor, wp-blocks, wp-components, wp-compose, wp-data, wp-element, wp-html-entities, wp-i18n, wp-is-shallow-equal, wp-polyfill, wp-primitives, wp-url		⚠️
active-filters.js	lodash, react, wc-blocks-data-store, wc-price-format, wc-settings, wp-block-editor, wp-blocks, wp-components, wp-compose, wp-data, wp-element, wp-html-entities, wp-i18n, wp-is-shallow-equal, wp-polyfill, wp-primitives, wp-url		⚠️
cart.js	lodash, react, wc-blocks-checkout, wc-blocks-data-store, wc-blocks-registry, wc-price-format, wc-settings, wp-a11y, wp-api-fetch, wp-autop, wp-block-editor, wp-blocks, wp-components, wp-compose, wp-data, wp-deprecated, wp-dom, wp-element, wp-hooks, wp-html-entities, wp-i18n, wp-is-shallow-equal, wp-keycodes, wp-plugins, wp-polyfill, wp-primitives, wp-url, wp-warning, wp-wordcount		⚠️
checkout.js	lodash, react, wc-blocks-checkout, wc-blocks-data-store, wc-blocks-registry, wc-price-format, wc-settings, wp-a11y, wp-api-fetch, wp-autop, wp-block-editor, wp-blocks, wp-components, wp-compose, wp-data, wp-deprecated, wp-dom, wp-element, wp-hooks, wp-html-entities, wp-i18n, wp-is-shallow-equal, wp-keycodes, wp-plugins, wp-polyfill, wp-primitives, wp-url, wp-warning, wp-wordcount		⚠️
mini-cart.js	react, wc-price-format, wc-settings, wp-block-editor, wp-blocks, wp-components, wp-dom, wp-element, wp-i18n, wp-polyfill, wp-primitives		⚠️
mini-cart-contents.js	lodash, react, wc-blocks-checkout, wc-blocks-data-store, wc-blocks-registry, wc-price-format, wc-settings, wp-a11y, wp-autop, wp-block-editor, wp-blocks, wp-components, wp-compose, wp-data, wp-deprecated, wp-dom, wp-element, wp-hooks, wp-html-entities, wp-i18n, wp-is-shallow-equal, wp-keycodes, wp-polyfill, wp-primitives, wp-url, wp-warning, wp-wordcount		⚠️
single-product.js	lodash, react, wc-blocks-data-store, wc-blocks-registry, wc-blocks-shared-context, wc-blocks-shared-hocs, wc-price-format, wc-settings, wp-api-fetch, wp-autop, wp-block-editor, wp-blocks, wp-components, wp-compose, wp-data, wp-deprecated, wp-dom, wp-element, wp-escape-html, wp-hooks, wp-html-entities, wp-i18n, wp-is-shallow-equal, wp-polyfill, wp-primitives, wp-url, wp-warning, wp-wordcount		⚠️
legacy-template.js	wc-settings, wp-block-editor, wp-blocks, wp-components, wp-element, wp-i18n, wp-polyfill, wp-primitives		⚠️

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