List block removal fails

[RolfKyburz]

Description

In WP 6.1.1 (not in WP 6.1), removing a list block appears to work initially. However, a look at HTML reveals that the list block is not entirely removed, as a part of the code remains in the document, e.g.,

or, in a block with CSS additions,

In the moment of the deletion, the list visually disappears, but when re-editing the document later, the list block reappears. The only functioning way to remove the block appears to be, by manually removing the above code in HTML mode.

Step-by-step reproduction instructions

1. In a text document (blog post)
2. insert a list block
3. remove the list block again (the list may or may not have contents)
4. exit the editor
5. re-enter the editor — the (empty) lists will be back

Screenshots, screen recording, code snippet

No response

Environment info

WP 6.1.1, PHP 8.0.25, Theme: Exhibit 1.04, parent theme GeneratePress 3.2.3

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

Yes

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

No

[akasunil]

Hi @RolfKyburz ,
Can you try the same with WordPress default theme ? if issue persist, can you make some sort of video/gif for better understanding of the issue ?

[RolfKyburz]

@sunil25393, sorry, I don't have the resources to do what you suggest — however, now may have the essential clue for what is happening. I can indeed insert a list, select the list block, and delete it — and there are no traces. What happened here is that I am working with templates with lists that were created in WP versions older than 6.1.1, where list blocks were structured entirely differently. I can fix my templates — however, the problem remains a nuisance whenever one is editing WP pages / posts created under older WP versions.

[mrfoxtalbot]

Thank you for the additional details. The list block went from being a "simple" block to being a "nested" block where individual list items can be handled separately. It sounds like this could be causing the problem.

Could you please share the exact HTML you are using on your lists (you can switch to the "Code view" for this)? Working with the exact same HTML as you will help us get a better idea of what is happening and how to to fix it.

https://cloudup.com/cVIs40LBnm0

Thank you!

[RolfKyburz]

Hmmm ... it's not as easy as I thought. I see that in WP 6.1.1, old style lists are automatically converted to the "split block" scheme. I may have found what the problem is: in my templates, I often have a list with one placeholder item in it. Up to WP 6.1, I could simply place my cursor on that placeholder item and use Ctrl-Alt-Z to remove the list. With WP 6.1.1, this simple removes the list item, and when the last item in a list is deleted, this leaves an empty list item, i.e.,
<li></li>
or, if I use the code editor,

<!-- wp:list {"className":"small-print"} -->
<ul class="small-print"><!-- wp:list-item -->
<li></li>
<!-- /wp:list-item --></ul>
<!-- /wp:list -->

Only if I select the parent item first, then use Ctrl-Alt-Z, the list is fully removed.
One key issue here is that Ctrl-Alt-Z on the last list item makes the list block visually disappear—momentarily, while leaving the above traces in the file. These traces make the block reappear when re-editing the document later.

IMO, the removal of the last list item (possibly only when it is empty) should remove the list, i.e., the parent block.

On a side-note, I see the advantages if the nested block scheme for lists, but I also see problems with this, such as

• the "Select parent item" option is not obvious—it is far too easy to fall into the above trap
• splitting a list, i.e., inserting a regular paragraph block between two list items is clumsy (actually always has been rather clumsy)
• shouldn't drag-select the entire list (i.e., first to last item) automatically select the parent block? OK, one might want to delete all text between somewhere in the first list item and somewhere in the last list item using drag-select — but I think we need a more obvious and more accessible way to select the list block.

[t-hamano]

I found a similar issue, although they may not be identical to the problem you reported.
Here's my procedure:

• Insert a list block.
• Remove a list item block.
• Nothing happens if a list item is deleted.
• Do it again and the list item will be removed, leaving only the parent list. The block will visually disappear.
• Save the post.
• An empty list item is restored.

This problem occurs in both WordPress 6.1 and 6.1.1 and is independent of whether or not the latest Gutenberg is enabled.

cd44380d0c42d54fc0a384e50dc14349.mp4

On a side-note, I see the advantages if the nested block scheme for lists, but I also see problems with this, such as

It would be a good idea to submit these suggestions as new issues, if necessary.

[RolfKyburz]

Hi @t-hamano — yes, that is exactly my initial problem — thanks for confirming. As for my additional observations / suggestions, I'll create two extra issues from these.

[t-hamano]

I suggest either of the following approaches to solve this problem:

1. When the last list item is deleted, the parent list should also be deleted

2. Provide some UI to indicate that there are no list items

This second approach is a reference to the social icon block.

Placeholder icons appear when no icon is present:

When a block is selected, text appears prompting the user to add an icon:

[talldan]

I think this needs a UX solution more than anything, so I'm adding the Needs Design label.

[ellatrix]

Hi @t-hamano — yes, that is exactly my initial problem — thanks for confirming. As for my additional observations / suggestions, I'll create two extra issues from these.

Thanks for creating separate issues for your other observations! The initial problem is a duplicate of #40979 (which also has a PR to fix it), so I will close this one. Thank you!