List v2: Lists with 3 levels are impossible to edit without breaking after Gutenberg 14

[ricjcs]

Description

Lists with 3 levels made before Gutenberg 14, with this update if edited will be broken.

Adding new items or changing the URL breaks the list. Outdent and Indent don't work either.

Step-by-step reproduction instructions

1. Build a 3-level list with Gutenberg older than 14 or without Gutenberg.
2. Install Gutenberg 14.
3. Edit the list: add new items, change URLs, etc.

Screenshots, screen recording, code snippet

Here is an example:

Adding a new item or changing the URL breaks the list. It is impossible to do something without completely redoing the list.

I have many lists with dozens of items, now it's impossible to make changes to lists with 3 levels without breaking them. Remaking lists with several dozen items is a huge job. Removing Gutenberg makes lists made after version 14 uneditable unless redone. And wordpress.com users don't even have that possibility.

Environment info

No response

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

[ellatrix]

Could you share the block html before the conversion?

[ricjcs]

Hi @ellatrix, thanks for your reply.

Here is the html code:

<!-- wp:list -->

<ul><li><strong>Item</strong><ul><li><strong>Item</strong><ul><li><a rel="noreferrer noopener" href="#" target="_blank">Item</a></li><li><a rel="noreferrer noopener" href="#" target="_blank">Item</a></li><li><a rel="noreferrer noopener" href="#" target="_blank">Item</a></li><li><a rel="noreferrer noopener" href="#" target="_blank">Item</a></li><li><a rel="noreferrer noopener" href="#" target="_blank">Item</a></li><li><a rel="noreferrer noopener" href="#" target="_blank">Item</a></li><li><a rel="noreferrer noopener" href="#" target="_blank">Item</a></li><li><a rel="noreferrer noopener" href="#" target="_blank">Item</a></li><li><a rel="noreferrer noopener" href="#" target="_blank">Item</a></li><li><a href="#" target="_blank" rel="noreferrer noopener">Item</a></li></ul></li></ul><ul><li><strong>Item</strong><ul><li><a rel="noreferrer noopener" href="#" target="_blank">Item</a></li><li><a rel="noreferrer noopener" href="#" target="_blank">Item</a></li><li><a rel="noreferrer noopener" href="#" target="_blank"><strong>Item</strong></a></li><li><a rel="noreferrer noopener" href="#" target="_blank">Item</a></li><li><a rel="noreferrer noopener" href="#" target="_blank">Item</a></li><li><a rel="noreferrer noopener" href="#" target="_blank">Item</a></li></ul></li></ul><ul><li><strong>Item</strong><ul><li><a rel="noreferrer noopener" href="#" target="_blank">Item</a></li><li><a rel="noreferrer noopener" href="#" target="_blank">Item</a></li></ul></li></ul></li></ul>

<!-- /wp:list -->

With Gutenberg turned off, it's possible to add new items, with Gutenberg turned on, the list is broken if a new item is added.

But in reality the tags in this code look like they're a bit messed up. I tried to reproduce the same problem by creating new lists but I am not able to.

I think the problem I'm having with some lists, are lists made in the classic editor that were converted to the block editor even before Gutenberg 14. Probably in the conversion from classic to blocks the code got messed up, although it was still possible to add items. In other words, the code already had problems and now with Gutenberg 14 it's become notorious. What do you think? If there is nothing that can be done, then this issue can be closed.

[ellatrix]

It should be fixed in #44822. Are you able to test that PR?

[ricjcs]

Wonderful! It's great that a solution is being implemented. Thanks.

Just mention that as you requested, the previous code is before the conversion to the new lists. I have some lists already converted and they get broken if I add any items. It would be great if the problem was also solved for the already converted lists.

Are you able to test that PR?

I cloned Gutenberg and installed the prerequisites, but when I run npm run dev or npm run build command, I get some errors. So unfortunately for now I don't know if I can test it... I have to explore more...

[ellatrix]

I think you can use http://gutenberg.run/44822

It would be great if the problem was also solved for the already converted lists.

This would be much, much harder to fix. Not sure if we can do that.
Worth nothing that your content was a bit strange: it had multiple nested lists for one list item that needed to be merged. Not sure how you ended up with that.

[ricjcs]

This would be much, much harder to fix. Not sure if we can do that.

I already suspected it was something complex...

Not sure how you ended up with that.

I don't know either, but as I mentioned I suspect it was from the conversion of the classic to blocks. Recently when updating some posts it was converted to the new lists, and only later when I needed to add items I detect the problem.

But it's great that this fix prevents this problem from happening. It seems to work fine, converts to new lists without the problem happening. If I hadn't updated some posts with Gutenberg 14, with this fix I shouldn't have the problem. So this will prevent the same from happening to users with lists with previous problems.

[ellatrix]

@ricjcs Could you not revert to a previous revision to get the old list content?

[ricjcs]

@ricjcs Could you not revert to a previous revision to get the old list content?

It depends... Because other content has already been added. But the problem with my lists isn't as serious as I thought, after all, it only seems to happen with some. It's not something general as it initially seemed to me.