Display Mini Cart overlay in template part editor (#9014)

woocommerce · Apr 14, 2023 · 2dc0a52 · 2dc0a52
1 parent 9f3da2f
commit 2dc0a52
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 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
@@ -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
@@ -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;