diff --git a/packages/block-editor/src/components/inserter/block-patterns-tab/pattern-category-preview-panel.js b/packages/block-editor/src/components/inserter/block-patterns-tab/pattern-category-preview-panel.js
index f548a4632eb35..7a5a9eb8d989e 100644
--- a/packages/block-editor/src/components/inserter/block-patterns-tab/pattern-category-preview-panel.js
+++ b/packages/block-editor/src/components/inserter/block-patterns-tab/pattern-category-preview-panel.js
@@ -10,6 +10,7 @@ import { focus } from '@wordpress/dom';
  */
 
 import { PatternCategoryPreviews } from './pattern-category-previews';
+import { useZoomOut } from '../../../hooks/use-zoom-out';
 
 export function PatternCategoryPreviewPanel( {
 	rootClientId,
@@ -29,6 +30,10 @@ export function PatternCategoryPreviewPanel( {
 		return () => clearTimeout( timeout );
 	}, [ category ] );
 
+	// Move to zoom out mode when this component is mounted
+	// and back to the previous mode when unmounted.
+	useZoomOut();
+
 	return (
 		<div
 			ref={ container }
diff --git a/packages/block-editor/src/components/inserter/block-patterns-tab/pattern-category-previews.js b/packages/block-editor/src/components/inserter/block-patterns-tab/pattern-category-previews.js
index b66535f76eff2..7b8fd8e76202a 100644
--- a/packages/block-editor/src/components/inserter/block-patterns-tab/pattern-category-previews.js
+++ b/packages/block-editor/src/components/inserter/block-patterns-tab/pattern-category-previews.js
@@ -32,7 +32,6 @@ import {
 	myPatternsCategory,
 	INSERTER_PATTERN_TYPES,
 } from './utils';
-import { useZoomOut } from '../../../hooks/use-zoom-out';
 
 const noop = () => {};
 
@@ -50,10 +49,6 @@ export function PatternCategoryPreviews( {
 	const [ patternSyncFilter, setPatternSyncFilter ] = useState( 'all' );
 	const [ patternSourceFilter, setPatternSourceFilter ] = useState( 'all' );
 
-	// Move to zoom out mode when this component is mounted
-	// and back to the previous mode when unmounted.
-	useZoomOut();
-
 	const availableCategories = usePatternCategories(
 		rootClientId,
 		patternSourceFilter
diff --git a/packages/block-editor/src/hooks/use-zoom-out.js b/packages/block-editor/src/hooks/use-zoom-out.js
index 8c2aff8819b63..84603c0161dd4 100644
--- a/packages/block-editor/src/hooks/use-zoom-out.js
+++ b/packages/block-editor/src/hooks/use-zoom-out.js
@@ -2,7 +2,7 @@
  * WordPress dependencies
  */
 import { useSelect, useDispatch } from '@wordpress/data';
-import { useEffect, useRef } from '@wordpress/element';
+import { useEffect } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -20,26 +20,15 @@ export function useZoomOut() {
 		};
 	}, [] );
 
-	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 ] );
-
 	// Intentionality left without any dependency.
-	// This effect should only run the first time the component is rendered.
+	// This effect should only run when the component is rendered and unmounted.
 	// The effect opens the zoom-out view if it is not open before when applying a style variation.
 	useEffect( () => {
 		if ( mode !== 'zoom-out' ) {
 			__unstableSetEditorMode( 'zoom-out' );
-			shouldRevertInitialMode.current = true;
 			return () => {
-				// if there were not mode changes revert to the initial mode when unmounting.
-				if ( shouldRevertInitialMode.current ) {
-					__unstableSetEditorMode( mode );
-				}
+				// Revert to original mode
+				__unstableSetEditorMode( mode );
 			};
 		}
 		// eslint-disable-next-line react-hooks/exhaustive-deps