Update: Invoke zoom out view when navigating on inserter pattern tabs.

packages/block-editor/src/components/inserter/block-patterns-tab.js

@@ -30,6 +30,8 @@ import { focus } from '@wordpress/dom';
 import usePatternsState from './hooks/use-patterns-state';
 import BlockPatternList from '../block-patterns-list';
 import PatternsExplorerModal from './block-patterns-explorer/explorer';
+import { store as blockEditorStore } from '../../store';
+import { useSelect } from '@wordpress/data';
 
 function usePatternsCategories() {
 	const [ allPatterns, allCategories ] = usePatternsState();
@@ -178,7 +180,13 @@ function BlockPatternsTabs( {
 	const [ showPatternsExplorer, setShowPatternsExplorer ] = useState( false );
 	const categories = usePatternsCategories();
 	const isMobile = useViewportMatch( 'medium', '<' );
-
+	const { getSettings } = useSelect( blockEditorStore );
+	useEffect( () => {
+		getSettings().__experimentalOnInserterPatternTabOpen();
+		return () => {
+			getSettings().__experimentalOnInserterPatternTabClose();
+		};
+	}, [] );
 	return (
 		<>
 			{ ! isMobile && (

packages/edit-site/src/components/block-editor/index.js

@@ -39,6 +39,7 @@ import { store as editSiteStore } from '../../store';
 import BlockInspectorButton from './block-inspector-button';
 import BackButton from './back-button';
 import ResizableEditor from './resizable-editor';
+import useOpenZoomOutOnPatterns from './use-open-zoom-out-on-patterns';
 
 const LAYOUT = {
 	type: 'default',
@@ -122,6 +123,11 @@ export default function BlockEditor( { setIsInserterOpen } ) {
 		[ settingsBlockPatternCategories, restBlockPatternCategories ]
 	);
 
+	const [
+		__experimentalOnInserterPatternTabOpen,
+		__experimentalOnInserterPatternTabClose,
+	] = useOpenZoomOutOnPatterns();
+
 	const settings = useMemo( () => {
 		const {
 			__experimentalAdditionalBlockPatterns,
@@ -133,8 +139,16 @@ export default function BlockEditor( { setIsInserterOpen } ) {
 			...restStoredSettings,
 			__experimentalBlockPatterns: blockPatterns,
 			__experimentalBlockPatternCategories: blockPatternCategories,
+			__experimentalOnInserterPatternTabOpen,
+			__experimentalOnInserterPatternTabClose,
 		};
-	}, [ storedSettings, blockPatterns, blockPatternCategories ] );
+	}, [
+		storedSettings,
+		blockPatterns,
+		blockPatternCategories,
+		__experimentalOnInserterPatternTabOpen,
+		__experimentalOnInserterPatternTabClose,
+	] );
 
 	const [ blocks, onInput, onChange ] = useEntityBlockEditor(
 		'postType',

packages/edit-site/src/components/block-editor/use-open-zoom-out-on-patterns.js

@@ -0,0 +1,34 @@
+/**
+ * WordPress dependencies
+ */
+import { useSelect, useDispatch } from '@wordpress/data';
+import { useCallback, useRef, useEffect } from '@wordpress/element';
+import { store as blockEditorStore } from '@wordpress/block-editor';
+
+export default function useOpenZoomOutOnPatterns() {
+	const { mode } = useSelect( ( select ) => {
+		return {
+			mode: select( blockEditorStore ).__unstableGetEditorMode(),
+		};
+	}, [] );
+	const { __unstableSetEditorMode } = useDispatch( blockEditorStore );
+	const shouldRevertInitialMode = useRef( null );
+	useEffect( () => {
+		// ignore changes to zoom-out mode as we explictily change to it on mount.
+		if ( mode !== 'zoom-out' ) {
+			shouldRevertInitialMode.current = false;
+		}
+	}, [ mode ] );
+	return [
+		useCallback( () => {
+			__unstableSetEditorMode( 'zoom-out' );
+			shouldRevertInitialMode.current = true;
+		}, [] ),
+		useCallback( () => {
+			// if there were not mode changes revert to the initial mode when unmounting.
+			if ( shouldRevertInitialMode.current ) {
+				__unstableSetEditorMode( mode );
+			}
+		}, [] ),
+	];
+}