[Experiment - Inserter]: Try search input inside each tab

WordPress · Oct 21, 2022 · 3e195ae · 3e195ae
1 parent 0ad21d5
commit 3e195ae
Show file tree

Hide file tree

Showing 2 changed files with 65 additions and 41 deletions.
diff --git 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 (
+ <>
+ <SearchControl
+ className="block-editor-inserter__search"
+ onChange={ ( value ) => {
+ if ( hoveredItem ) setHoveredItem( null );
+ setFilterValue( value );
+ } }
+ value={ filterValue }
+ placeholder={ __( 'Search' ) }
+ ref={ searchRef }
+ { ...searchControlProps }
+ />
+ { ! filterValue && tabContent }
+ { !! filterValue && (
+ <div className="block-editor-inserter__no-tab-container">
+ <InserterSearchResults
+ filterValue={ filterValue }
+ onSelect={ onSelect }
+ onHover={ onHover }
+ rootClientId={ rootClientId }
+ clientId={ clientId }
+ isAppender={ isAppender }
+ __experimentalInsertionIndex={
+ __experimentalInsertionIndex
+ }
+ shouldFocusBlock={ shouldFocusBlock }
+ { ...searchResultsProps }
+ />
+ </div>
+ ) }
+ </>
+ );
  },
- } ) );
+ [ blocksTab, patternsTab, reusableBlocksTab, filterValue ]
+ );
 
  const showPatternPanel =
  selectedTab === 'patterns' && ! filterValue && selectedPatternCategory;
- const showAsTabs = ! filterValue && ( showPatterns || hasReusableBlocks );
+ const showAsTabs = showPatterns || hasReusableBlocks;
 
  return (
  <div className="block-editor-inserter__menu">
@@ -200,34 +253,6 @@ function InserterMenu(
  'show-as-tabs': showAsTabs,
  } ) }
  >
- <SearchControl
- className="block-editor-inserter__search"
- onChange={ ( value ) => {
- if ( hoveredItem ) setHoveredItem( null );
- setFilterValue( value );
- } }
- value={ filterValue }
- label={ __( 'Search for blocks and patterns' ) }
- placeholder={ __( 'Search' ) }
- ref={ searchRef }
- />
- { !! filterValue && (
- <div className="block-editor-inserter__no-tab-container">
- <InserterSearchResults
- filterValue={ filterValue }
- onSelect={ onSelect }
- onHover={ onHover }
- rootClientId={ rootClientId }
- clientId={ clientId }
- isAppender={ isAppender }
- __experimentalInsertionIndex={
- __experimentalInsertionIndex
- }
- showBlockDirectory
- shouldFocusBlock={ shouldFocusBlock }
- />
- </div>
- ) }
  { showAsTabs && (
  <InserterTabs
  showPatterns={ showPatterns }

diff --git a/packages/block-editor/src/components/inserter/style.scss b/packages/block-editor/src/components/inserter/style.scss
@@ -371,7 +371,6 @@ $block-inserter-tabs-height: 44px;
 .block-editor-inserter__quick-inserter-patterns {
  .block-editor-block-patterns-list {
  display: grid;
- grid-template-columns: 1fr 1fr;
  grid-gap: $grid-unit-10;
  .block-editor-block-patterns-list__list-item {
  margin-bottom: 0;