From a2cecabd58780e15e296e293747ef84341d7c8f3 Mon Sep 17 00:00:00 2001
From: Andrei Draganescu <andrei.draganescu@automattic.com>
Date: Mon, 18 Mar 2024 18:11:10 +0200
Subject: [PATCH] put block editor in zoom out mode when inserting patterns

---
 packages/block-editor/src/components/inserter/menu.js | 10 +++++++++-
 packages/edit-site/src/components/editor/index.js     |  9 ++++++++-
 2 files changed, 17 insertions(+), 2 deletions(-)

diff --git a/packages/block-editor/src/components/inserter/menu.js b/packages/block-editor/src/components/inserter/menu.js
index 6a38e52cbffba1..e9b11c3fbb8cb0 100644
--- a/packages/block-editor/src/components/inserter/menu.js
+++ b/packages/block-editor/src/components/inserter/menu.js
@@ -16,7 +16,7 @@ import {
 } from '@wordpress/element';
 import { VisuallyHidden, SearchControl, Popover } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
-import { useSelect } from '@wordpress/data';
+import { useSelect, useDispatch } from '@wordpress/data';
 import { useDebouncedInput } from '@wordpress/compose';
 
 /**
@@ -57,6 +57,8 @@ function InserterMenu(
 	const [ selectedMediaCategory, setSelectedMediaCategory ] =
 		useState( null );
 	const [ selectedTab, setSelectedTab ] = useState( null );
+	const { __unstableGetEditorMode } = useSelect( blockEditorStore );
+	const { __unstableSetEditorMode } = useDispatch( blockEditorStore );
 
 	const [ destinationRootClientId, onInsertBlocks, onToggleInsertionPoint ] =
 		useInsertionPoint( {
@@ -213,6 +215,12 @@ function InserterMenu(
 		if ( value !== 'patterns' ) {
 			setSelectedPatternCategory( null );
 		}
+		// Enter the zoom-out mode when selecting the patterns tab and exit otherwise.
+		if ( value === 'patterns' ) {
+			__unstableSetEditorMode( 'zoom-out' );
+		} else if ( __unstableGetEditorMode() === 'zoom-out' ) {
+			__unstableSetEditorMode( 'edit' );
+		}
 		setSelectedTab( value );
 	};
 
diff --git a/packages/edit-site/src/components/editor/index.js b/packages/edit-site/src/components/editor/index.js
index 1512ea5ba3bcd5..f1a9229fc571f4 100644
--- a/packages/edit-site/src/components/editor/index.js
+++ b/packages/edit-site/src/components/editor/index.js
@@ -6,7 +6,7 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
-import { useSelect } from '@wordpress/data';
+import { useSelect, useDispatch } from '@wordpress/data';
 import { Notice } from '@wordpress/components';
 import { useInstanceId, useViewportMatch } from '@wordpress/compose';
 import { store as preferencesStore } from '@wordpress/preferences';
@@ -83,6 +83,9 @@ export default function Editor( { isLoading } ) {
 
 	const isLargeViewport = useViewportMatch( 'medium' );
 
+	const { __unstableSetEditorMode: setBlockEditorMode } =
+		useDispatch( blockEditorStore );
+
 	const {
 		context,
 		contextPost,
@@ -180,6 +183,10 @@ export default function Editor( { isLoading } ) {
 		( ( postWithTemplate && !! contextPost && !! editedPost ) ||
 			( ! postWithTemplate && !! editedPost ) );
 
+	if ( ! shouldShowInserter && blockEditorMode === 'zoom-out' ) {
+		setBlockEditorMode( 'edit' );
+	}
+
 	return (
 		<>
 			{ ! isReady ? <CanvasLoader id={ loadingProgressId } /> : null }