Gutenberg: Arrowkeys should navigate between blocks

[jasmussen]

As in https://wordpress.github.io/gutenberg/tinymce-per-block/, try to:

• put cursor inside a text block
• arrow key to the end of it
• arrow key further downwards

Expected result is to arrow key into the next block.

[ellatrix]

I think this is not implemented yet, rather than a bug.

[ellatrix]

Happy to look into this one.

[jasmussen]

Great point. Relabelled :)

[BE-Webdesign]

There is potential for overlap with #515. It would be nice to have a consistent way to handle arrow navigation. Ping me when the PR is ready.

[ellatrix]

What would you expect once you hit the boundary? Caret at the same place vertically in the next block?

[ellatrix]

I see that in the per-block prototype it goes first fully to the end, then to the start of the next block.

[ellatrix]

@afercia Would be great to hear you thoughts on this one as well. :)

[afercia]

@iseulde I've seen in some of the prototypes it was possible to go through all the blocks just using the arrow keys. I'd would expect the same in the plugin, where navigating content moving the cursor with the arrow keys should work exactly like in a textarea 🙂 Whether you use right/down/left/up, home, end, etc. there should be the ability to navigate block as a whole.

[ellatrix]

Yeah, this is not a single textarea though, each blocks is a separate textarea. How should it work if all blocks are seen as separate ones? If it should work as one area, it should probably be one content editable area.

[afercia]

How should it work if all blocks are seen as separate ones?

I think everyone, not only assistive technologies users, would have troubles to understand why what looks like a unique post content can't be navigated with arrows like everyone is used to do when typing.

[ellatrix]

Same here. But it sounds like we should think of it as separate pieces, similar to text areas on a settings page.

[afercia]

I'm not the best person to dive into technical choices here. As a user, I just know that the interface is making me a promise, and the promise is not fulfilled 🙂
(I also remember vaguely some discussion about how to "select all" the post content)

[afercia]

A quick comparison between what was available for testing till now (the prototypes) and the plugin as of today (April 29th). Comparing basic text navigation actions that should work out of the box. Testing on Chrome/Mac, for the Home/End keys I'm using:

Home: Cmd + Up Arrow
End:  Cmd + Down Arrow

https://wordpress.github.io/gutenberg/
arrowing through all content: yes
Home/End through all content: yes (can't test what happens when the last block is non editable, e.g. an embed)
Select through blocks:        yes
Select all (Cmd + A):         yes

https://wordpress.github.io/gutenberg/tinymce-per-block/
arrowing through all content: yes
Home/End through all content: no (constrained within blocks)
Select through blocks:        no
Select all (Cmd + A):         no (constrained within blocks)

https://wordpress.github.io/gutenberg/tinymce-single/
arrowing through all content: yes
Home/End through all content: partial (Home works, End does nothing if the last block is non editable)
Select through blocks:        yes
Select all (Cmd + A):         no

Plugin as of April 29th
arrowing through all content: no (constrained within blocks)
Home/End through all content: no (constrained within blocks)
Select through blocks:        no
Select all (Cmd + A):         no (constrained within blocks)

For more advanced text interactions, see:
Simple text interactions #179

[afercia]

See also #3 and #62

[ellatrix]

Working on this one right now.

[ellatrix]

@matias If we decide to only handle tabs, not arrow keys, then this already works. Note that sometimes the focus goes to the buttons first e.g. for images. See #838 to add styling so you can follow where the focus is.

[jasmussen]

Splitting and merging text blocks is working well. The multi paragraph text block is working well. I expect the freeform block will be nice to have as well. As such, let's close this, and go with tabs to navigate between blocks, the pattern to emulate being "desktop publishing for the web". This will be like when you tab from the title field into the text field in the current editor (and the Gutenberg equivalent would be tabbing from the title field into the freeform block).

[ellatrix]

I agree here. If we don't allow cross block selection at this time, it doesn't really make sense to add arrow key navigation (in my opinion).

[afercia]

I'd agree the two things should go together. Also, the "Select all" issue. I think the accessibility issue still stands, but let's move on 🙂