Disable page scroll when Mini Cart drawer is open

[Aljullu]

This PR disables scrolling the page when the Mini Cart drawer is open. The current behavior was specially confusing on mobile because you could scroll the page without noticing when the Mini Cart was open and covering the entire screen.

Screenshots

Testing

User Facing Testing

1. Add the Mini Cart block to a post, page, or in the Site Editor.
2. In the frontend, click on the Mini Cart button so the drawer opens.
3. Try scrolling the page and verify you can't.
4. Close the drawer and verify you can scroll again.

• Do not include in the Testing Notes

WooCommerce Visibility

• WooCommerce Core
• Feature plugin
• Experimental

Changelog

Disable page scroll when Mini Cart drawer is open

[github-actions]

Size Change: +41 B (0%)

Total Size: 863 kB

Filename	Size	Change
build/mini-cart-component-frontend.js	16.6 kB	+41 B (0%)

ℹ️ View Unchanged

Filename	Size
build/active-filters-frontend.js	6.59 kB
build/active-filters.js	7.43 kB
build/all-products-frontend.js	18.1 kB
build/all-products.js	33.4 kB
build/all-reviews.js	7.79 kB
build/attribute-filter-frontend.js	17.7 kB
build/attribute-filter.js	13.8 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.06 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	432 B
build/cart-blocks/cart-order-summary-frontend.js	1.11 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	782 B
build/cart-blocks/order-summary-coupon-form-frontend.js	2.62 kB
build/cart-blocks/order-summary-discount-frontend.js	2.13 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.3 kB
build/cart.js	44.1 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	892 B
build/checkout-blocks/contact-information-frontend.js	2.83 kB
build/checkout-blocks/express-payment-frontend.js	5.35 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.66 kB
build/checkout-blocks/order-summary-coupon-form-frontend.js	2.78 kB
build/checkout-blocks/order-summary-discount-frontend.js	2.25 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.67 kB
build/checkout-blocks/shipping-address-frontend.js	997 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.5 kB
build/checkout.js	45.4 kB
build/featured-category.js	13.2 kB
build/featured-product.js	13.5 kB
build/handpicked-products.js	7.39 kB
build/legacy-template.js	2.45 kB
build/mini-cart-contents-block/empty-cart-frontend.js	364 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.8 kB
build/mini-cart-frontend.js	1.72 kB
build/mini-cart.js	6.62 kB
build/price-filter-frontend.js	12.5 kB
build/price-filter.js	8.74 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	564 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.47 kB
build/product-button--product-category-list--product-image--product-price--product-rating--product-sale-b--e17c7c01.js	499 B
build/product-button-frontend.js	1.85 kB
build/product-button.js	1.09 kB
build/product-categories.js	2.78 kB
build/product-category-list-frontend.js	923 B
build/product-category-list.js	501 B
build/product-category.js	8.58 kB
build/product-image-frontend.js	1.84 kB
build/product-image.js	1.07 kB
build/product-new.js	7.76 kB
build/product-on-sale.js	8.08 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	735 B
build/product-sale-badge-frontend.js	1.09 kB
build/product-sale-badge.js	679 B
build/product-search.js	2.18 kB
build/product-sku-frontend.js	380 B
build/product-sku.js	381 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	916 B
build/product-tag-list-frontend.js	917 B
build/product-tag-list.js	495 B
build/product-tag.js	8.12 kB
build/product-title-frontend.js	1.3 kB
build/product-title.js	910 B
build/product-top-rated.js	8 kB
build/products-by-attribute.js	8.69 kB
build/reviews-by-category.js	11.3 kB
build/reviews-by-product.js	12.4 kB
build/reviews-frontend.js	7.02 kB
build/single-product-frontend.js	21.5 kB
build/single-product.js	10.1 kB
build/stock-filter-frontend.js	6.87 kB
build/stock-filter.js	6.95 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	5.07 kB
build/wc-blocks-editor-style.css	5.07 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-style-rtl.css	22.2 kB
build/wc-blocks-style.css	22.1 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	59 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.61 kB

_{compressed-size-action}

[gigitux]

LGTM 🚢