Refactor making space for side panel by using :after

WordPress · Mar 29, 2024 · 284827c · 284827c
1 parent 6dc5836
commit 284827c
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 8 deletions.
diff --git a/packages/block-editor/src/components/inserter/menu.js b/packages/block-editor/src/components/inserter/menu.js
@@ -237,7 +237,11 @@ function InserterMenu(
 	);
 
 	return (
-		<div className="block-editor-inserter__menu">
+		<div
+			className={ classnames( 'block-editor-inserter__menu', {
+				'show-panel': showPatternPanel,
+			} ) }
+		>
 			<div
 				className={ classnames( 'block-editor-inserter__main-area', {
 					'show-as-tabs': showAsTabs,
@@ -305,9 +309,6 @@ function InserterMenu(
 					<InserterPreviewPanel item={ hoveredItem } />
 				</Popover>
 			) }
-			{ showPatternPanel && (
-				<div className="block-editor-inserter__pattern-panel-placeholder" />
-			) }
 		</div>
 	);
 }

diff --git a/packages/block-editor/src/components/inserter/style.scss b/packages/block-editor/src/components/inserter/style.scss
@@ -781,10 +781,14 @@ $block-inserter-tabs-height: 44px;
 		display: flex;
 	}
 
-	.block-editor-inserter__pattern-panel-placeholder {
-		display: block;
-		width: 300px;
-		height: 100%;
+	.show-panel::after {
+		// Makes space for the inserter flyout panel
+		@include break-medium {
+			content: "";
+			display: block;
+			width: 300px;
+			height: 100%;
+		}
 	}
 
 	.block-editor-inserter__media-dialog {