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

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

@@ -23,13 +23,15 @@ import {
 } from '@wordpress/components';
 import { Icon, chevronRight, chevronLeft } from '@wordpress/icons';
 import { focus } from '@wordpress/dom';
+import { useSelect } from '@wordpress/data';
 
 /**
  * Internal dependencies
  */
 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';
 
 function usePatternsCategories() {
 	const [ allPatterns, allCategories ] = usePatternsState();
@@ -97,6 +99,20 @@ export function BlockPatternsCategoryDialog( {
 		return () => clearTimeout( timeout );
 	}, [ category ] );
 
+	const { getSettings } = useSelect( blockEditorStore );
+	useEffect( () => {
+		if ( getSettings().__experimentalOnInserterPatternTabCategoryOpen ) {
+			getSettings().__experimentalOnInserterPatternTabCategoryOpen();
+		}
+		return () => {
+			if (
+				getSettings().__experimentalOnInserterPatternTabCategoryClose
+			) {
+				return getSettings().__experimentalOnInserterPatternTabCategoryClose();
+			}
+		};
+	}, [] );
+
 	return (
 		<div
 			ref={ container }

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 [
+		__experimentalOnInserterPatternTabCategoryOpen,
+		__experimentalOnInserterPatternTabCategoryClose,
+	] = useOpenZoomOutOnPatterns();
+
 	const settings = useMemo( () => {
 		const {
 			__experimentalAdditionalBlockPatterns,
@@ -133,8 +139,16 @@ export default function BlockEditor( { setIsInserterOpen } ) {
 			...restStoredSettings,
 			__experimentalBlockPatterns: blockPatterns,
 			__experimentalBlockPatternCategories: blockPatternCategories,
+			__experimentalOnInserterPatternTabCategoryOpen,
+			__experimentalOnInserterPatternTabCategoryClose,
 		};
-	}, [ storedSettings, blockPatterns, blockPatternCategories ] );
+	}, [
+		storedSettings,
+		blockPatterns,
+		blockPatternCategories,
+		__experimentalOnInserterPatternTabCategoryOpen,
+		__experimentalOnInserterPatternTabCategoryClose,
+	] );
 
 	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 );
+			}
+		}, [] ),
+	];
+}