diff --git a/packages/block-editor/src/components/inserter/menu.js b/packages/block-editor/src/components/inserter/menu.js index 672f625465117..b79a44f6ea942 100644 --- a/packages/block-editor/src/components/inserter/menu.js +++ b/packages/block-editor/src/components/inserter/menu.js @@ -118,14 +118,15 @@ function InserterMenu( const showPatternPanel = selectedTab === 'patterns' && ! delayedFilterValue && - selectedPatternCategory; + !! selectedPatternCategory; - const showMediaPanel = selectedTab === 'media' && selectedMediaCategory; + const showMediaPanel = selectedTab === 'media' && !! selectedMediaCategory; const inserterSearch = useMemo( () => { if ( selectedTab === 'media' ) { return null; } + return ( <> ( + const blocksTab = useMemo( () => { + return ( <> - { inserterSearch } - { ! delayedFilterValue && ( - <> -
- -
- { showInserterHelpPanel && ( -
- - { __( 'A tip for using the block editor' ) } - - -
- ) } - +
+ +
+ { showInserterHelpPanel && ( +
+ + { __( 'A tip for using the block editor' ) } + + +
) } - ), - [ - destinationRootClientId, - onInsert, - onHover, - showMostUsedBlocks, - showInserterHelpPanel, - inserterSearch, - delayedFilterValue, - ] - ); + ); + }, [ + destinationRootClientId, + onInsert, + onHover, + showMostUsedBlocks, + showInserterHelpPanel, + ] ); - const patternsTab = useMemo( - () => ( - <> - { inserterSearch } - { ! delayedFilterValue && ( - { + return ( + + { showPatternPanel && ( + - { showPatternPanel && ( - - ) } - + onHover={ onHoverPattern } + category={ selectedPatternCategory } + patternFilter={ patternFilter } + showTitlesAsTooltip + /> ) } - - ), - [ - destinationRootClientId, - onHoverPattern, - onInsertPattern, - onClickPatternCategory, - patternFilter, - selectedPatternCategory, - showPatternPanel, - inserterSearch, - delayedFilterValue, - ] - ); + + ); + }, [ + destinationRootClientId, + onHoverPattern, + onInsertPattern, + onClickPatternCategory, + patternFilter, + selectedPatternCategory, + showPatternPanel, + ] ); - const mediaTab = useMemo( - () => ( + const mediaTab = useMemo( () => { + return ( ) } - ), - [ - destinationRootClientId, - onInsert, - selectedMediaCategory, - setSelectedMediaCategory, - showMediaPanel, - ] - ); - - const inserterTabsContents = useMemo( - () => ( { - blocks: blocksTab, - patterns: patternsTab, - media: mediaTab, - } ), - [ blocksTab, mediaTab, patternsTab ] - ); + ); + }, [ + destinationRootClientId, + onInsert, + selectedMediaCategory, + setSelectedMediaCategory, + showMediaPanel, + ] ); // When the pattern panel is showing, we want to use zoom out mode useZoomOut( showPatternPanel ); @@ -318,11 +293,16 @@ function InserterMenu( ref={ ref } >
- + + { inserterSearch } + { selectedTab === 'blocks' && + ! delayedFilterValue && + blocksTab } + { selectedTab === 'patterns' && + ! delayedFilterValue && + patternsTab } + { selectedTab === 'media' && mediaTab } +
{ showInserterHelpPanel && hoveredItem && ( - { tabsContents[ tab.name ] } + { children } ) ) }