Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
Marc-pi opened this issue Aug 4, 2023 · 15 comments · Fixed by #55121
Assignees
Labels
[Block] List Affects the List Block [Status] In Progress Tracking issues with work in progress [Status] Needs More Info Follow-up required in order to be actionable. [Type] Bug An existing feature does not function as intended

Comments

@Marc-pi
Copy link

Marc-pi commented Aug 4, 2023

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

image

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
Copy link
Author

Marc-pi commented Aug 4, 2023

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

@jordesign jordesign added [Type] Bug An existing feature does not function as intended Needs Testing Needs further testing to be confirmed. [Block] List Affects the List Block labels Aug 7, 2023
@ellatrix
Copy link
Member

Did #52949 fix this issue?

@annezazu annezazu moved this to Needs Dev / Todo in WordPress 6.4 Editor Tasks Aug 30, 2023
@annezazu annezazu moved this from Needs Dev / Todo to Triage in WordPress 6.4 Editor Tasks Aug 30, 2023
@annezazu
Copy link
Contributor

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

@annezazu annezazu added [Status] Needs More Info Follow-up required in order to be actionable. and removed Needs Testing Needs further testing to be confirmed. labels Aug 30, 2023
@Marc-pi
Copy link
Author

Marc-pi commented Aug 30, 2023

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 :

image


WP 6.3
Gutenberg 16.5.1
TT2 theme

@ellatrix
Copy link
Member

ellatrix commented Sep 1, 2023

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
Copy link
Author

Marc-pi commented Sep 6, 2023

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...

image

@ellatrix
Copy link
Member

ellatrix commented Sep 7, 2023

@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.

@bph bph moved this from Triage to Needs Dev / Todo in WordPress 6.4 Editor Tasks Sep 8, 2023
@Marc-pi
Copy link
Author

Marc-pi commented Sep 14, 2023

@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
Copy link
Member

@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
Copy link
Author

Marc-pi commented Sep 19, 2023

@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 annezazu moved this from Needs Dev / Todo to Punted to 6.5 in WordPress 6.4 Editor Tasks Sep 25, 2023
@annezazu
Copy link
Contributor

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

@ellatrix
Copy link
Member

ellatrix commented Oct 6, 2023

@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.

@github-actions github-actions bot added the [Status] In Progress Tracking issues with work in progress label Oct 6, 2023
@ellatrix
Copy link
Member

ellatrix commented Oct 6, 2023

Fixed in #55121.

@ellatrix
Copy link
Member

ellatrix commented Oct 6, 2023

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

@Marc-pi
Copy link
Author

Marc-pi commented Oct 7, 2023

@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

@github-project-automation github-project-automation bot moved this from Punted to 6.5 to Done in WordPress 6.4 Editor Tasks Oct 10, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Block] List Affects the List Block [Status] In Progress Tracking issues with work in progress [Status] Needs More Info Follow-up required in order to be actionable. [Type] Bug An existing feature does not function as intended
Projects
No open projects
Status: Done
Development

Successfully merging a pull request may close this issue.

4 participants