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 f91598fb7a61c..505f8d1486372 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 ; -} - -export function PatternCategoryPreviewPanel( props ) { - // When the pattern panel is showing, we want to use zoom out mode - if ( window.__experimentalEnableZoomedOutPatternsTab ) { - return ; - } - - return ; -} diff --git a/packages/block-editor/src/components/inserter/menu.js b/packages/block-editor/src/components/inserter/menu.js index ef741a9b6ac61..24409b7098e94 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;