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

Shortcuts: don't fire keydown handlers outside block editor content area #37326

Closed
wants to merge 5 commits into from
Closed

Shortcuts: don't fire keydown handlers outside block editor content area #37326

Changes from 3 commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
3fc20c2
Prevent block editor keyboard shortcuts where the block editor itself…
ramonjd Dec 13, 2021
82d2bc6
Check for existence of ref element before we try to use it.
ramonjd Dec 14, 2021
9b0c546
Update packages/block-editor/src/components/block-tools/index.js
ramonjd Dec 14, 2021
f82e5b9
Checking for container in the utility method as well. Just in case...
ramonjd Dec 15, 2021
84a3c7c
Pass `bubblesVirtually=false` as a prop to the inspector tools slot s…
ramonjd Dec 16, 2021
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
18 changes: 18 additions & 0 deletions packages/block-editor/src/components/block-tools/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,17 @@ import { store as blockEditorStore } from '../../store';
import BlockContextualToolbar from './block-contextual-toolbar';
import { usePopoverScroll } from './use-popover-scroll';

/**
* Returns true if the container contains the document active element.
*
* @param {HTMLElement} container An HTML element.
*
* @return {boolean} Whether the container contains the currently active element in the document.
*/
const hasFocusWithin = ( container ) => {
return !! container?.contains( container?.ownerDocument?.activeElement );
ramonjd marked this conversation as resolved.
Show resolved Hide resolved
};

/**
* Renders block tools (the block toolbar, select/navigation mode toolbar, the
* insertion point and a slot for the inline rich text toolbar). Must be wrapped
Expand Down Expand Up @@ -54,6 +65,13 @@ export default function BlockTools( {
} = useDispatch( blockEditorStore );

function onKeyDown( event ) {
if (
__unstableContentRef?.current &&
! hasFocusWithin( __unstableContentRef?.current )
) {
return;
}

if ( isMatch( 'core/block-editor/move-up', event ) ) {
const clientIds = getSelectedBlockClientIds();
if ( clientIds.length ) {
Expand Down