Writing flow: select next block on Enter key #63484
Open
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
added
[Type] Enhancement
|
The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message. To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook. |
|
Size Change: +374 B (+0.02%) Total Size: 1.84 MB
ℹ️ View Unchanged
|
jasmussen
approved these changes
Jul 12, 2024
There was a problem hiding this comment.
Could use a code check, but this is a big win for the writing flow. Here's trunk, in the case of a Page template that has title, featured image, content, Enter does nothing:
In this PR, pressing Enter selects the next block, until you edit content inside the Content block:
Nice work!
This was added, I think by me, as an accessibility enhancement. Please provide clear testing instructions so someone can check the new flow. Currently, I am unsure how to test this. Thanks. |
|
Here's how I tested this. First ensure your "Pages" template has a Title and/or Featured image block after, then a Content block:
Then:
Focus should then be on the next block in the sequence, i.e. if the title block is followed by a featured image, the featured image block should be focused. The purpose is to improve the base writing flow when writing/editing pages in the full-template preview of the site editor. |
ellatrix
force-pushed
the
try/enter-select
branch
from
e99bfba to
d35ec89
Compare
6 tasks
ellatrix
force-pushed
the
try/enter-select
branch
from
cb2bc50 to
1aca4b5
Compare
ellatrix
commented
Dec 18, 2024
| @@ -15,6 +16,115 @@ import { store as blockEditorStore } from '../../store'; | |||
| import { useBlockEditContext } from '../block-edit'; | |||
| import { getMultilineTag } from './utils'; | |||
|
|
|||
| function useEnterRef( props ) { | |||
There was a problem hiding this comment.
Nothing in this whole file has changed, except moving from an onKeyDown React listener to a native DOM one, so that we run it before the default rich text Enter handler.
There was a problem hiding this comment.
It's worth noting that we were actually not using the window listener until a couple of months ago, so it reverts some logic of #54543.
I meant to avoid moving focus when calling |
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.
What?
Fixes #54984.
Whenever a default block cannot be inserted on Enter, select the next block.
The next block means:
Why?
Enter does not do anything useful when a template is locked and no default block can be inserter after the block.
How?
This ended up being a slightly larger refactor.
Testing Instructions
Testing Instructions for Keyboard
In the Site Editor, select the post title. Enter should select the next block, and so on. Generally anytime a block is selected and no default block can be inserted, Enter should select the next block.
Screenshots or screencast