Navigate regions: use React events for shortcuts (portal bubbles & contextual) #33633
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
ellatrix
requested review from
adamziel,
ajitbohra,
chrisvanpatten,
draganescu,
kevin940726,
noisysocks,
talldan and
tellthemachines
as code owners
|
Size Change: -82 B (0%) Total Size: 1.07 MB
ℹ️ View Unchanged
|
ellatrix
commented
Jul 24, 2021
|
|
||
| useEffect( () => { |
There was a problem hiding this comment.
We should be using useRefEffect here because it will be called when the ref changes.
|
I actually think region navigation shortcuts should be global and just catch all events on |
youknowriad
reviewed
Jul 28, 2021
Comment on lines
+79
to
+93
| onKeyDown( event ) { | ||
| if ( | ||
| shortcuts.previous.some( ( { modifier, character } ) => { | ||
| return isKeyboardEvent[ modifier ]( event, character ); | ||
| } ) | ||
| ) { | ||
| focusRegion( -1 ); | ||
| } else if ( | ||
| shortcuts.next.some( ( { modifier, character } ) => { | ||
| return isKeyboardEvent[ modifier ]( event, character ); | ||
| } ) | ||
| ) { | ||
| focusRegion( 1 ); | ||
| } | ||
| }, |
There was a problem hiding this comment.
I think if this becomes the way to write shortcuts, we'll probably need better APIs to make this more friendly. As a shortcut developer, I know three things: the shortcut combination, the element on which to apply it and the callback.
There was a problem hiding this comment.
I'll think a bit more about how we could simplify connecting this with React events.
There was a problem hiding this comment.
Yes, we'll most likely need a better API. Currently we have an API to change existing shortcut combinations, but not to add them to a certain region. Based on the section (global/editor, block, text etc.) we can add it to the right element.
youknowriad
approved these changes
Jul 28, 2021
7 tasks
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Description
Similar to #32323.
Moves shortcut handlers from native events to React events for two reasons:
document). This is important because you may have other things on the page beside the block editor, or multiple block editors. Shortcuts should only work if focus is within a certain context. Using React evens works nicely because they bubble both through the iframe and other portals such as the inspector.How has this been tested?
Screenshots
Types of changes
Checklist:
*.native.jsfiles for terms that need renaming or removal).