Zoom Out: Run the hook in the inserter component so it doesn't keep r…

…unning on each mount of the pattern category preview panel (#63315) Co-authored-by: scruffian <[email protected]> Co-authored-by: jeryj <[email protected]> Co-authored-by: Mamaduka <[email protected]> Co-authored-by: MaggieCabrera <[email protected]>
WordPress · Jul 9, 2024 · f548ea3 · f548ea3
1 parent 9a8be7c
commit f548ea3
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 16 deletions.
diff --git a/...block-editor/src/components/inserter/block-patterns-tab/pattern-category-preview-panel.js b/...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
@@ -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;