Add media controls to the Featured Product block

[sunyatasattva]

This PR adds image editing controls to the Featured Product block. In particular, user can now:

• Rotate the image
• Crop the image
• Change the aspect ratio of the image
• Zoom the image

Each edit gets saved in the database as a new image.

Closes #6235

Screenshots

Testing

Automated Tests

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

User Facing Testing

1. Add the Featured Product block
2. Choose a product with an image or select an image for the block through the toolbar
3. Click on the “Crop” icon on the toolbar
4. Ensure the toolbar controls are now changed and show: Zoom, Aspect ratio, Rotate | Apply, Cancel controls
5. Ensure only the image is now visible instead of the whole block inside the image editor
6. Try executing edits and applying them
7. Ensure the image turns semi-transparent and a loading spinner shows in the image
8. Ensure the block now shows your edited image
9. Click on the “Crop” icon again
10. Click away from the block
11. Ensure the block exits “Edit mode”

⚠️ Warning

The image editor UX might not be immediately intuitive, but it will make sense after a while when you'll familiarize. In the meantime, if you have never used that, you might be taken aback from the following things:

1. Cropping doesn't work like many image editors, in which you can draw a box around the image. Instead, you zoom using the scrollwheel and reposition the image inside the given constraints.
2. Depending on the original size of your image, switching from the block to the editor might startle you, as the editor's size depends on the actual size of the image.
3. If you zoom in the image and apply the edit, remember that you are actually (as per step 1) making the image smaller in reality. For this reason, the result might not be what you were expecting from the editor. However, you can get that effect (as shown, for instance, in the screenshot above) by turning on the “Cover” option in the block toolbar.

• Do not include in the Testing Notes

WooCommerce Visibility

• WooCommerce Core
• Feature plugin
• Experimental

Performance Impact

Changelog

Added media controls allowing the user to edit images within the editor on a Featured Product block

[github-actions]

Size Change: +568 B (0%)

Total Size: 871 kB

Filename	Size	Change
build/active-filters.js	7.41 kB	-2 B (0%)
build/all-products.js	33.4 kB	-15 B (0%)
build/attribute-filter.js	13.7 kB	-1 B (0%)
build/cart.js	44.3 kB	-2 B (0%)
build/checkout.js	45.6 kB	+5 B (0%)
build/featured-category.js	12.7 kB	+227 B (+2%)
build/featured-product.js	11.2 kB	+223 B (+2%)
build/legacy-template.js	2.19 kB	+1 B (0%)
build/mini-cart-contents.js	22.7 kB	+1 B (0%)
build/mini-cart.js	6.1 kB	+1 B (0%)
build/price-filter.js	8.7 kB	-1 B (0%)
build/product-add-to-cart.js	6.64 kB	-1 B (0%)
build/product-best-sellers.js	7.38 kB	-1 B (0%)
build/product-categories.js	2.78 kB	-1 B (0%)
build/product-image.js	1.07 kB	-1 B (0%)
build/product-search.js	2.18 kB	-1 B (0%)
build/product-tag.js	7.81 kB	-1 B (0%)
build/product-title.js	909 B	-1 B (0%)
build/single-product.js	10 kB	-11 B (0%)
build/stock-filter.js	6.93 kB	-1 B (0%)
build/wc-blocks-style-rtl.css	22.1 kB	+36 B (0%)
build/wc-blocks-style.css	22 kB	+40 B (0%)
build/wc-blocks-vendors.js	71.4 kB	+77 B (0%)
build/wc-blocks.js	2.62 kB	-3 B (0%)

ℹ️ View Unchanged

Filename	Size
build/active-filters-frontend.js	6.59 kB
build/all-products-frontend.js	18.1 kB
build/all-reviews.js	7.78 kB
build/attribute-filter-frontend.js	17.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/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/handpicked-products.js	7.11 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-frontend.js	1.72 kB
build/price-filter-frontend.js	12.5 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-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-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-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-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-title-frontend.js	1.3 kB
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 kB
build/single-product-frontend.js	21.5 kB
build/stock-filter-frontend.js	6.87 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-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}

[dinhtungdu]

I agree the UX of the image editor is not intuitive, but the code is LGTM!