diff --git a/packages/block-editor/src/components/inserter/menu.js b/packages/block-editor/src/components/inserter/menu.js index c6d019c8ff9a7..eb0ac5eb19d49 100644 --- a/packages/block-editor/src/components/inserter/menu.js +++ b/packages/block-editor/src/components/inserter/menu.js @@ -170,28 +170,81 @@ function InserterMenu( [ destinationRootClientId, onInsert, onHover ] ); + const searchRef = useRef(); + // TODO: this doesn't work now.. + useImperativeHandle( ref, () => ( { + focusSearch: () => { + searchRef.current?.focus(); + }, + } ) ); + const getCurrentTab = useCallback( ( tab ) => { + const searchControlProps = {}; + let searchResultsProps; + let tabContent; if ( tab.name === 'blocks' ) { - return blocksTab; + searchControlProps.label = __( 'Search for blocks' ); + searchResultsProps = { + showBlockDirectory: true, + maxBlockPatterns: 0, + }; + tabContent = blocksTab; } else if ( tab.name === 'patterns' ) { - return patternsTab; + searchControlProps.label = __( 'Search for patterns' ); + searchResultsProps = { + maxBlockTypes: 0, + }; + tabContent = patternsTab; + } else if ( tab.name === 'reusable' ) { + searchControlProps.label = __( 'Search for blocks' ); + searchResultsProps = { + showBlockDirectory: true, + maxBlockPatterns: 0, + }; + tabContent = reusableBlocksTab; } - return reusableBlocksTab; - }, - [ blocksTab, patternsTab, reusableBlocksTab ] - ); - const searchRef = useRef(); - useImperativeHandle( ref, () => ( { - focusSearch: () => { - searchRef.current.focus(); + return ( + <> + { + if ( hoveredItem ) setHoveredItem( null ); + setFilterValue( value ); + } } + value={ filterValue } + placeholder={ __( 'Search' ) } + ref={ searchRef } + { ...searchControlProps } + /> + { ! filterValue && tabContent } + { !! filterValue && ( +
+ +
+ ) } + + ); }, - } ) ); + [ blocksTab, patternsTab, reusableBlocksTab, filterValue ] + ); const showPatternPanel = selectedTab === 'patterns' && ! filterValue && selectedPatternCategory; - const showAsTabs = ! filterValue && ( showPatterns || hasReusableBlocks ); + const showAsTabs = showPatterns || hasReusableBlocks; return (
@@ -200,34 +253,6 @@ function InserterMenu( 'show-as-tabs': showAsTabs, } ) } > - { - if ( hoveredItem ) setHoveredItem( null ); - setFilterValue( value ); - } } - value={ filterValue } - label={ __( 'Search for blocks and patterns' ) } - placeholder={ __( 'Search' ) } - ref={ searchRef } - /> - { !! filterValue && ( -
- -
- ) } { showAsTabs && (