View full zoom out mode canvas while inserting patterns (#59337)

* Add is-zoom-out to top level site editor element * Allow pattern inserter to push zoom out mode canvas * Rename isZoomOut to isZoomOutMode
WordPress · Feb 24, 2024 · 8265e49 · 8265e49
1 parent 9469295
commit 8265e49
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 0 deletions.
diff --git a/packages/block-editor/src/components/inserter/style.scss b/packages/block-editor/src/components/inserter/style.scss
@@ -767,3 +767,13 @@ $block-inserter-tabs-height: 44px;
 		}
 	}
 }
+
+.is-zoom-out {
+	.block-editor-inserter__menu {
+		display: flex;
+	}
+
+	.block-editor-inserter__patterns-category-dialog {
+		position: static;
+	}
+}
diff --git a/packages/edit-site/src/components/layout/index.js b/packages/edit-site/src/components/layout/index.js
@@ -70,6 +70,7 @@ export default function Layout() {
 
 	const {
 		isDistractionFree,
+		isZoomOutMode,
 		hasFixedToolbar,
 		hasBlockSelected,
 		canvasMode,
@@ -96,6 +97,9 @@ export default function Layout() {
 				'core',
 				'distractionFree'
 			),
+			isZoomOutMode:
+				select( blockEditorStore ).__unstableGetEditorMode() ===
+				'zoom-out',
 			hasBlockSelected:
 				select( blockEditorStore ).getBlockSelectionStart(),
 		};
@@ -172,6 +176,7 @@ export default function Layout() {
 						'is-full-canvas': canvasMode === 'edit',
 						'has-fixed-toolbar': hasFixedToolbar,
 						'is-block-toolbar-visible': hasBlockSelected,
+						'is-zoom-out': isZoomOutMode,
 					}
 				) }
 			>