From b1ff9bd43d9a05f65c62322133afaf477185ec7a Mon Sep 17 00:00:00 2001
From: Ben Dwyer <ben@scruffian.com>
Date: Tue, 9 Jul 2024 16:03:17 +0100
Subject: [PATCH] Zoom Out: Run the hook in the inserter component so it
 doesn't keep running on each mount of the pattern category preview panel

---
 .../pattern-category-preview-panel.js           | 17 +----------------
 .../src/components/inserter/menu.js             |  6 ++++++
 2 files changed, 7 insertions(+), 16 deletions(-)

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 f91598fb7a61cc..505f8d14863729 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
@@ -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 } />;
-}
diff --git a/packages/block-editor/src/components/inserter/menu.js b/packages/block-editor/src/components/inserter/menu.js
index ef741a9b6ac61e..24409b7098e941 100644
--- a/packages/block-editor/src/components/inserter/menu.js
+++ b/packages/block-editor/src/components/inserter/menu.js
@@ -32,6 +32,7 @@ import InserterSearchResults from './search-results';
 import useInsertionPoint from './hooks/use-insertion-point';
 import { store as blockEditorStore } from '../../store';
 import TabbedSidebar from '../tabbed-sidebar';
+import { useZoomOut } from '../../hooks/use-zoom-out';
 
 const NOOP = () => {};
 function InserterMenu(
@@ -145,6 +146,11 @@ function InserterMenu(
 
 	const showMediaPanel = selectedTab === 'media' && !! selectedMediaCategory;
 
+	const showZoomOut =
+		showPatternPanel && window.__experimentalEnableZoomedOutPatternsTab;
+
+	useZoomOut( showZoomOut );
+
 	const inserterSearch = useMemo( () => {
 		if ( selectedTab === 'media' ) {
 			return null;