Use a portal to render the Drawer close button in order to fix its alignment inside the Mini-Cart Contents block #9507

Aljullu · 2023-05-18T14:10:09Z

This PR refactors how we render the Drawer close button. Until now, it was rendered directly by the Drawer component, but this had the problem that it wouldn't align correctly if the Mini-Cart Contents block had a border. With this PR, instead, we use a portal, so the consumer of the component (in this case, the Mini-Cart Contents block) can decide where to display the close button. Tha allows placing the close button inside the Mini-Cart Contents block, so it appears in the correct position.

Fixes #8716.

Testing

User Facing Testing

Add the Mini-Cart block to the header of your store.
Go to Appearance > Editor > Template parts > Mini-Cart.
Select the Mini-Cart Contents block and change its border to something excessively thick (ie: a 30px border).
Go to the frontend and open the Mini-Cart drawer.
Verify the close button is inside the Mini-Cart drawer area, instead of being on top of the border.

Before	After

Do not include in the Testing Notes

WooCommerce Visibility

WooCommerce Core
Feature plugin
Experimental

Changelog

Fix alignment of the close button in the Mini-Cart drawer when it has borders.

github-actions · 2023-05-18T14:14:26Z

The release ZIP for this PR is accessible via:

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

Script Dependencies Report

The compare-assets action has detected some changed script dependencies between this branch and trunk. Please review and confirm the following are correct before merging.

Script Handle	Added
`reviews-frontend.js`	`wc-settings`, `wp-a11y`, `wp-api-fetch`, `wp-compose`, `wp-element`, `wp-i18n`, `wp-is-shallow-equal`, `wp-polyfill`	⚠️
`active-filters-frontend.js`	`wc-blocks-data-store`, `wc-price-format`, `wc-settings`, `wp-data`, `wp-element`, `wp-html-entities`, `wp-i18n`, `wp-is-shallow-equal`, `wp-polyfill`, `wp-primitives`, `wp-url`	⚠️
`all-products-frontend.js`	`lodash`, `react`, `wc-blocks-checkout`, `wc-blocks-data-store`, `wc-blocks-registry`, `wc-blocks-shared-context`, `wc-blocks-shared-hocs`, `wc-price-format`, `wc-settings`, `wp-a11y`, `wp-api-fetch`, `wp-autop`, `wp-blocks`, `wp-compose`, `wp-data`, `wp-deprecated`, `wp-dom`, `wp-element`, `wp-hooks`, `wp-html-entities`, `wp-i18n`, `wp-is-shallow-equal`, `wp-polyfill`, `wp-primitives`, `wp-style-engine`, `wp-url`, `wp-warning`, `wp-wordcount`	⚠️
`cart-frontend.js`	`lodash`, `react`, `wc-blocks-checkout`, `wc-blocks-data-store`, `wc-blocks-registry`, `wc-blocks-shared-context`, `wc-blocks-shared-hocs`, `wc-price-format`, `wc-settings`, `wp-a11y`, `wp-api-fetch`, `wp-autop`, `wp-blocks`, `wp-compose`, `wp-data`, `wp-deprecated`, `wp-dom`, `wp-element`, `wp-hooks`, `wp-html-entities`, `wp-i18n`, `wp-is-shallow-equal`, `wp-keycodes`, `wp-plugins`, `wp-polyfill`, `wp-primitives`, `wp-style-engine`, `wp-url`, `wp-warning`, `wp-wordcount`	⚠️
`checkout-frontend.js`	`lodash`, `react`, `wc-blocks-checkout`, `wc-blocks-data-store`, `wc-blocks-registry`, `wc-blocks-shared-hocs`, `wc-price-format`, `wc-settings`, `wp-a11y`, `wp-api-fetch`, `wp-autop`, `wp-compose`, `wp-data`, `wp-deprecated`, `wp-dom`, `wp-element`, `wp-hooks`, `wp-html-entities`, `wp-i18n`, `wp-is-shallow-equal`, `wp-keycodes`, `wp-plugins`, `wp-polyfill`, `wp-primitives`, `wp-url`, `wp-warning`, `wp-wordcount`	⚠️
`filter-wrapper-frontend.js`	`lodash`, `react`, `wc-blocks-checkout`, `wc-blocks-data-store`, `wc-blocks-registry`, `wc-price-format`, `wc-settings`, `wp-a11y`, `wp-compose`, `wp-data`, `wp-deprecated`, `wp-dom`, `wp-element`, `wp-html-entities`, `wp-i18n`, `wp-is-shallow-equal`, `wp-keycodes`, `wp-polyfill`, `wp-primitives`, `wp-style-engine`, `wp-url`, `wp-warning`	⚠️
`mini-cart-frontend.js`	`wp-polyfill`	⚠️
`rating-filter-frontend.js`	`lodash`, `react`, `wc-blocks-checkout`, `wc-blocks-data-store`, `wc-settings`, `wp-a11y`, `wp-compose`, `wp-data`, `wp-deprecated`, `wp-dom`, `wp-element`, `wp-i18n`, `wp-is-shallow-equal`, `wp-keycodes`, `wp-polyfill`, `wp-primitives`, `wp-url`, `wp-warning`	⚠️
`mini-cart-component-frontend.js`	`lodash`, `react`, `wc-blocks-checkout`, `wc-blocks-data-store`, `wc-blocks-registry`, `wc-price-format`, `wc-settings`, `wp-a11y`, `wp-autop`, `wp-compose`, `wp-data`, `wp-deprecated`, `wp-dom`, `wp-element`, `wp-hooks`, `wp-html-entities`, `wp-i18n`, `wp-is-shallow-equal`, `wp-keycodes`, `wp-polyfill`, `wp-primitives`, `wp-style-engine`, `wp-url`, `wp-warning`, `wp-wordcount`	⚠️

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

