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

packages/block-editor/src/components/inserter/library.js

@@ -2,7 +2,6 @@
  * WordPress dependencies
  */
 import { useSelect } from '@wordpress/data';
-import { forwardRef } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -12,20 +11,18 @@ import { store as blockEditorStore } from '../../store';
 
 const noop = () => {};
 
-function InserterLibrary(
- {
- rootClientId,
- clientId,
- isAppender,
- showInserterHelpPanel,
- showMostUsedBlocks = false,
- __experimentalInsertionIndex,
- __experimentalFilterValue,
- onSelect = noop,
- shouldFocusBlock = false,
- },
- ref
-) {
+function InserterLibrary( {
+ rootClientId,
+ clientId,
+ isAppender,
+ showInserterHelpPanel,
+ showMostUsedBlocks = false,
+ __experimentalInsertionIndex,
+ __experimentalFilterValue,
+ initialTabName,
+ onSelect = noop,
+ shouldFocusBlock = false,
+} ) {
  const { destinationRootClientId, prioritizePatterns } = useSelect(
  ( select ) => {
  const { getBlockRootClientId, getSettings } =
@@ -52,11 +49,11 @@ function InserterLibrary(
  showMostUsedBlocks={ showMostUsedBlocks }
  __experimentalInsertionIndex={ __experimentalInsertionIndex }
  __experimentalFilterValue={ __experimentalFilterValue }
+ initialTabName={ initialTabName }
  shouldFocusBlock={ shouldFocusBlock }
  prioritizePatterns={ prioritizePatterns }
- ref={ ref }
  />
  );
 }
 
-export default forwardRef( InserterLibrary );
+export default InserterLibrary;

packages/block-editor/src/components/inserter/menu.js

@@ -7,12 +7,11 @@ import classnames from 'classnames';
  * WordPress dependencies
  */
 import {
- forwardRef,
  useState,
  useCallback,
  useMemo,
- useImperativeHandle,
  useRef,
+ useEffect,
 } from '@wordpress/element';
 import { VisuallyHidden, SearchControl } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
@@ -33,25 +32,23 @@ import useInsertionPoint from './hooks/use-insertion-point';
 import InserterTabs from './tabs';
 import { store as blockEditorStore } from '../../store';
 
-function InserterMenu(
- {
- rootClientId,
- clientId,
- isAppender,
- __experimentalInsertionIndex,
- onSelect,
- showInserterHelpPanel,
- showMostUsedBlocks,
- __experimentalFilterValue = '',
- shouldFocusBlock = true,
- prioritizePatterns,
- },
- ref
-) {
+function InserterMenu( {
+ rootClientId,
+ clientId,
+ isAppender,
+ __experimentalInsertionIndex,
+ onSelect,
+ showInserterHelpPanel,
+ showMostUsedBlocks,
+ __experimentalFilterValue = '',
+ initialTabName,
+ shouldFocusBlock = true,
+ prioritizePatterns,
+} ) {
  const [ filterValue, setFilterValue ] = useState(
  __experimentalFilterValue
  );
- const [ hoveredItem, setHoveredItem ] = useState( null );
+ const [ hoveredItem, setHoveredItem ] = useState();
  const [ selectedPatternCategory, setSelectedPatternCategory ] =
  useState( null );
  const [ selectedTab, setSelectedTab ] = useState( null );
@@ -170,28 +167,79 @@ function InserterMenu(
  [ destinationRootClientId, onInsert, onHover ]
  );
 
+ const searchRef = useRef();
+ useEffect( () => {
+ searchRef.current?.focus();
+ }, [ selectedTab ] );
+
  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>
+ ) }
+ </>
+ );
  },
- } ) );
+ // TODO: check/add deps..
+ [ 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,47 +248,20 @@ 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 }
  showReusableBlocks={ hasReusableBlocks }
  prioritizePatterns={ prioritizePatterns }
+ initialTabName={ initialTabName }
  onSelect={ setSelectedTab }
  >
  { getCurrentTab }
  </InserterTabs>
  ) }
