diff --git a/packages/block-editor/src/components/inserter/library.js b/packages/block-editor/src/components/inserter/library.js index d881cad5c27da0..b0262756488dbb 100644 --- a/packages/block-editor/src/components/inserter/library.js +++ b/packages/block-editor/src/components/inserter/library.js @@ -21,6 +21,7 @@ function InserterLibrary( { showInserterHelpPanel, showMostUsedBlocks = false, __experimentalInsertionIndex, + __experimentalFilterValue, onSelect = noop, shouldFocusBlock = false, } ) { @@ -44,6 +45,7 @@ function InserterLibrary( { showInserterHelpPanel={ showInserterHelpPanel } showMostUsedBlocks={ showMostUsedBlocks } __experimentalInsertionIndex={ __experimentalInsertionIndex } + __experimentalFilterValue={ __experimentalFilterValue } shouldFocusBlock={ shouldFocusBlock } /> ); diff --git a/packages/block-editor/src/components/inserter/menu.js b/packages/block-editor/src/components/inserter/menu.js index 19b01b5a66b3eb..0e691f8e4a1950 100644 --- a/packages/block-editor/src/components/inserter/menu.js +++ b/packages/block-editor/src/components/inserter/menu.js @@ -27,9 +27,12 @@ function InserterMenu( { onSelect, showInserterHelpPanel, showMostUsedBlocks, + __experimentalFilterValue = '', shouldFocusBlock = true, } ) { - const [ filterValue, setFilterValue ] = useState( '' ); + const [ filterValue, setFilterValue ] = useState( + __experimentalFilterValue + ); const [ hoveredItem, setHoveredItem ] = useState( null ); const [ selectedPatternCategory, setSelectedPatternCategory ] = useState( null diff --git a/packages/block-editor/src/components/inserter/quick-inserter.js b/packages/block-editor/src/components/inserter/quick-inserter.js index e9060e827a938f..373a82355e75d3 100644 --- a/packages/block-editor/src/components/inserter/quick-inserter.js +++ b/packages/block-editor/src/components/inserter/quick-inserter.js @@ -75,7 +75,7 @@ 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 } ); + setInserterIsOpened( { rootClientId, insertionIndex, filterValue } ); }; return ( diff --git a/packages/e2e-tests/specs/editor/various/inserting-blocks.test.js b/packages/e2e-tests/specs/editor/various/inserting-blocks.test.js index 9670e8e54ae3bb..792ffb8d0e841e 100644 --- a/packages/e2e-tests/specs/editor/various/inserting-blocks.test.js +++ b/packages/e2e-tests/specs/editor/various/inserting-blocks.test.js @@ -11,6 +11,7 @@ import { searchForBlock, setBrowserViewport, showBlockToolbar, + pressKeyWithModifier, } from '@wordpress/e2e-test-utils'; /** @typedef {import('puppeteer').ElementHandle} ElementHandle */ @@ -354,6 +355,28 @@ describe( 'Inserting blocks', () => { expect( await getEditedPostContent() ).toMatchSnapshot(); } ); + it( 'passes the search value in the main inserter when clicking `Browse all`', async () => { + const INSERTER_SEARCH_SELECTOR = + '.block-editor-inserter__search input,.block-editor-inserter__search-input,input.block-editor-inserter__search'; + await insertBlock( 'Group' ); + await insertBlock( 'Paragraph' ); + await page.keyboard.type( 'Text' ); + await page.click( '[data-type="core/group"] [aria-label="Add block"]' ); + await page.waitForSelector( INSERTER_SEARCH_SELECTOR ); + await page.focus( INSERTER_SEARCH_SELECTOR ); + await pressKeyWithModifier( 'primary', 'a' ); + const searchTerm = 'Heading'; + await page.keyboard.type( searchTerm ); + const browseAll = await page.waitForXPath( + '//button[text()="Browse all"]' + ); + await browseAll.click(); + const availableBlocks = await page.$$( + '.block-editor-block-types-list__list-item' + ); + expect( availableBlocks ).toHaveLength( 1 ); + } ); + // Check for regression of https://github.com/WordPress/gutenberg/issues/27586 it( 'closes the main inserter after inserting a single-use block, like the More block', async () => { await insertBlock( 'More' ); diff --git a/packages/edit-post/src/components/secondary-sidebar/inserter-sidebar.js b/packages/edit-post/src/components/secondary-sidebar/inserter-sidebar.js index f5462599215c31..c0f4e79dffddf0 100644 --- a/packages/edit-post/src/components/secondary-sidebar/inserter-sidebar.js +++ b/packages/edit-post/src/components/secondary-sidebar/inserter-sidebar.js @@ -53,6 +53,7 @@ export default function InserterSidebar() { __experimentalInsertionIndex={ insertionPoint.insertionIndex } + __experimentalFilterValue={ insertionPoint.filterValue } /> diff --git a/packages/edit-post/src/store/selectors.js b/packages/edit-post/src/store/selectors.js index e127f6294210a8..0b7a92f4056637 100644 --- a/packages/edit-post/src/store/selectors.js +++ b/packages/edit-post/src/store/selectors.js @@ -338,11 +338,15 @@ export function isInserterOpened( state ) { * * @param {Object} state Global application state. * - * @return {Object} The root client ID and index to insert at. + * @return {Object} The root client ID, index to insert at and starting filter value. */ export function __experimentalGetInsertionPoint( state ) { - const { rootClientId, insertionIndex } = state.blockInserterPanel; - return { rootClientId, insertionIndex }; + const { + rootClientId, + insertionIndex, + filterValue, + } = state.blockInserterPanel; + return { rootClientId, insertionIndex, filterValue }; } /** diff --git a/packages/edit-site/src/components/secondary-sidebar/inserter-sidebar.js b/packages/edit-site/src/components/secondary-sidebar/inserter-sidebar.js index 792a16bcb1aa93..591eb6d05c149b 100644 --- a/packages/edit-site/src/components/secondary-sidebar/inserter-sidebar.js +++ b/packages/edit-site/src/components/secondary-sidebar/inserter-sidebar.js @@ -47,6 +47,7 @@ export default function InserterSidebar() { __experimentalInsertionIndex={ insertionPoint.insertionIndex } + __experimentalFilterValue={ insertionPoint.filterValue } /> diff --git a/packages/edit-site/src/store/selectors.js b/packages/edit-site/src/store/selectors.js index 16f1a711cd2331..7d566b525f01d2 100644 --- a/packages/edit-site/src/store/selectors.js +++ b/packages/edit-site/src/store/selectors.js @@ -239,11 +239,15 @@ export function isInserterOpened( state ) { * * @param {Object} state Global application state. * - * @return {Object} The root client ID and index to insert at. + * @return {Object} The root client ID, index to insert at and starting filter value. */ export function __experimentalGetInsertionPoint( state ) { - const { rootClientId, insertionIndex } = state.blockInserterPanel; - return { rootClientId, insertionIndex }; + const { + rootClientId, + insertionIndex, + filterValue, + } = state.blockInserterPanel; + return { rootClientId, insertionIndex, filterValue }; } /**