diff --git a/packages/block-editor/src/components/inserter/quick-inserter.js b/packages/block-editor/src/components/inserter/quick-inserter.js index 39d31dad3ffe7..456fb533ac467 100644 --- a/packages/block-editor/src/components/inserter/quick-inserter.js +++ b/packages/block-editor/src/components/inserter/quick-inserter.js @@ -14,7 +14,7 @@ import { Button, withSpokenMessages, } from '@wordpress/components'; -import { useSelect } from '@wordpress/data'; +import { useSelect, useDispatch } from '@wordpress/data'; import { LEFT, RIGHT, UP, DOWN, BACKSPACE, ENTER } from '@wordpress/keycodes'; /** @@ -163,12 +163,20 @@ function QuickInserter( { [] ); + const previousBlockClientId = useSelect( + ( select ) => + select( 'core/block-editor' ).getPreviousBlockClientId( clientId ), + [ clientId ] + ); + useEffect( () => { if ( setInserterIsOpened ) { setInserterIsOpened( false ); } }, [ setInserterIsOpened ] ); + const { selectBlock } = useDispatch( 'core/block-editor' ); + // Announce search results on change useEffect( () => { if ( ! filterValue ) { @@ -183,6 +191,15 @@ function QuickInserter( { debouncedSpeak( resultsFoundMessage ); }, [ filterValue, debouncedSpeak ] ); + // When clicking Browse All select the appropriate block so as + // the insertion point can work as expected + const onBrowseAll = () => { + // We have to select the previous block because the menu inserter + // inserts the new block after the selected one. + selectBlock( previousBlockClientId ); + setInserterIsOpened( true ); + }; + // Disable reason (no-autofocus): The inserter menu is a modal display, not one which // is always visible, and one which already incurs this behavior of autoFocus via // Popover's focusOnMount. @@ -218,7 +235,7 @@ function QuickInserter( { { setInserterIsOpened && (