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

Fix image editor in Featured Product/Category blocks on WP 6.2 #9142

Merged
merged 1 commit into from
Apr 20, 2023

Conversation

Aljullu
Copy link
Contributor

@Aljullu Aljullu commented Apr 20, 2023

Fixes #9100.

The issue was caused because we were using a Gutenberg component which is no longer available in WP 6.2 (ImageEditingProvider), this PR refactors the code so it works without that component.

Testing

User Facing Testing

  1. With WP 6.2:
  2. Create a post and add the Featured Category block.
  3. Click on the button to edit the image (note: this button is only available if the category has an image, if you don't have any categories with images, go to wp-admin > Products > Categories and edit a category to add an image):
    imatge
  4. Make some changes (rotate, zoom, change aspect ratio, etc.) and apply them.
  5. Verify the changes are applied and there are no errors in the browser devtools console (you can open it with F12).
  6. Repeat all the steps above with the Featured Product block.
  7. Repeat all steps above with WP 6.1 (you can use WP Downgrade).
  • Do not include in the Testing Notes

WooCommerce Visibility

  • WooCommerce Core
  • Feature plugin
  • Experimental

Changelog

Fix image editor in Featured Product/Category blocks on WP 6.2.

@Aljullu Aljullu added status: needs review type: bug The issue/PR concerns a confirmed bug. block: featured category Issues related to the Featured Category block, block: featured product Issues related to the Featured Product block. labels Apr 20, 2023
@Aljullu Aljullu self-assigned this Apr 20, 2023
@woocommercebot woocommercebot requested review from a team and kmanijak and removed request for a team April 20, 2023 12:00
@github-actions
Copy link
Contributor

github-actions bot commented Apr 20, 2023

The release ZIP for this PR is accessible via:

https://wcblocks.wpcomstaging.com/wp-content/uploads/woocommerce-gutenberg-products-block-9142.zip

Script Dependencies Report

There is no changed script dependency between this branch and trunk.

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

TypeScript Errors Report

  • Files with errors: 452
  • Total errors: 2217

⚠️ ⚠️ This PR introduces new TS errors on 1 files:

assets/js/blocks/featured-items/image-editor.tsx

comments-aggregator

@github-actions
Copy link
Contributor

Size Change: +453 B (0%)

Total Size: 1.11 MB

Filename Size Change
build/active-filters.js 7.48 kB -2 B (0%)
build/all-products.js 38.5 kB -3 B (0%)
build/attribute-filter.js 13.2 kB -3 B (0%)
build/cart.js 48.7 kB +3 B (0%)
build/featured-category.js 14.3 kB +242 B (+2%)
build/featured-product.js 14.5 kB +214 B (+1%)
build/price-filter.js 8.44 kB -3 B (0%)
build/product-add-to-cart.js 8.8 kB +2 B (0%)
build/product-button.js 4.17 kB +1 B (0%)
build/product-sale-badge.js 799 B -1 B (0%)
build/product-title.js 3.73 kB +1 B (0%)
build/rating-filter.js 6.99 kB +1 B (0%)
build/stock-filter.js 7.7 kB +1 B (0%)
ℹ️ View Unchanged
Filename Size
build/active-filters-frontend.js 7.99 kB
build/active-filters-wrapper-frontend.js 5.97 kB
build/all-products-frontend.js 11.8 kB
build/all-reviews.js 7.65 kB
build/attribute-filter-frontend.js 22.4 kB
build/attribute-filter-wrapper-frontend.js 7.07 kB
build/blocks-checkout.js 35.1 kB
build/breadcrumbs.js 2.05 kB
build/cart-blocks/cart-accepted-payment-methods-frontend.js 1.38 kB
build/cart-blocks/cart-cross-sells-frontend.js 253 B
build/cart-blocks/cart-cross-sells-products-frontend.js 9.82 kB
build/cart-blocks/cart-express-payment--checkout-blocks/express-payment-frontend.js 5.16 kB
build/cart-blocks/cart-express-payment-frontend.js 719 B
build/cart-blocks/cart-items-frontend.js 301 B
build/cart-blocks/cart-line-items--mini-cart-contents-block/products-table-frontend.js 5.4 kB
build/cart-blocks/cart-line-items-frontend.js 1.06 kB
build/cart-blocks/cart-order-summary-frontend.js 1.27 kB
build/cart-blocks/cart-totals-frontend.js 308 B
build/cart-blocks/empty-cart-frontend.js 345 B
build/cart-blocks/filled-cart-frontend.js 657 B
build/cart-blocks/order-summary-coupon-form-frontend.js 1.62 kB
build/cart-blocks/order-summary-discount-frontend.js 2.12 kB
build/cart-blocks/order-summary-fee-frontend.js 272 B
build/cart-blocks/order-summary-heading-frontend.js 456 B
build/cart-blocks/order-summary-shipping-frontend.js 11.8 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.38 kB
build/cart-frontend.js 29.3 kB
build/catalog-sorting.js 1.7 kB
build/checkout-blocks/actions-frontend.js 1.85 kB
build/checkout-blocks/billing-address-frontend.js 4.19 kB
build/checkout-blocks/contact-information-frontend.js 2.05 kB
build/checkout-blocks/express-payment-frontend.js 1.13 kB
build/checkout-blocks/fields-frontend.js 331 B
build/checkout-blocks/order-note-frontend.js 1.13 kB
build/checkout-blocks/order-summary-cart-items-frontend.js 3.71 kB
build/checkout-blocks/order-summary-coupon-form-frontend.js 1.79 kB
build/checkout-blocks/order-summary-discount-frontend.js 2.29 kB
build/checkout-blocks/order-summary-fee-frontend.js 275 B
build/checkout-blocks/order-summary-frontend.js 1.27 kB
build/checkout-blocks/order-summary-shipping-frontend.js 11.8 kB
build/checkout-blocks/order-summary-subtotal-frontend.js 273 B
build/checkout-blocks/order-summary-taxes-frontend.js 431 B
build/checkout-blocks/payment-frontend.js 8.27 kB
build/checkout-blocks/pickup-options-frontend.js 4.14 kB
build/checkout-blocks/shipping-address-frontend.js 4.14 kB
build/checkout-blocks/shipping-method-frontend.js 2.63 kB
build/checkout-blocks/shipping-methods-frontend.js 5.83 kB
build/checkout-blocks/terms-frontend.js 1.56 kB
build/checkout-blocks/totals-frontend.js 311 B
build/checkout-frontend.js 30.9 kB
build/checkout.js 46.4 kB
build/customer-account.js 3.17 kB
build/filter-wrapper-frontend.js 14 kB
build/filter-wrapper.js 2.39 kB
build/general-style-rtl.css 1.31 kB
build/general-style.css 1.31 kB
build/handpicked-products.js 7.92 kB
build/legacy-template.js 5.63 kB
build/mini-cart-component-frontend.js 29.2 kB
build/mini-cart-contents-block/cart-button-frontend.js 867 B
build/mini-cart-contents-block/checkout-button-frontend.js 870 B
build/mini-cart-contents-block/empty-cart-frontend.js 361 B
build/mini-cart-contents-block/filled-cart-frontend.js 268 B
build/mini-cart-contents-block/footer-frontend.js 3.2 kB
build/mini-cart-contents-block/items-frontend.js 237 B
build/mini-cart-contents-block/products-table-frontend.js 588 B
build/mini-cart-contents-block/shopping-button-frontend.js 760 B
build/mini-cart-contents-block/title-frontend.js 1.09 kB
build/mini-cart-contents-block/title-items-counter-frontend.js 733 B
build/mini-cart-contents-block/title-label-frontend.js 660 B
build/mini-cart-contents.js 17.8 kB
build/mini-cart-frontend.js 2.02 kB
build/mini-cart.js 4.49 kB
build/price-filter-frontend.js 13.9 kB
build/price-filter-wrapper-frontend.js 7.03 kB
build/price-format.js 1.19 kB
build/product-add-to-cart--product-button--product-image--product-price--product-rating--product-sale-bad--49d3ecb2.js 253 B
build/product-add-to-cart--product-button--product-image--product-rating--product-title.js 151 B
build/product-add-to-cart-frontend.js 6.43 kB
build/product-best-sellers.js 8.26 kB
build/product-button--product-image--product-price--product-rating--product-sale-badge--product-sku--prod--408017d2.js 262 B
build/product-button--product-image--product-price--product-rating--product-sale-badge--product-sku--prod--5bce0384.js 464 B
build/product-button-frontend.js 1.92 kB
build/product-categories.js 2.37 kB
build/product-category.js 9.25 kB
build/product-image-frontend.js 1.84 kB
build/product-image.js 4.3 kB
build/product-new.js 8.26 kB
build/product-on-sale.js 8.58 kB
build/product-price-frontend.js 2.12 kB
build/product-price.js 1.67 kB
build/product-query.js 11.3 kB
build/product-rating-frontend.js 1.33 kB
build/product-rating.js 920 B
build/product-results-count.js 1.66 kB
build/product-sale-badge-frontend.js 976 B
build/product-search.js 2.63 kB
build/product-sku-frontend.js 1 kB
build/product-sku.js 578 B
build/product-stock-indicator-frontend.js 1.19 kB
build/product-stock-indicator.js 770 B
build/product-summary-frontend.js 1.29 kB
build/product-summary.js 923 B
build/product-tag.js 8.74 kB
build/product-title-frontend.js 1.37 kB
build/product-top-rated.js 8.49 kB
build/products-by-attribute.js 9.59 kB
build/rating-filter-frontend.js 20.8 kB
build/rating-filter-wrapper-frontend.js 5.59 kB
build/reviews-by-category.js 11.9 kB
build/reviews-by-product.js 13 kB
build/reviews-frontend.js 7.1 kB
build/single-product.js 11 kB
build/stock-filter-frontend.js 21.1 kB
build/stock-filter-wrapper-frontend.js 5.83 kB
build/store-notices.js 1.69 kB
build/vendors--attribute-filter-wrapper--cart-blocks/cart-cross-sells-products--cart-blocks/order-summary--82e4ed06-frontend.js 6.82 kB
build/vendors--attribute-filter-wrapper--rating-filter-wrapper--stock-filter-wrapper-frontend.js 7.7 kB
build/vendors--cart-blocks/cart-cross-sells-products--cart-blocks/cart-line-items--cart-blocks/cart-order--3c5fe802-frontend.js 5.26 kB
build/vendors--cart-blocks/cart-cross-sells-products--cart-blocks/order-summary-shipping--checkout-blocks--18f9376a-frontend.js 19.1 kB
build/vendors--cart-blocks/cart-cross-sells-products--product-add-to-cart-frontend.js 7.25 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/order-summary-shipping--checkout-block--24d3fc0c-frontend.js 8.25 kB
build/vendors--checkout-blocks/billing-address--checkout-blocks/shipping-address-frontend.js 5.45 kB
build/vendors--checkout-blocks/shipping-method-frontend.js 12 kB
build/wc-blocks-data.js 21.8 kB
build/wc-blocks-editor-style-rtl.css 5.87 kB
build/wc-blocks-editor-style.css 5.87 kB
build/wc-blocks-google-analytics.js 1.56 kB
build/wc-blocks-middleware.js 933 B
build/wc-blocks-registry.js 3.15 kB
build/wc-blocks-shared-context.js 1.52 kB
build/wc-blocks-shared-hocs.js 1.75 kB
build/wc-blocks-style-rtl.css 27.6 kB
build/wc-blocks-style.css 27.6 kB
build/wc-blocks-vendors-style-rtl.css 1.96 kB
build/wc-blocks-vendors-style.css 1.96 kB
build/wc-blocks-vendors.js 62.8 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.6 kB
build/wc-shipping-method-pickup-location.js 29.9 kB
build/woo-directives-runtime.js 2.73 kB
build/woo-directives-vendors.js 7.91 kB

compressed-size-action

Copy link
Contributor

@kmanijak kmanijak left a comment

Choose a reason for hiding this comment

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

It works and no errors/warnings are thrown on 6.2 and neither 6.1 👍

I left one comment with potential improvement, but still pre-approving.

Also, I spotted that the edited (zoomed) image is actually cropped (top image: edited, bottom image: untouched). But I checked and it behaved like that before those changes, so maybe that's expected and definitely, it's not in the scope of this PR.
image

@Aljullu
Copy link
Contributor Author

Aljullu commented Apr 20, 2023

Thanks for the review, @kmanijak!

Also, I spotted that the edited (zoomed) image is actually cropped (top image: edited, bottom image: untouched). But I checked and it behaved like that before those changes, so maybe that's expected and definitely, it's not in the scope of this PR.

Good catch! That's because the block has a separate Image Fit option.

imatge

Setting it to Cover makes it expand to the entire available space. I agree that's confusing, but I'm not sure how we could improve it. 🤔

Aljullu added a commit that referenced this pull request Apr 21, 2023
* Empty commit for release pull request

* Add 10.0.3 changelog

* Update versions to 10.0.3

* Fix image editor in Featured Product/Category blocks on WP 6.2 (#9142)

* Add 10.0.3 testing steps

---------

Co-authored-by: github-actions <github-actions@github.com>
Co-authored-by: Albert Juhé Lluveras <contact@albertjuhe.com>
Aljullu added a commit that referenced this pull request Apr 21, 2023
* Empty commit for release pull request

* Empty commit for release pull request

* Add 9.8.5 changelog

* Update versions to 9.8.5

* Fix image editor in Featured Product/Category blocks on WP 6.2 (#9142)

* Add 9.8.5 testing steps

---------

Co-authored-by: github-actions <github-actions@github.com>
Co-authored-by: Albert Juhé Lluveras <contact@albertjuhe.com>
gigitux added a commit that referenced this pull request May 5, 2023
* Empty commit for release pull request

* Add 10.0.3 changelog

* Update versions to 10.0.3

* Fix image editor in Featured Product/Category blocks on WP 6.2 (#9142)

* Add 10.0.3 testing steps

* Empty commit for release pull request

* Check that the customized fallback template is archive-product before unsetting the source property (#9330)

* use 'enqueue_block_assets' is available (#9332)

* Remove esc_url() on self generated link to edit the Mini Cart template since it gets escaped in JS (#9348)

* Add changelog entries to readme.txt

* Update version number in several files

* Add testing notes for the release

* Add #9332 to testing notes

* Add testing on frontend for #9332

---------

Co-authored-by: github-actions <github-actions@github.com>
Co-authored-by: Albert Juhé Lluveras <contact@albertjuhe.com>
Co-authored-by: Tom Cafferkey <tjcafferkey@gmail.com>
Co-authored-by: Luigi Teschio <gigitux@gmail.com>
Co-authored-by: Alexandre Lara <allexandrelara@gmail.com>
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, block: featured product Issues related to the Featured Product block. type: bug The issue/PR concerns a confirmed bug.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Feature product: JS error when clicking on Edit product image
2 participants