diff --git a/packages/block-editor/src/components/inserter/menu.js b/packages/block-editor/src/components/inserter/menu.js
index a6d752848538e..0792355ec28a7 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( {
@@ -228,6 +230,14 @@ 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 1d3fca36f5f4c..270c45cc6c188 100644
--- a/packages/edit-site/src/components/editor/index.js
+++ b/packages/edit-site/src/components/editor/index.js
@@ -150,6 +150,10 @@ export default function Editor( { listViewToggleElement, isLoading } ) {
 		};
 	}, [] );
 	const { setRenderingMode } = useDispatch( editorStore );
+	const { __unstableGetEditorMode: getBlockEditorMode } =
+		useSelect( blockEditorStore );
+	const { __unstableSetEditorMode: setBlockEditorMode } =
+		useDispatch( blockEditorStore );
 
 	const isViewMode = canvasMode === 'view';
 	const isEditMode = canvasMode === 'edit';
@@ -202,6 +206,15 @@ export default function Editor( { listViewToggleElement, isLoading } ) {
 		}
 	}, [ canvasMode, postWithTemplate, setRenderingMode ] );
 
+	useEffect(
+		function ExitZoomOutModeWhenInserterClosed() {
+			if ( ! shouldShowInserter && getBlockEditorMode() === 'zoom-out' ) {
+				setBlockEditorMode( 'edit' );
+			}
+		},
+		[ getBlockEditorMode, setBlockEditorMode, shouldShowInserter ]
+	);
+
 	return (
 		<>
 			{ ! isReady ? <CanvasLoader id={ loadingProgressId } /> : null }
diff --git a/packages/edit-site/src/components/secondary-sidebar/inserter-sidebar.js b/packages/edit-site/src/components/secondary-sidebar/inserter-sidebar.js
index 5567bcc382119..1dd346c727239 100644
--- a/packages/edit-site/src/components/secondary-sidebar/inserter-sidebar.js
+++ b/packages/edit-site/src/components/secondary-sidebar/inserter-sidebar.js
@@ -29,6 +29,14 @@ export default function InserterSidebar() {
 	const [ inserterDialogRef, inserterDialogProps ] = useDialog( {
 		onClose: () => setIsInserterOpened( false ),
 		focusOnMount: null,
+		// Don't close the inserter on focus outside.
+		// This is a temporary hack as we figure out the expected interactions
+		// in the zoom-out mode.
+		__unstableOnClose: ( eventName ) => {
+			if ( eventName === 'focus-outside' ) {
+				// Do nothing.
+			}
+		},
 	} );
 
 	const libraryRef = useRef();