Display Mini Cart overlay in template part editor

[Aljullu]

This PR adds the overlay to the Mini Cart template part editor so it's clear which part is the editable template part and which part is the background.

Testing

User Facing Testing

1. Go to Appearance > Editor > Template Parts > Mini Cart.
2. Verify the Mini Cart template part is surrounded by space with a dimmed background (like the frontend overlay).

Before	After

• Do not include in the Testing Notes

WooCommerce Visibility

• WooCommerce Core
• Feature plugin
• Experimental

Changelog

Display Mini Cart overlay in template part editor to better reflect the frontend experience.

[github-actions]

The release ZIP for this PR is accessible via:

https://wcblocks.wpcomstaging.com/wp-content/uploads/woocommerce-gutenberg-products-block-9014.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: 2213

🎉 🎉 This PR does not introduce new TS errors.

_{comments-aggregator}

[github-actions]

Size Change: +116 B (0%)

Total Size: 1.11 MB

Filename	Size	Change
build/mini-cart-contents.js	17.8 kB	+64 B (0%)
build/wc-blocks-editor-style-rtl.css	5.86 kB	+26 B (0%)
build/wc-blocks-editor-style.css	5.86 kB	+26 B (0%)

ℹ️ View Unchanged

Filename	Size
build/active-filters-frontend.js	7.99 kB
build/active-filters-wrapper-frontend.js	5.97 kB
build/active-filters.js	7.49 kB
build/all-products-frontend.js	11.8 kB
build/all-products.js	38.3 kB
build/all-reviews.js	7.66 kB
build/attribute-filter-frontend.js	22.4 kB
build/attribute-filter-wrapper-frontend.js	7.07 kB
build/attribute-filter.js	13.2 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.81 kB
build/cart-blocks/cart-express-payment--checkout-blocks/express-payment-frontend.js	5.16 kB
build/cart-blocks/cart-express-payment-frontend.js	720 B
build/cart-blocks/cart-items-frontend.js	302 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	346 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	272 B
build/cart-blocks/order-summary-heading-frontend.js	455 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	431 B
build/cart-blocks/proceed-to-checkout-frontend.js	1.33 kB
build/cart-frontend.js	29.3 kB
build/cart.js	48.7 kB
build/catalog-sorting.js	1.7 kB
build/checkout-blocks/actions-frontend.js	1.84 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.14 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.28 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	310 B
build/checkout-frontend.js	30.9 kB
build/checkout.js	46.3 kB
build/customer-account.js	3.17 kB
build/featured-category.js	14.1 kB
build/featured-product.js	14.3 kB
build/filter-wrapper-frontend.js	14 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	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	360 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	759 B
build/mini-cart-contents-block/title-frontend.js	1.09 kB
build/mini-cart-contents-block/title-items-counter-frontend.js	732 B
build/mini-cart-contents-block/title-label-frontend.js	658 B
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.04 kB
build/price-filter.js	8.46 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-add-to-cart.js	8.8 kB
build/product-best-sellers.js	8.26 kB
build/product-button--product-image--product-price--product-rating--product-sale-badge--product-sku--prod--5bce0384.js	464 B
build/product-button--product-image--product-price--product-rating--product-sale-badge--product-sku--product-title.js	262 B
build/product-button-frontend.js	1.92 kB
build/product-button.js	4.17 kB
build/product-categories.js	2.37 kB
build/product-category.js	9.25 kB
build/product-image-frontend.js	1.83 kB
build/product-image.js	4.29 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	974 B
build/product-sale-badge.js	797 B
build/product-search.js	2.63 kB
build/product-sku-frontend.js	1 kB
build/product-sku.js	576 B
build/product-stock-indicator-frontend.js	1.01 kB
build/product-stock-indicator.js	647 B
build/product-summary-frontend.js	1.29 kB
build/product-summary.js	923 B
build/product-tag.js	8.75 kB
build/product-title-frontend.js	1.37 kB
build/product-title.js	3.73 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/rating-filter.js	6.99 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/stock-filter.js	7.71 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.4 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.24 kB
build/vendors--checkout-blocks/billing-address--checkout-blocks/shipping-address-frontend.js	5.44 kB
build/vendors--checkout-blocks/shipping-method-frontend.js	12 kB
build/wc-blocks-data.js	21.8 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.73 kB
build/wc-blocks-style-rtl.css	27.5 kB
build/wc-blocks-style.css	27.5 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	63.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}

[danielwrobert]

This is a very nice enhancement! Thanks for working on it!

Everything LGTM - code looks good and straightforward, tests as described! 🚀