From 2dc0a529a02737a2f4b5368507b986109d5d031a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Albert=20Juh=C3=A9=20Lluveras?= <contact@albertjuhe.com>
Date: Fri, 14 Apr 2023 10:44:09 +0200
Subject: [PATCH] Display Mini Cart overlay in template part editor (#9014)

---
 .../mini-cart/mini-cart-contents/edit.tsx     | 28 ++++++++++++-------
 .../mini-cart/mini-cart-contents/editor.scss  | 13 ++++++---
 2 files changed, 27 insertions(+), 14 deletions(-)

diff --git a/assets/js/blocks/mini-cart/mini-cart-contents/edit.tsx b/assets/js/blocks/mini-cart/mini-cart-contents/edit.tsx
index 3f9fbdd3f3d..775b7be6948 100644
--- a/assets/js/blocks/mini-cart/mini-cart-contents/edit.tsx
+++ b/assets/js/blocks/mini-cart/mini-cart-contents/edit.tsx
@@ -123,7 +123,7 @@ const Edit = ( {
 	}, [] );
 
 	return (
-		<div { ...blockProps }>
+		<>
 			<InspectorControls key="inspector">
 				<PanelBody
 					title={ __( 'Dimensions', 'woo-gutenberg-products-block' ) }
@@ -144,15 +144,23 @@ const Edit = ( {
 					/>
 				</PanelBody>
 			</InspectorControls>
-			<EditorProvider currentView={ currentView }>
-				<InnerBlocks
-					allowedBlocks={ ALLOWED_BLOCKS }
-					template={ defaultTemplate }
-					templateLock={ false }
-				/>
-			</EditorProvider>
-			<MiniCartInnerBlocksStyle style={ blockProps.style } />
-		</div>
+			<div
+				className="wc-block-components-drawer__screen-overlay"
+				aria-hidden="true"
+			></div>
+			<div className="wc-block-editor-mini-cart-contents__wrapper">
+				<div { ...blockProps }>
+					<EditorProvider currentView={ currentView }>
+						<InnerBlocks
+							allowedBlocks={ ALLOWED_BLOCKS }
+							template={ defaultTemplate }
+							templateLock={ false }
+						/>
+					</EditorProvider>
+					<MiniCartInnerBlocksStyle style={ blockProps.style } />
+				</div>
+			</div>
+		</>
 	);
 };
 
diff --git a/assets/js/blocks/mini-cart/mini-cart-contents/editor.scss b/assets/js/blocks/mini-cart/mini-cart-contents/editor.scss
index 8799739d463..680b0d163bf 100644
--- a/assets/js/blocks/mini-cart/mini-cart-contents/editor.scss
+++ b/assets/js/blocks/mini-cart/mini-cart-contents/editor.scss
@@ -1,8 +1,13 @@
-.editor-styles-wrapper .wp-block-woocommerce-mini-cart-contents {
-	/* We need to override the margin top here to simulate the layout of
-	the mini cart contents on the front end. */
-	margin: 0 auto !important;
+// Extra classes added for specificity, so we get rid of a top margin added by GB.
+.editor-styles-wrapper .wc-block-editor-mini-cart-contents__wrapper.wc-block-editor-mini-cart-contents__wrapper {
+	display: flex;
+	justify-content: center;
+	margin: 0;
+	position: relative;
+	z-index: 9999;
+}
 
+.editor-styles-wrapper .wp-block-woocommerce-mini-cart-contents {
 	.wp-block-woocommerce-empty-mini-cart-contents-block[hidden],
 	.wp-block-woocommerce-filled-mini-cart-contents-block[hidden] {
 		display: none;