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

Avoid usage of __experimentalUseFocusOutside #10017

Merged
merged 3 commits into from
Jun 28, 2023
Merged

Avoid usage of __experimentalUseFocusOutside #10017

merged 3 commits into from
Jun 28, 2023

Conversation

Aljullu
Copy link
Contributor

@Aljullu Aljullu commented Jun 28, 2023

This PR refactors how the Drawer component gets closed and, instead of relying on the __experimentalUseFocusOutside utility from Gutenberg, we now simply check for a click to the overlay. This has some benefits:

  • We remove a usage of an experimental dependency.
  • We can remove the weird fix introduced in Mini Cart: stop using Modal component #9345 (comment) that programmatically moved the focus after a Quantity Selector button became disabled focus (commit 689acc6).
  • I don't have exact reproducible steps, but with the previous approach, there were some cases where the Mini-Cart wouldn't open in Chrome, or it would open but wouldn't be closed until refocus in Firefox.

Testing

User Facing Testing

  1. Add the Mini Cart block to the header of your site via (Appearance > Editor).
  2. In the frontend and with the Cart empty, open the Mini Cart drawer, verify you can open and close the drawer without problems. Test closing the drawer by clicking on the overlay that appears above the rest of the page.
  3. Add some products to your cart and open the Mini Cart drawer again. Verify you can open and close it, you can change the products' quantity, etc.
  4. Now repeat steps 1-3 with another browser. Ideally test Chrome, Firefox and a Webkit-based browser (like Safari or GNOME Web).
  • Do not include in the Testing Notes

WooCommerce Visibility

  • WooCommerce Core
  • Feature plugin
  • Experimental

@Aljullu Aljullu added status: needs review type: refactor The issue/PR is related to refactoring. skip-changelog PRs that you don't want to appear in the changelog. block: mini-cart Issues related to the Mini-Cart block. labels Jun 28, 2023
@Aljullu Aljullu self-assigned this Jun 28, 2023
@woocommercebot woocommercebot requested review from a team and albarin and removed request for a team June 28, 2023 06:38
@github-actions
Copy link
Contributor

github-actions bot commented Jun 28, 2023 •
edited
Loading

The release ZIP for this PR is accessible via:

https://wcblocks.wpcomstaging.com/wp-content/uploads/woocommerce-gutenberg-products-block-10017.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: 463
  • Total errors: 2236

🎉 🎉 This PR does not introduce new TS errors.

comments-aggregator

@github-actions
Copy link
Contributor

Size Change: -327 B (0%)

Total Size: 1.17 MB

