Add a Remove Image option to the Featured Category block

[tjcafferkey]

Adds a "Remove" image option to the Featured Category block to remove a previously selected image.

Fixes #5309

Accessibility

• I've tested using only a keyboard (no mouse)
• I've tested using a screen reader
• All animations respect prefers-reduced-motion
• All text has at least a 4.5 color contrast with its background

Other Checks

• I've updated this doc for any feature flags or experimental interfaces implemented in this pull request.
• I tagged two reviewers because this PR makes queries to the database or I think it might have some security impact.

Screenshots

featured-category.mp4

Testing

Automated Tests

• Changes in this PR are covered by Automated Tests.
  • Unit tests
  • E2E tests

Manual Testing

How to test the changes in this Pull Request:

1. Go to post or page
2. Add Featured Category block and add an image to it
3. Check the "Remove" button that appears in the toolbar
4. Click the "Remove" button and check it removes the image, save block and check frontend.

User Facing Testing

These are steps for user testing (where "user" is someone interacting with this change that is not editing any code).

• Same as above, or
• See steps below.

Performance Impact

Changelog

Add a remove image button to the WooCommerce Feature Category block

[github-actions]

Size Change: +116 B (0%)

Total Size: 812 kB

Filename	Size	Change
build/all-products.js	33.8 kB	+33 B (0%)
build/all-reviews.js	8.08 kB	+1 B (0%)
build/atomic-block-components/add-to-cart--atomic-block-components/button--atomic-block-components/image---a7e2bb9b.js	2.66 kB	-6 B (0%)
build/atomic-block-components/add-to-cart--atomic-block-components/button.js	1.48 kB	-1 B (0%)
build/atomic-block-components/add-to-cart.js	6.46 kB	-1 B (0%)
build/atomic-block-components/button.js	853 B	+1 B (0%)
build/atomic-block-components/image.js	1.05 kB	-2 B (0%)
build/atomic-block-components/sale-badge.js	624 B	+2 B (0%)
build/atomic-block-components/stock-indicator.js	623 B	-2 B (0%)
build/atomic-block-components/title.js	936 B	+2 B (0%)
build/cart.js	43.7 kB	+2 B (0%)
build/checkout.js	45.2 kB	+4 B (0%)
build/featured-category.js	8.61 kB	+102 B (+1%)
build/featured-product.js	9.62 kB	-1 B (0%)
build/legacy-template.js	2.18 kB	-3 B (0%)
build/mini-cart.js	6.39 kB	+1 B (0%)
build/price-filter.js	8.48 kB	-3 B (0%)
build/product-best-sellers.js	7.37 kB	+2 B (0%)
build/product-category.js	8.49 kB	-1 B (0%)
build/product-on-sale.js	7.98 kB	+1 B (0%)
build/product-tag.js	7.8 kB	-1 B (0%)
build/product-top-rated.js	7.9 kB	+1 B (0%)
build/products-by-attribute.js	8.39 kB	+4 B (0%)
build/reviews-by-category.js	11.5 kB	-2 B (0%)
build/reviews-by-product.js	12.6 kB	-4 B (0%)
build/single-product.js	10 kB	+2 B (0%)
build/stock-filter.js	6.54 kB	-5 B (0%)
build/wc-blocks-vendors.js	69.7 kB	-9 B (0%)
build/wc-blocks.js	2.62 kB	-1 B (0%)

ℹ️ View Unchanged

