Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix block insertion place after clicking Browse All in the inline inserter #24285

Merged
merged 2 commits into from
Jul 30, 2020
Merged

Fix block insertion place after clicking Browse All in the inline inserter #24285

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
e4cd34e
try for insertion point fix
ntsekouras Jul 30, 2020
5a1524d
use getPreviousBlockClientId selector
ntsekouras Jul 30, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
21 changes: 19 additions & 2 deletions packages/block-editor/src/components/inserter/quick-inserter.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';

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

const previousBlockClientId = useSelect(
( select ) =>
select( 'core/block-editor' ).getPreviousBlockClientId( clientId ),
[ clientId ]
);
ntsekouras marked this conversation as resolved.
Show resolved Hide resolved

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

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

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