- { ! filterValue && ! showAsTabs && (
+ { ! showAsTabs && (
  <div className="block-editor-inserter__no-tab-container">
- { blocksTab }
+ { getCurrentTab( { name: 'blocks' } ) }
  </div>
  ) }
  </div>
@@ -258,4 +279,4 @@ function InserterMenu(
  );
 }
 
-export default forwardRef( InserterMenu );
+export default InserterMenu;

packages/block-editor/src/components/inserter/quick-inserter.js

@@ -14,7 +14,10 @@ import { useSelect } from '@wordpress/data';
 /**
  * Internal dependencies
  */
-import InserterSearchResults from './search-results';
+import {
+ default as InserterSearchResults,
+ useFilteredBlockPatterns,
+} from './search-results';
 import useInsertionPoint from './hooks/use-insertion-point';
 import usePatternsState from './hooks/use-patterns-state';
 import useBlockTypesState from './hooks/use-block-types-state';
@@ -80,7 +83,14 @@ export default function QuickInserter( {
  // When clicking Browse All select the appropriate block so as
  // the insertion point can work as expected.
  const onBrowseAll = () => {
- setInserterIsOpened( { rootClientId, insertionIndex, filterValue } );
+ setInserterIsOpened( {
+ rootClientId,
+ insertionIndex,
+ filterValue,
+ initialTabName: !! filteredBlockPatterns.length
+ ? 'patterns'
+ : 'blocks',
+ } );
  };
 
  let maxBlockPatterns = 0;
@@ -90,6 +100,15 @@ export default function QuickInserter( {
  : SHOWN_BLOCK_PATTERNS;
  }
 
+ // We need to know if the search results will contain at least
+ // one pattern. If they do, select the `patterns` tab when
+ // `Browse All` button is clicked.
+ const filteredBlockPatterns = useFilteredBlockPatterns(
+ filterValue,
+ patterns,
+ maxBlockPatterns
+ );
+
  return (
  <div
  className={ classnames( 'block-editor-inserter__quick-inserter', {

packages/block-editor/src/components/inserter/search-results.js

@@ -35,6 +35,22 @@ const INITIAL_INSERTER_RESULTS = 9;
  */
 const EMPTY_ARRAY = [];
 
+export function useFilteredBlockPatterns(
+ filterValue,
+ patterns,
+ maxBlockPatterns
+) {
+ return useMemo( () => {
+ if ( maxBlockPatterns === 0 ) {
+ return [];
+ }
+ const results = searchItems( patterns, filterValue );
+ return maxBlockPatterns !== undefined
+ ? results.slice( 0, maxBlockPatterns )
+ : results;
+ }, [ filterValue, patterns, maxBlockPatterns ] );
+}
+
 function InserterSearchResults( {
  filterValue,
  onSelect,
@@ -71,15 +87,11 @@ function InserterSearchResults( {
  destinationRootClientId
  );
 
- const filteredBlockPatterns = useMemo( () => {
- if ( maxBlockPatterns === 0 ) {
- return [];
- }
- const results = searchItems( patterns, filterValue );
- return maxBlockPatterns !== undefined
- ? results.slice( 0, maxBlockPatterns )
- : results;
- }, [ filterValue, patterns, maxBlockPatterns ] );
+ const filteredBlockPatterns = useFilteredBlockPatterns(
+ filterValue,
+ patterns,
+ maxBlockPatterns
+ );
 
  let maxBlockTypesToShow = maxBlockTypes;
  if ( prioritizePatterns && filteredBlockPatterns.length > 2 ) {

packages/block-editor/src/components/inserter/style.scss

@@ -355,6 +355,12 @@ $block-inserter-tabs-height: 44px;
  @include break-medium {
  width: $block-inserter-width;
  }
+
+ .block-editor-inserter__quick-inserter-patterns {
+ .block-editor-block-patterns-list {
+ grid-template-columns: 1fr 1fr;
+ }
+ }
 }
 
 .block-editor-inserter__quick-inserter-results .block-editor-inserter__panel-header {
@@ -371,7 +377,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;

packages/block-editor/src/components/inserter/tabs.js

@@ -27,6 +27,7 @@ function InserterTabs( {
  showReusableBlocks = false,
  onSelect,
  prioritizePatterns,
+ initialTabName,
 } ) {
  const tabs = useMemo( () => {
  const tempTabs = [];
@@ -56,6 +57,7 @@ function InserterTabs( {
  className="block-editor-inserter__tabs"
  tabs={ tabs }
  onSelect={ onSelect }
+ initialTabName={ initialTabName }
  >
  { children }
  </TabPanel>

packages/e2e-test-utils/CHANGELOG.md

@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+- Add an optional `options` param to `insertBlock` and `searchForBlocks` which can contain the `checkSelectedTab` property that defaults to `false`. If we set this to `true` there will be a check if the block types tab is selected, and if not it will select it. This is useful in cases where the block types tab is not the first tab in the global inserter ([#45203](https://github.com/WordPress/gutenberg/pull/45203)).
+
 ## 8.4.0 (2022-10-19)
 
 ## 8.3.0 (2022-10-05)