Fix zoom out view toggling issue when navigating pattern categories i…

…n the inserter

packages/block-editor/src/components/inserter/block-patterns-tab/pattern-category-preview-panel.js

@@ -2,9 +2,8 @@
  * Internal dependencies
  */
 import { PatternCategoryPreviews } from './pattern-category-previews';
-import { useZoomOut } from '../../../hooks/use-zoom-out';
 
-function PatternCategoryPreviewPanelInner( {
+export function PatternCategoryPreviewPanel( {
 	rootClientId,
 	onInsert,
 	onHover,
@@ -24,17 +23,3 @@ function PatternCategoryPreviewPanelInner( {
 		/>
 	);
 }
-
-function PatternCategoryPreviewPanelWithZoomOut( props ) {
-	useZoomOut();
-	return <PatternCategoryPreviewPanelInner { ...props } />;
-}
-
-export function PatternCategoryPreviewPanel( props ) {
-	// When the pattern panel is showing, we want to use zoom out mode
-	if ( window.__experimentalEnableZoomedOutPatternsTab ) {
-		return <PatternCategoryPreviewPanelWithZoomOut { ...props } />;
-	}
-
-	return <PatternCategoryPreviewPanelInner { ...props } />;
-}

packages/block-editor/src/components/inserter/menu.js

@@ -32,6 +32,14 @@ import InserterSearchResults from './search-results';
 import useInsertionPoint from './hooks/use-insertion-point';
 import InserterTabs from './tabs';
 import { store as blockEditorStore } from '../../store';
+import { useZoomOut } from '../../hooks/use-zoom-out';
+
+const ZoomOutHandler = ( { children, showPatternPanel } ) => {
+	// When the pattern panel is showing, we want to use zoom out mode
+	useZoomOut( showPatternPanel );
+
+	return <>{ children }</>;
+};
 
 const NOOP = () => {};
 function InserterMenu(
@@ -306,7 +314,7 @@ function InserterMenu(
 		}
 	}, [] );
 
-	return (
+	const menuContent = (
 		<div
 			className={ clsx( 'block-editor-inserter__menu', {
 				'show-panel': showPatternPanel || showMediaPanel,
@@ -344,6 +352,18 @@ function InserterMenu(
 			) }
 		</div>
 	);
+
+	return (
+		<>
+			{ window.__experimentalEnableZoomedOutPatternsTab ? (
+				<ZoomOutHandler showPatternPanel={ showPatternPanel }>
+					{ menuContent }
+				</ZoomOutHandler>
+			) : (
+				menuContent
+			) }
+		</>
+	);
 }
 
 export const PrivateInserterMenu = forwardRef( InserterMenu );