Lists > Editing flow : typing is getting slower and managing nested lists generates unattended behaviors / content losts

[Marc-pi]

Description

This was observed for few months, not only on recent Gutenberg versions.
I use the buttons of the floated toolbar to indent my lists.

1/ When we write down a quite long (normal) content, the typing become slower and slower
My example is a content with those figures, i make usage of many nested lists into my paragraphs.

• Characters:12463
• Words:1923

<!>I observe this mostly on Firefox, less on Chrome but is occurs on both browsers after few minutes at editing your article

2/ Manage List entries generate flickering / flackiness

If you have a list and sublists, it's extremely difficult to update the sublists. Adding some, delete empty sublists, etc.

* list 1
   * sublist 1-1
       * sub-sublist 1-1-1
       * sub-sublist 1-1-2
   * sublist 1-2
   * sublist 1-3
* list 2
   * sublist 2-1
   * sublist 2-2
   * sublist 2-3

Several cases here :

• [a] When deleting a sublist, for instance 1-2, it impacts the next the next List2 that is sometimes merged into List 1 ! Sublist 1-3 can disapear. It is a nightmare.
• [b] Sometimes, when inserting a sublist betweeen two already sublists, the content of the next sublists are superposed (character becomes non readable). The only way to make this disappear is to save + refresh the page
• [c] When you want to delete an empty list, you hit Delete on your keyboard but it deletes the next sublists, you loose content !

<!> I observe these behaviors in Chrome+FF also.

Seems Gutenberg is getting lost even if we save the page frequently. There are issues with List vs List Item : child items are displayed as child of the same list item but Gutenberg created another List at another level that is not visible.
The only workaround i found is to manage nested levels with the List View in the Editor. it is impossible directly when typing.

To sum up, the List block is very instable, and its very hard to manage our contents. We have to take care not to loose some when editing our articles.

I guess those 2 List specific ssues are related, and rely on sublists.

Step-by-step reproduction instructions

Just create an article with List block

Screenshots, screen recording, code snippet

It'll post screenshots / screencasts as a follow up as soon as the errors occur back

Environment info

• WP 6.2.2 / WP 6.3 RC3 but it's a old behavior
• Gutenberg but it's not specific to this release
• FF or Chrome latests versions

Please confirm that you have searched existing issues in the repo.

Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

Yes

[Marc-pi]

About [2]
I think the culprit is a mess up in List / List items. List blocks creates groups of list whenever it wants, leading to unespected behavior. Those are not visible in the interface, only the List View can give you the explanation of the mess up.

Here is a screencast that explains the difference between the writing flow and the block List View. Lists levels are created but not visible. So when we delete some entries, sometimes we delete non visible levels !

ping @ellatrix

screen-recorder-fri-aug-04-2023-16-29-36.webm

[ellatrix]

Did #52949 fix this issue?

[annezazu]

@Marc-pi can you follow up on the above to confirm if the issue is still present?

[Marc-pi]

hello,
@ellatrix / @annezazu it is better. The "list tree" is cleaner, seems you improved the nested lists.

There is one issue : see the video below

• when we want to merge 2 sub-lists by clicking the suppress key, the 2 lists are merged.
• If we make i mistake and want to add back the sublist with adding "a return", it creates a new list, the child list level is getting lost.
• It works well when using parent list level, not when we have sublists.

screen-recorder-wed-aug-30-2023-12-41-38.webm

and you get strange display :

---

WP 6.3
Gutenberg 16.5.1
TT2 theme

[ellatrix]

Would you be able to share the starting content of the code editor here, and then the steps you do to end up with the unexpected behaviour? Or just the steps from a blank page if it can be reproduced more simply?

[Marc-pi]

hum, i will try to replicate the exact point of my previous post.
Going back to the initial findings to ensure it is still fixed (and prepare a replication of my previous post), seems the nested lists are still wrongly declined into blocks (despite my previous comment).
So when we try to manage the list (add a new child line, click suppress button at the end of one child elements), it leads to unespected behaviors.
For instance, if i click suppress at the end of one child line to merge 2 lines, it deletes a line outside the list.
The editor get lost...

[ellatrix]

@Marc-pi are you editing an existing list or a newly created one? It's worth noting that if the existing list has a bad structure, it won't get fixed. I'm interested in how you ended up with this bad structure, so the step you took to end up in this state with a list item having multiple lists inside it.

We could update your badly structured list by merging all those nested lists, but I'm wondering how you got to this state so we can fix the problem at the root.

[Marc-pi]

@ellatrix i created completely new lists under Gutenberg 16.6 / WP 6.3.1
and then i play with them : moving child to parent, trying to merge 2 lists, adding new childs, adding new parent
(exactly like i do with Google Docs for instance)
i saw one of your commit #52995, does it fix partially my findings ?
tell me if you need more info, so we tackle down this issue quickly before beta1.

[ellatrix]

@Marc-pi That will help, but I'm still wondering how you ended up in a state where you have a list item with multiple nested lists. Could you give me exact steps to reproduce from an empty post? Or alternatively, here is a list with a nested list:

<!-- wp:list-item -->
<li>one<!-- wp:list -->
<ul><!-- wp:list-item -->
<li>two</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>three</li>
<!-- /wp:list-item --></ul>
<!-- /wp:list --></li>
<!-- /wp:list-item -->

How do you get to the state where you have one list item with multiple lists nested in it?

[Marc-pi]

@ellatrix,
to help you understand, here is a vid i recorded for you, from a fresh new Page
You will notice 2 issues i was talking about above :

• the reworked nested lists are lost at a certain point (see at the end of the video)
• trying to merge parent into the previous parent make loose the child elements of the merged parent
• i cannot ident by tab, i've to use the toolbar (but that's another issue)

Hopes that helps you
Please note that i do use Firefox in that recording

screen-recorder-tue-sep-19-2023-18-53-59.webm

[annezazu]

Moving this out of the 6.4 board as we are out of time to iterate further.

[ellatrix]

@Marc-pi Thanks for the video! I now understand what's happening. You're pressing (forward) Delete with this state (using ↦ to indicate where you press the Delete key):

• parent 1
  • child 1.1 ↦
• parent 2
  • child 2.1

Then you end up with a list item that has two sub lists.

I'll make a PR to fix this.

[ellatrix]

Fixed in #55121.

[ellatrix]

It's an easy fix if there's desire to back port it.

[Marc-pi]

@ellatrix
hello,
in fact, like in Google Doc or CKeditor (both are ok with accessibility norms), i do use on my keyboard :

• Suppr button OR Delete button ← // in case i want to merge 2 lists
• Enter ↲ (line break) // to add new child
• ↤ / ↦ (with shift) // to adjust childs vs parent ie to ident the list
• Double Enter ↲ // to exit the list block
• ALT+Enter (return to line) // i do not use

Those should work to manage the lists
hope you understand the attended behavior