Skip to content

Commit

Permalink
Fix block insertion place after clicking Browse All in the inline ins…
Browse files Browse the repository at this point in the history
…erter (#24285)

* try for insertion point fix

* use getPreviousBlockClientId selector
  • Loading branch information
ntsekouras authored and youknowriad committed Aug 3, 2020
1 parent ced0f4d commit b522ead
Showing 1 changed file with 19 additions and 2 deletions.
21 changes: 19 additions & 2 deletions packages/block-editor/src/components/inserter/quick-inserter.js
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,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';

/**
Expand Down Expand Up @@ -160,12 +160,20 @@ function QuickInserter( {
[]
);

const previousBlockClientId = useSelect(
( select ) =>
select( 'core/block-editor' ).getPreviousBlockClientId( clientId ),
[ clientId ]
);

useEffect( () => {
if ( setInsererIsOpened ) {
setInsererIsOpened( false );
}
}, [ setInsererIsOpened ] );

const { selectBlock } = useDispatch( 'core/block-editor' );

// Announce search results on change
useEffect( () => {
if ( ! filterValue ) {
Expand All @@ -180,6 +188,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 );
setInsererIsOpened( 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.
Expand Down Expand Up @@ -212,7 +229,7 @@ function QuickInserter( {
{ setInsererIsOpened && (
<Button
className="block-editor-inserter__quick-inserter-expand"
onClick={ () => setInsererIsOpened( true ) }
onClick={ onBrowseAll }
aria-label={ __(
'Browse all. This will open the main inserter panel in the editor toolbar.'
) }
Expand Down

0 comments on commit b522ead

Please sign in to comment.