List Block: A couple of writing flow issues

[jasmussen]

The list block has come a long way, and is largely working very well. But for some of the intricate writing flow behaviors, there are some rough edges that I've tried to capture here. Some are most likely discussed/tracked elsewhere, but sharing them here as context for the holistic experience.

The basic interaction works well:

• Add an asterisk or number plus period to create a list.
• Enter, backspace, delete, works.
• Partial selection works.

But there are some unexpected behaviors.

Tab and shift+tab don't indent or unindent

I'm aware of the tab for moving into the inspector, but I'm curious what we can do to explore changes here, whether a non default preferences setting or some other shortcuts that can tailor your use case.

Making a partial selection across two list items, and pressing "Enter" doesn't do anything

In this GIF, after making this partial selection I'm pressing the Enter key on the keyboard:

I would expect it to delete the partial selection and make a new empty list item between the two.

Focus is lost when splitting nested list items

Make a list with two nesting levels. Set the caret inside the 2nd nesting level, press Enter twice. The block toolbar is now in the top left corner of the screen, and focus on the main iframe, removed from the list block:

Merging nested lists do not merge the list blocks

In the following list item set up:

* Top level
 * Second level
* Top level #2
 * Second level #2

Select all the text on Top level #2 and press backspace. I would expect this action to merge the two nested lists into a single list, like so:

* Top level
 * Second level
 * Second level #2

Visually this appears to be the case, but in fact there are now two nested list blocks, like so:

GIF showing the same:

Intentional behaviors, collapsed for clarity

Pressing the down arrow from a paragraph and into a list makes you select the list itself, not the first list item

Since this is not the case when moving between two paragraphs, this is unexpected:

I would instead expect the caret to be inside the first list item, just as it is when arrowing between paragraphs.

Similarly, pressing the up-arrow to navigate from a paragraph through all list items and into another paragraph above stops at the first list item, before it selects the whole list block.

[skorasaurus]

Tab and shift+tab don't indent or unindent - #45404

[artemiomorales]

Related to this, I run into unexpected behavior when selecting list items using the keyboard. Here I'll share a video to demonstrate. In short, when selecting list item text using keyboard navigation, I run into two issues:

1. Selecting the first line of a list item block unexpectedly selects the entire list block and preceding paragraph
2. Selection is unable to advance past the paragraph preceding the list when navigating with a keyboard

This was tested on Chrome 109.0.5414.119
Gutenberg version 15.4-rc1

list-selection.mp4

[artemiomorales]

Related to this, I run into unexpected behavior when selecting list items using the keyboard. Here I'll share a video to demonstrate. In short, when selecting list item text using keyboard navigation, I run into two issues:

1. Selecting the first line of a list item block unexpectedly selects the entire list block and preceding paragraph
2. Selection is unable to advance past the paragraph preceding the list when navigating with a keyboard

This was tested on Chrome 109.0.5414.119 Gutenberg version 15.4-rc1

It seems like the second point is being addressed by #44727.

[glendaviesnz]

Pressing the down arrow from a paragraph and into a list makes you select the list itself, not the first list item
Since this is not the case when moving between two paragraphs, this is unexpected
I would instead expect the caret to be inside the first list item, just as it is when arrowing between paragraphs.

The List block is different to the Paragraph block as it has no parent block. The list block is currently behaving like other blocks that have a parent block, eg. the Quote block also selects the parent block first when navigating with the arrow keys.

If the List block was to be changed so that navigation with the arrow jumped the cursor straight to the first child, and when going up straight to the previous block, then how would we provide for easy selection of the parent block via the keyboard?

[jasmussen]

The List block is different to the Paragraph block as it has no parent block. The list block is currently behaving like other blocks that have a parent block, eg. the Quote block also selects the parent block first when navigating with the arrow keys.

👍 I'll update the issue to note this.

[ellatrix]

Focus is lost when splitting nested list items

This one I can't reproduce (tried FF and Chrome). Focus remains on the list item 🤔

[jasmussen]

This one I can't reproduce (tried FF and Chrome). Focus remains on the list item 🤔

I found an easier way to reproduce, and to clarify, perhaps focus isn't actually lost (or perhaps the issue I was seeing has been fixed?), the caret is still where it needs to be, I can still type. But the block toolbar loses its place, so perhaps focus is lost momentarily? Not sure what's going on. But try this:

• Make a bunch of list items
• In the middle, press Enter to create a new.
• Press space in the new empty list item to indent
• Press backspace to unindent
• Do this a couple of times and you should see the misplaced toolbar:

GIF showing this:

[ellatrix]

@jasmussen I'm not sure what is happening here. The element (or virtual element rather) is correctly being passed down to Popover and useFloating. I see that the reference has correctly updated. But for some reason useFloating returns 0 x and y positions. I'm not very familiar with this component, so maybe it rings a bell with @ciampo, @talldan or @youknowriad. I also tried changing to key when the parent component changes to reset all popover state, but that didn't work either.

[ellatrix]

In any case, the other issues are fixed, so may be good to rename this issue or open a new one.

[jasmussen]

Merging lists into one was a big one, that's fixed 🎉

Tab and shift tab to indent/unindent when focus is in a list item is tracked separately, that was the other big one (and remains IMO a high priority). But I'm always in favor of closing, especially as it's so easy to reopen.

Since focus doesn't seem to be lost in the last case, I'm happy to close this one. It'd be nice to figure out what's going on with the block toolbar, but we can see how this goes.