Filename	Size
build/active-filters-frontend.js	6.22 kB
build/active-filters.js	6.9 kB
build/all-products-frontend.js	18.6 kB
build/atomic-block-components/add-to-cart--atomic-block-components/button--atomic-block-components/image---8f355022.js	238 B
build/atomic-block-components/add-to-cart-frontend.js	6.9 kB
build/atomic-block-components/button-frontend.js	1.48 kB
build/atomic-block-components/category-list-frontend.js	458 B
build/atomic-block-components/category-list.js	459 B
build/atomic-block-components/image-frontend.js	1.37 kB
build/atomic-block-components/price-frontend.js	1.74 kB
build/atomic-block-components/price.js	1.69 kB
build/atomic-block-components/rating-frontend.js	698 B
build/atomic-block-components/rating.js	700 B
build/atomic-block-components/sale-badge-frontend.js	624 B
build/atomic-block-components/sku-frontend.js	386 B
build/atomic-block-components/sku.js	385 B
build/atomic-block-components/stock-indicator--atomic-block-components/summary--atomic-block-components/title.js	465 B
build/atomic-block-components/stock-indicator-frontend.js	942 B
build/atomic-block-components/summary-frontend.js	1.24 kB
build/atomic-block-components/summary.js	926 B
build/atomic-block-components/tag-list-frontend.js	458 B
build/atomic-block-components/tag-list.js	459 B
build/atomic-block-components/title-frontend.js	1.21 kB
build/attribute-filter-frontend.js	16.8 kB
build/attribute-filter.js	13 kB
build/blocks-checkout.js	17.6 kB
build/cart-blocks/accepted-payment-methods-frontend.js	1.14 kB
build/cart-blocks/checkout-button-frontend.js	1.14 kB
build/cart-blocks/empty-cart-frontend.js	345 B
build/cart-blocks/express-payment-frontend.js	5.18 kB
build/cart-blocks/filled-cart-frontend.js	767 B
build/cart-blocks/items-frontend.js	298 B
build/cart-blocks/line-items-frontend.js	5.5 kB
build/cart-blocks/order-summary-frontend.js	8.95 kB
build/cart-blocks/totals-frontend.js	321 B
build/cart-frontend.js	45.5 kB
build/checkout-blocks/actions-frontend.js	1.39 kB
build/checkout-blocks/billing-address--checkout-blocks/shipping-address-frontend.js	4.23 kB
build/checkout-blocks/billing-address-frontend.js	887 B
build/checkout-blocks/contact-information-frontend.js	2.94 kB
build/checkout-blocks/express-payment-frontend.js	5.47 kB
build/checkout-blocks/fields-frontend.js	343 B
build/checkout-blocks/order-note-frontend.js	1.13 kB
build/checkout-blocks/order-summary-frontend.js	11.4 kB
build/checkout-blocks/payment-frontend.js	7.72 kB
build/checkout-blocks/shipping-address-frontend.js	974 B
build/checkout-blocks/shipping-methods-frontend.js	4.93 kB
build/checkout-blocks/terms-frontend.js	1.22 kB
build/checkout-blocks/totals-frontend.js	323 B
build/checkout-frontend.js	47.5 kB
build/handpicked-products.js	7.09 kB
build/mini-cart-component-frontend.js	14.2 kB
build/mini-cart-contents.js	3.82 kB
build/mini-cart-frontend.js	1.76 kB
build/price-filter-frontend.js	12.6 kB
build/price-format.js	1.18 kB
build/product-categories.js	3.17 kB
build/product-new.js	7.66 kB
build/product-search.js	2.18 kB
build/reviews-frontend.js	7.37 kB
build/single-product-frontend.js	22.1 kB
build/stock-filter-frontend.js	6.83 kB
build/vendors--atomic-block-components/add-to-cart--cart-blocks/order-summary--checkout-blocks/billing-ad--c5eb4dcd-frontend.js	19 kB
build/vendors--atomic-block-components/add-to-cart-frontend.js	7.51 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/vendors--cart-blocks/order-summary--checkout-blocks/billing-address--checkout-blocks/order-summary---eb4d2cec-frontend.js	4.74 kB
build/wc-blocks-data.js	8.84 kB
build/wc-blocks-editor-style-rtl.css	4.79 kB
build/wc-blocks-editor-style.css	4.79 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-style-rtl.css	21.9 kB
build/wc-blocks-style.css	21.9 kB
build/wc-blocks-vendors-style-rtl.css	1.28 kB
build/wc-blocks-vendors-style.css	1.28 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}

[Aljullu]

Works great and code looks good.

Heads-up that I created a similar issue for the Featured Product block. Now that you fixed it for the Featured Category block, it's an opportunity for a good first issue: #5725.