TypeScript Errors Report

Files with errors: 472
Total errors: 2267

🎉 🎉 This PR does not introduce new TS errors.

_{comments-aggregator}

…ith the Mini-Cart Contents block

github-actions · 2023-05-18T14:46:32Z

Size Change: +78 B (0%)

Total Size: 1.09 MB

Filename	Size	Change
`build/mini-cart-component-frontend.js`	28.5 kB	+74 B (0%)
`build/wc-blocks-style-rtl.css`	27.8 kB	+2 B (0%)
`build/wc-blocks-style.css`	27.8 kB	+2 B (0%)

ℹ️ View Unchanged

Filename	Size
`build/active-filters-frontend.js`	8.57 kB
`build/active-filters-wrapper-frontend.js`	7.62 kB
`build/active-filters.js`	7.47 kB
`build/all-products-frontend.js`	11.9 kB
`build/all-products.js`	39.2 kB
`build/all-reviews.js`	7.77 kB
`build/attribute-filter-wrapper--stock-filter-wrapper-frontend.js`	4.05 kB
`build/attribute-filter-wrapper-frontend.js`	4.28 kB
`build/attribute-filter.js`	13.1 kB
`build/blocks-checkout.js`	35.1 kB
`build/breadcrumbs.js`	2.04 kB
`build/cart-blocks/cart-accepted-payment-methods-frontend.js`	1.39 kB
`build/cart-blocks/cart-cross-sells-frontend.js`	253 B
`build/cart-blocks/cart-cross-sells-products--product-price-frontend.js`	2.94 kB
`build/cart-blocks/cart-cross-sells-products-frontend.js`	3.73 kB
`build/cart-blocks/cart-express-payment--checkout-blocks/express-payment-frontend.js`	5.17 kB
`build/cart-blocks/cart-express-payment-frontend.js`	717 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.51 kB
`build/cart-blocks/cart-line-items-frontend.js`	1.06 kB
`build/cart-blocks/cart-order-summary-frontend.js`	1.28 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`	656 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`	273 B
`build/cart-blocks/order-summary-heading-frontend.js`	333 B
`build/cart-blocks/order-summary-shipping-frontend.js`	17 kB
`build/cart-blocks/order-summary-subtotal-frontend.js`	273 B
`build/cart-blocks/order-summary-taxes-frontend.js`	435 B
`build/cart-blocks/proceed-to-checkout-frontend.js`	1.38 kB
`build/cart-frontend.js`	29.7 kB
`build/cart.js`	45 kB
`build/catalog-sorting.js`	1.7 kB
`build/checkout-blocks/actions-frontend.js`	1.85 kB
`build/checkout-blocks/billing-address--checkout-blocks/shipping-address-frontend.js`	4.7 kB
`build/checkout-blocks/billing-address-frontend.js`	1.18 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`	330 B
`build/checkout-blocks/order-note-frontend.js`	1.14 kB
`build/checkout-blocks/order-summary-cart-items-frontend.js`	3.69 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`	273 B
`build/checkout-blocks/order-summary-taxes-frontend.js`	435 B
`build/checkout-blocks/payment-frontend.js`	8.29 kB
`build/checkout-blocks/pickup-options-frontend.js`	4.8 kB
`build/checkout-blocks/shipping-address-frontend.js`	1.17 kB
`build/checkout-blocks/shipping-method-frontend.js`	2.59 kB
`build/checkout-blocks/shipping-methods-frontend.js`	6.36 kB
`build/checkout-blocks/terms-frontend.js`	1.56 kB
`build/checkout-blocks/totals-frontend.js`	312 B
`build/checkout-frontend.js`	31.3 kB
`build/checkout.js`	46.3 kB
`build/customer-account.js`	3.18 kB
`build/featured-category.js`	15 kB
`build/featured-product.js`	15.2 kB
`build/filter-wrapper-frontend.js`	14.2 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`	8 kB
`build/legacy-template.js`	6.45 kB
`build/mini-cart-contents-block/cart-button-frontend.js`	1.73 kB
`build/mini-cart-contents-block/checkout-button-frontend.js`	1.74 kB
`build/mini-cart-contents-block/empty-cart-frontend.js`	360 B
`build/mini-cart-contents-block/filled-cart-frontend.js`	266 B
`build/mini-cart-contents-block/footer-frontend.js`	4.1 kB
`build/mini-cart-contents-block/items-frontend.js`	237 B
`build/mini-cart-contents-block/products-table-frontend.js`	591 B
`build/mini-cart-contents-block/shopping-button-frontend.js`	528 B
`build/mini-cart-contents-block/title-frontend.js`	1.91 kB
`build/mini-cart-contents-block/title-items-counter-frontend.js`	1.61 kB
`build/mini-cart-contents-block/title-label-frontend.js`	1.54 kB
`build/mini-cart-contents.js`	18 kB
`build/mini-cart-frontend.js`	2.15 kB
`build/mini-cart.js`	4.35 kB
`build/price-filter-wrapper-frontend.js`	6.75 kB
`build/price-filter.js`	8.47 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`	251 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.87 kB
`build/product-best-sellers.js`	8.34 kB
`build/product-button--product-image--product-price--product-rating--product-sale-badge--product-sku--prod--5bce0384.js`	963 B
`build/product-button-frontend.js`	2.65 kB
`build/product-button.js`	4.01 kB
`build/product-categories.js`	2.37 kB
`build/product-category.js`	9.35 kB
`build/product-collection.js`	3.39 kB
`build/product-image-frontend.js`	2.63 kB
`build/product-image.js`	4.18 kB
`build/product-new.js`	8.34 kB
`build/product-on-sale.js`	8.68 kB
`build/product-price-frontend.js`	203 B
`build/product-price.js`	1.68 kB
`build/product-query.js`	11.7 kB
`build/product-rating-frontend.js`	2.31 kB
`build/product-rating.js`	999 B
`build/product-results-count.js`	1.66 kB
`build/product-sale-badge-frontend.js`	1.8 kB
`build/product-sale-badge.js`	666 B
`build/product-search.js`	2.63 kB
`build/product-sku-frontend.js`	1.84 kB
`build/product-sku.js`	535 B
`build/product-stock-indicator-frontend.js`	2.02 kB
`build/product-stock-indicator.js`	731 B
`build/product-summary-frontend.js`	2.19 kB
`build/product-summary.js`	904 B
`build/product-tag.js`	8.97 kB
`build/product-template.js`	3.27 kB
`build/product-title-frontend.js`	2.22 kB
`build/product-title.js`	3.69 kB
`build/product-top-rated.js`	8.58 kB
`build/products-by-attribute.js`	9.7 kB
`build/rating-filter-frontend.js`	21.3 kB
`build/rating-filter-wrapper-frontend.js`	6.21 kB
`build/rating-filter.js`	6.89 kB
`build/reviews-by-category.js`	12.1 kB
`build/reviews-by-product.js`	13.2 kB
`build/reviews-frontend.js`	7.11 kB
`build/single-product.js`	11.1 kB
`build/stock-filter-wrapper-frontend.js`	2.98 kB
`build/stock-filter.js`	7.61 kB
`build/store-notices.js`	1.69 kB
`build/vendors--attribute-filter-wrapper--cart-blocks/order-summary-coupon-form--cart-blocks/order-summary--48e1e4bb-frontend.js`	6.82 kB
`build/vendors--attribute-filter-wrapper--cart-blocks/order-summary-shipping--checkout-blocks/billing-addr--d9f38f9d-frontend.js`	4.21 kB
`build/vendors--attribute-filter-wrapper--stock-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.5 kB
`build/vendors--price-filter-wrapper-frontend.js`	2.2 kB
`build/vendors--product-add-to-cart-frontend.js`	7.26 kB
`build/vendors--rating-filter-wrapper-frontend.js`	5.11 kB
`build/wc-blocks-data.js`	22.5 kB
`build/wc-blocks-editor-style-rtl.css`	5.96 kB
`build/wc-blocks-editor-style.css`	5.96 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-vendors-style-rtl.css`	1.96 kB
`build/wc-blocks-vendors-style.css`	1.96 kB
`build/wc-blocks-vendors.js`	65 kB
`build/wc-blocks.js`	3.7 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.3 kB
`build/woo-directives-runtime.js`	2.73 kB
`build/woo-directives-vendors.js`	7.91 kB

