put block editor in zoom out mode when inserting patterns

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 );
 	};
 

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 }