Filename Size Change
build/all-products.js 40.3 kB -1 B (0%)
build/all-reviews.js 7.86 kB +1 B (0%)
build/cart-blocks/cart-line-items--mini-cart-contents-block/products-table-frontend.js 5.47 kB -99 B (-2%)
build/cart-frontend.js 30 kB -1 B (0%)
build/cart.js 45.2 kB -88 B (0%)
build/mini-cart-component-frontend.js 30.7 kB -32 B (0%)
build/mini-cart-contents.js 18 kB -105 B (-1%)
build/product-category.js 9.37 kB +2 B (0%)
build/product-new.js 8.66 kB +1 B (0%)
build/product-query.js 11.9 kB -1 B (0%)
build/reviews-by-product.js 13.3 kB +1 B (0%)
build/single-product.js 11.1 kB -5 B (0%)
ℹ️ View Unchanged
Filename Size
build/active-filters-frontend.js 8.63 kB
build/active-filters-wrapper-frontend.js 7.58 kB
build/active-filters.js 7.48 kB
build/all-products-frontend.js 12.2 kB
build/attribute-filter-frontend.js 23 kB
build/attribute-filter-wrapper-frontend.js 7.73 kB
build/attribute-filter.js 13.3 kB
build/blocks-checkout.js 35.1 kB
build/breadcrumbs.js 2.13 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--product-price-frontend.js 2.92 kB
build/cart-blocks/cart-cross-sells-products-frontend.js 3.77 kB
build/cart-blocks/cart-express-payment--checkout-blocks/express-payment-frontend.js 5.17 kB
build/cart-blocks/cart-express-payment-frontend.js 719 B
build/cart-blocks/cart-items-frontend.js 302 B
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 655 B
build/cart-blocks/order-summary-coupon-form-frontend.js 1.63 kB
build/cart-blocks/order-summary-discount-frontend.js 2.12 kB
build/cart-blocks/order-summary-fee-frontend.js 274 B
build/cart-blocks/order-summary-heading-frontend.js 333 B
build/cart-blocks/order-summary-shipping-frontend.js 17.1 kB
build/cart-blocks/order-summary-subtotal-frontend.js 274 B
build/cart-blocks/order-summary-taxes-frontend.js 436 B
build/cart-blocks/proceed-to-checkout-frontend.js 1.44 kB
build/catalog-sorting.js 1.7 kB
build/checkout-blocks/actions-frontend.js 1.88 kB
build/checkout-blocks/billing-address--checkout-blocks/shipping-address-frontend.js 4.69 kB
build/checkout-blocks/billing-address-frontend.js 1.18 kB
build/checkout-blocks/contact-information-frontend.js 2.04 kB
build/checkout-blocks/express-payment-frontend.js 1.14 kB
build/checkout-blocks/fields-frontend.js 331 B
build/checkout-blocks/order-note-frontend.js 1.14 kB
build/checkout-blocks/order-summary-cart-items-frontend.js 3.76 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 276 B
build/checkout-blocks/order-summary-frontend.js 1.28 kB
build/checkout-blocks/order-summary-shipping-frontend.js 17 kB
build/checkout-blocks/order-summary-subtotal-frontend.js 274 B
build/checkout-blocks/order-summary-taxes-frontend.js 436 B
build/checkout-blocks/payment-frontend.js 8.29 kB
build/checkout-blocks/pickup-options-frontend.js 4.84 kB
build/checkout-blocks/shipping-address-frontend.js 1.18 kB
build/checkout-blocks/shipping-method-frontend.js 2.64 kB
build/checkout-blocks/shipping-methods-frontend.js 6.41 kB
build/checkout-blocks/terms-frontend.js 1.56 kB
build/checkout-blocks/totals-frontend.js 360 B
build/checkout-frontend.js 31.9 kB
build/checkout.js 46.6 kB
build/customer-account.js 3.18 kB
build/featured-category.js 15.1 kB
build/featured-product.js 15.3 kB
build/filter-wrapper-frontend.js 14.3 kB
build/filter-wrapper.js 2.4 kB
build/general-style-rtl.css 1.31 kB
build/general-style.css 1.31 kB
build/handpicked-products.js 8.05 kB
build/legacy-template.js 6.8 kB
build/mini-cart-contents-block/cart-button-frontend.js 1.73 kB
build/mini-cart-contents-block/checkout-button-frontend.js 1.81 kB
build/mini-cart-contents-block/empty-cart-frontend.js 360 B
build/mini-cart-contents-block/filled-cart-frontend.js 267 B
build/mini-cart-contents-block/footer-frontend.js 3.83 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 530 B
build/mini-cart-contents-block/title-frontend.js 1.9 kB
build/mini-cart-contents-block/title-items-counter-frontend.js 1.59 kB
build/mini-cart-contents-block/title-label-frontend.js 1.53 kB
build/mini-cart-frontend.js 2.85 kB
build/mini-cart.js 5.92 kB
build/price-filter-frontend.js 14.6 kB
build/price-filter-wrapper-frontend.js 6.77 kB
build/price-filter.js 8.56 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 250 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.52 kB
build/product-add-to-cart.js 8.84 kB
build/product-best-sellers.js 8.36 kB
build/product-button--product-image--product-price--product-rating--product-sale-badge--product-sku--prod--5bce0384.js 955 B
build/product-button-frontend.js 2.65 kB
build/product-button.js 3.97 kB
build/product-categories.js 2.7 kB
build/product-collection.js 12.3 kB
build/product-image-frontend.js 2.61 kB
build/product-image.js 4.14 kB
build/product-on-sale.js 8.65 kB
build/product-price-frontend.js 204 B
build/product-price.js 1.68 kB
build/product-rating-frontend.js 2.34 kB
build/product-rating.js 1.04 kB
build/product-results-count.js 1.66 kB
build/product-sale-badge-frontend.js 1.79 kB
build/product-sale-badge.js 666 B
build/product-search.js 2.63 kB
build/product-sku-frontend.js 1.83 kB
build/product-sku.js 535 B
build/product-stock-indicator-frontend.js 2.03 kB
build/product-stock-indicator.js 731 B
build/product-summary-frontend.js 2.25 kB
build/product-summary.js 1 kB
build/product-tag.js 9.01 kB
build/product-template.js 3.34 kB
build/product-title-frontend.js 2.21 kB
build/product-title.js 3.66 kB
build/product-top-rated.js 8.91 kB
build/products-by-attribute.js 9.75 kB
build/rating-filter-frontend.js 21.4 kB
build/rating-filter-wrapper-frontend.js 6.23 kB
build/rating-filter.js 6.93 kB
build/reviews-by-category.js 12.1 kB
build/reviews-frontend.js 7.17 kB
build/stock-filter-frontend.js 21.7 kB
build/stock-filter-wrapper-frontend.js 6.48 kB
build/stock-filter.js 7.66 kB
build/store-notices.js 1.68 kB
build/vendors--attribute-filter-wrapper--cart-blocks/order-summary-coupon-form--cart-blocks/order-summary--48e1e4bb-frontend.js 6.84 kB
build/vendors--attribute-filter-wrapper--cart-blocks/order-summary-shipping--checkout-blocks/billing-addr--d9f38f9d-frontend.js 4.19 kB
build/vendors--attribute-filter-wrapper-frontend.js 5.11 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-line-items--checkout-blocks/order-summary-cart-items--mini-cart-contents---233ab542-frontend.js 3.57 kB
build/vendors--cart-blocks/order-summary-shipping--checkout-blocks/billing-address--checkout-blocks/order--decc3dc6-frontend.js 19.4 kB
build/vendors--checkout-blocks/pickup-options--checkout-blocks/shipping-methods-frontend.js 8.25 kB
build/vendors--checkout-blocks/shipping-method-frontend.js 12.4 kB
build/vendors--price-filter-wrapper-frontend.js 2.2 kB
build/vendors--product-add-to-cart-frontend.js 7.25 kB
build/vendors--rating-filter-wrapper-frontend.js 5.11 kB
build/vendors--stock-filter-wrapper-frontend.js 5.11 kB
build/wc-blocks-data.js 22.3 kB
build/wc-blocks-editor-style-rtl.css 6.21 kB
build/wc-blocks-editor-style.css 6.21 kB
build/wc-blocks-google-analytics.js 1.56 kB
build/wc-blocks-middleware.js 934 B
build/wc-blocks-registry.js 3.15 kB
build/wc-blocks-shared-context.js 1.1 kB
build/wc-blocks-shared-hocs.js 1.75 kB
build/wc-blocks-style-rtl.css 28 kB
build/wc-blocks-style.css 27.9 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 65.1 kB
build/wc-blocks.js 3.7 kB
build/wc-interactivity.js 10.4 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 30.4 kB

compressed-size-action

albarin
albarin approved these changes Jun 28, 2023
View reviewed changes
Copy link
Contributor

@albarin albarin left a comment

Choose a reason for hiding this comment

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

Works great in all browsers! 👏

@github-actions github-actions bot added this to the 10.6.0 milestone Jun 28, 2023
@Aljullu Aljullu merged commit 1b9746e into trunk Jun 28, 2023
@Aljullu Aljullu deleted the fix/avoid-usage-of-__experimentalUseFocusOutside branch June 28, 2023 12:43
@nielslange nielslange mentioned this pull request Jul 6, 2023
Closed
5 tasks
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Reviewers

@albarin albarin albarin approved these changes

Assignees

@Aljullu Aljullu

Labels
block: mini-cart Issues related to the Mini-Cart block. skip-changelog PRs that you don't want to appear in the changelog. type: refactor The issue/PR is related to refactoring.
Projects
None yet
Milestone
10.6.0
Development

Successfully merging this pull request may close these issues.
2 participants
@Aljullu @albarin