_{compressed-size-action}

github-actions · 2023-05-26T09:02:53Z

This PR has been marked as stale because it has not seen any activity within the past 7 days. Our team uses this tool to help surface pull requests that have slipped through review.

If deemed still relevant, the pr can be kept active by ensuring it's up to date with the main branch and removing the stale label.

danieldudzic

LGTM!

Aljullu added status: needs review type: bug The issue/PR concerns a confirmed bug. block: mini-cart Issues related to the Mini-Cart block. labels May 18, 2023

Aljullu self-assigned this May 18, 2023

woocommercebot requested review from a team and danieldudzic and removed request for a team May 18, 2023 14:10

Use a portal to render the Drawer close button to fix the alignment w…

8ac7626

…ith the Mini-Cart Contents block

Aljullu force-pushed the fix/8716-mini-cart-close-button-portal branch from 07729fe to 8ac7626 Compare May 18, 2023 14:38

github-actions bot added the status: stale Stale issues and PRs have had no updates for 60 days. label May 26, 2023

danieldudzic approved these changes May 30, 2023

View reviewed changes

github-actions bot added this to the 10.4.0 milestone May 30, 2023

github-actions bot added status: ready to merge and removed status: needs review labels May 30, 2023

Aljullu merged commit ec093ed into trunk May 30, 2023

