Gutenberg lists are broken.

  • zhaarteth · Member ·

    Every time I try to create an unordered list in Gutenberg, one if not all of the following issues occur:

    1) When adding or editing an indent, especially third-level ones, extra bulletins show up rather than the one, as has always been. Ergo: filled-in circle, empty circle, and box, all on the same third-level indented list item’s line. Expected behaviour: Only one of those per line, as has always been. Furthermore, the first item in any list or sub-list is unaffected by this issue.
    2) When replacing, rearranging, or removing an indented list item, all items above it get shoved into a single list item. When I attempt to re-add them, any third-level indents below second-level indents cannot be re-indented as they were once Gutenberg decides they never existed as third-level indents in the first place, even if there is a second-level indent above it. Ergo if I click the Indent button accordingly, nothing will happen.
    3) When inserting a list item into a pre-existing list, another list item below it is erroneously added. When trying to delete the extra list item below the one that was erroneously added, issue 2 happens.
    4) When removing several erroneously-added tags via HTML view, the editor forces conversion to a standard paragraph block. Then I have to start the whole work over again and experience the above issues. No, I am not forgetting to remove their closes (e.g. ).
    5) The tab key no longer functions as it should. In pre-Gutenberg WP Admin editor, as well as in WP.com editor, the tab key functions the same as in a word processor (MS Office, LibreOffice, etc.) to add indentation to a paragraph or list item.

    To clarify: By second- and third-level indents, I mean the difference between ticking the Indent button once (empty circle), versus ticking it twice (box).

    This happens on any site, any post or page, new or old, pre-Gutenberg or not. The only workaround is to use the WP.com editor… which aside from lacking certain features of the WP Admin editor even pre-Gutenberg, boasts a blindingly bright interface. Also, the ‘add link’ button on the WP.com editor deselects highlighted text when using its interface floater, so I have to switch back to the WP Admin editor just to do that.

    I’ve tried several different browsers (Firefox, SeaMonkey, Chrome, Chromium, Maxthon – all without any plugins, just in case) across two OSes (Win10 and Ubuntu Bionic) and have encountered the same issues everywhere. This doesn’t seem to be something on my end.

    I love Gutenberg. It’s made a lot of things easier. But with this list bug, it’s doing the opposite of that.

    To reiterate: the lists issues are only happening in Gutenberg. The ‘text deselect’ issue with add-link button is only happening in WP.com editor.

    The blog I need help with is: (visible only to logged in users)

  • zhaarteth · Member ·

    Okay, some of my post here was messed with and I can’t seem to edit it.

    1) There is no specific blog I need help with. These issues are happening across all sites I have access to via WordPress.com.
    2) The support “Ask in forums” form didn’t provide me with what HTML attributes I could use like the reply form does.
    3) At the end of issue item 4, the example I wanted to provide was: </li>

  • gemmacevans · Staff ·

    Hi zhaarteth,

    It’s great to hear Gutenberg has been making things easier and thanks for sharing the points above.

    Replicating these behaviours will be the first step towards creating bug reports — we’ll need a little more information before we can do that though. Please send the following information for each issue so we can do some testing from our side:

    1. The exact step by step process you followed to trigger the issue
    2. Browser and version number where the issue occurs (available from supportdetails.com)

    At the end of issue item 4, the example I wanted to provide was:

    HTML can be added to this thread by pasting, selecting it and clicking the code button (at the top of this box) — this will preserve the formatting rather than converting it.

    the lists issues are only happening in Gutenberg. The ‘text deselect’ issue with add-link button is only happening in WP.com editor.

    That’s good to know. Gutenberg is a community project and if the same issues exist in Core (WordPress.org), they will need to be fixed there before the changes can be rolled out to WordPress.com. But we’ll be able to double check whether they are WordPress.com specific in our testing.

  • zhaarteth · Member ·

    The exact step by step process you followed to trigger the issue

    1. Create a block, change it to List. Can be ordered or unordered, issue persists all the same.
    2. Fill out a list of at least five list items. Fill them with Lorem Ipsum or anything at all.
    3. Fill each of 5 primary list items (designated by filled-in circle if using unordered) with at least three sub-items (indents) with whatever spraff.
    4. Delete the carriage return at the end of a sub-list item (designated by an empty circle if using unordered list) under the second primary list item. Ergo, press “delete” key at the end of the sub-list item, so that the sub-list item below it is merged within.
    —At this point, Issue 2 occurs. Instead of just two sub-list items being merged, all sub-list items within are merged into one.
    5. Try to replace each carriage return within each sub item after Issue 2 occurs, and notice how Issue 1 occurs.

    Unfortunately I am unable to reliably repro the other issues I listed in my OP. They seem rather random so far. Sometimes erroneous extra sub-list items appear when adding one, sometimes they don’t.

    Issue 5 is easy enough to replicate. Just try hitting the tab key on your keyboard instead of using the Add Indent button in Gutenberg, and you’ll notice it jumps to another block, rather than adding an indent. Whereas in the current (old) Core editor, as well as the WP.com editor, tab acts as the Add Indent button in good ol’ hotkey fashion.

    Browser and version number where the issue occurs (available from supportdetails.com)

    Issue is present on all browsers across Win10 and Ubuntu Bionic as stated in OP. I always allow my browsers to update when one is available. So that’d currently be Firefox 63, Edge 12 (Spartan 17.17134), Chrome 70.0.3538, and Maxthon 5.2.5.1000.

    HTML can be added to this thread by pasting, selecting it and clicking the code button (at the top of this box) — this will preserve the formatting rather than converting it.

    Yes, I know that now. Trouble was only due to the “new thread” entry form on the support page not clarifying what HTML tags can be used the same way the reply form page. For first-time posters it can be a bit confusing, even if they otherwise know enough HTML to use it in such manner. ;)

    Gutenberg is a community project and if the same issues exist in Core (WordPress.org), they will need to be fixed there before the changes can be rolled out to WordPress.com. But we’ll be able to double check whether they are WordPress.com specific in our testing.

    If I still had access to a Core implementation of WordPress, I’d most certainly try to repro it there myself. Hopefully my step-by-step will help with that.

  • zhaarteth · Member ·

    Forgot to add, here is an image example of Issue 1 as a numbered (ordered) list.

  • supernovia · Staff ·

    Hi @zhaarteth, I was able to confirm the tab key issue. Looks like that’s been filed here:
    https://github.com/WordPress/gutenberg/issues/9611

    I wasn’t able to duplicate the issue you’re having with deleting sub-items on a list, on my WordPress.com installation or on my WordPress.org installation.

    Would you be willing to get a screen capture of that? (like a movie if possible.)

    Also, if possible, would you be willing to make a separate topic for each issue? It’s a bit easier to follow a single issue in a thread vs one thread with several issues.

  • The topic ‘Gutenberg lists are broken.’ is closed to new replies.