Skip to content
This repository has been archived by the owner on Feb 23, 2024. It is now read-only.

Add media controls to the Featured Category block #6360

Merged

Conversation

sunyatasattva
Copy link
Contributor

This PR adds image editing controls to the Featured Categort 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 #6236

Screenshots

Screen Shot 2022-05-03 at 23 53 39

Testing

Automated Tests

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

User Facing Testing

  1. Add the Featured Category block
  2. Choose either a category with an associated 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 Category block

@rubikuserbot rubikuserbot requested review from a team and tjcafferkey and removed request for a team May 3, 2022 21:55
@github-actions
Copy link
Contributor

github-actions bot commented May 3, 2022

Size Change: +131 B (0%)

Total Size: 872 kB

Filename Size Change
build/featured-category.js 12.8 kB +107 B (+1%)
build/featured-product.js 11.2 kB +3 B (0%)
build/wc-blocks-style-rtl.css 22.1 kB +11 B (0%)
build/wc-blocks-style.css 22.1 kB +10 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/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-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

@tjcafferkey
Copy link
Contributor

@sunyatasattva I really like what you've done here, and the block works as expected based on the testing steps you've provided along with the warning. I am just wondering do we use similar controls on other blocks? The reason I ask is based on the conversation about the "Replace" button, and about this being a pattern. So I am wondering if this is also inline with how its done with other blocks in Gutenberg. If not, do you think it's worth Vivien having a look over this too?

Copy link
Contributor

@tjcafferkey tjcafferkey left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Preemptively approving this but left a comment here #6360 (comment)

@github-actions github-actions bot added this to the 7.6.0 milestone May 4, 2022
@sunyatasattva
Copy link
Contributor Author

I really like what you've done here, and the block works as expected based on the testing steps you've provided along with the warning. I am just wondering do we use similar controls on other blocks? The reason I ask is based on the conversation about the "Replace" button, and about this being a pattern. So I am wondering if this is also inline with how its done with other blocks in Gutenberg. If not, do you think it's worth Vivien having a look over this too?

We don't use any other blocks with media controls AFAIK, but based on the Gutenberg image block, this is the current pattern. Although I'd always vote for some design UX revision to be honest, I don't find it a great experience currently.

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
block: featured category Issues related to the Featured Category block, needs: dev note PR that has some text that needs to be included in the release notes. type: enhancement The issue is a request for an enhancement.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Implement Media Controls on Featured Category Block
3 participants