Aljullu deleted the fix/8716-mini-cart-close-button-portal branch May 30, 2023 13:39

github-actions bot removed the status: ready to merge label May 30, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Use a portal to render the Drawer close button in order to fix its alignment inside the Mini-Cart Contents block #9507

Use a portal to render the Drawer close button in order to fix its alignment inside the Mini-Cart Contents block #9507

Aljullu commented May 18, 2023

github-actions bot commented May 18, 2023 •

edited

Loading

github-actions bot commented May 18, 2023

github-actions bot commented May 26, 2023

danieldudzic left a comment

Use a portal to render the Drawer close button in order to fix its alignment inside the Mini-Cart Contents block #9507

Use a portal to render the Drawer close button in order to fix its alignment inside the Mini-Cart Contents block #9507

Conversation

Aljullu commented May 18, 2023

Testing

User Facing Testing

WooCommerce Visibility

Changelog

github-actions bot commented May 18, 2023 • edited Loading

Script Dependencies Report

TypeScript Errors Report

github-actions bot commented May 18, 2023

github-actions bot commented May 26, 2023

If deemed still relevant, the pr can be kept active by ensuring it's up to date with the main branch and removing the stale label.

danieldudzic left a comment

Choose a reason for hiding this comment

github-actions bot commented May 18, 2023 •

edited

Loading