List Block: Try nesting with InnerBlocks

[ellatrix]

Issue Overview

Why use nesting for the list block?

1. Currently there's no way to reorder list items without trying to copy paste. By using the block nesting mechanism we can provide each list item with block movers.
2. There's no way to have a nested list of a different type. Nesting would allow e.g. a numbered list inside a bulleted list.
3. It would remove some complexity from the RichText component. Currently the multiline option is only used by lists (and not really intended for it). We could make it as simple as inline only where it would be one string of phrasing content. This would further reduce the scope of contenteditable use in the editor, hopefully resulting in a more predictable list block.
4. It would remove the "special" TinyMCE code that we currently have in the list block.

How?

As far as I can see, there are two options:

1. We create a "list item" block that is only available in the context of a list block. The list block can only contain this one type of block (no inserter). I'm guessing this would require some work on the API. One difficult thing here is that a list item should be able to contain a list itself to allow nested lists, and there needs to be logic in place to indent a list item (or a selection). This means logic crossing different blocks and nesting levels...
2. We break with HTML in the editor context and only have list item blocks. No wrapper. The benefits are that it becomes easy to split and merge lists (just move them around), indent lists (becomes a property of the list item, but it would still need to depend somehow on the previous list item), and to change list style of a whole connected list you could multi select them. The biggest problem here is that this all needs to be converted somehow on save in valid HTML...

The latter method is how it is done in e.g. Google Docs and MS Word, but they don't have to care about the HTML output that much (except for export). Google Docs doesn't even care about the previous item when it comes to indentation.

What would be the best approach to do this?

[ZebulanStanphill]

Actually, the current List block surprisingly already allows for nested lists of different types.

But yeah, using the nested block system for List blocks would be neat. Here is what I think it would probably look like in the post_content HTML markup: https://pastebin.com/UtHuSEwF

[ZebulanStanphill]

I just realized that my markup did not make any sense because it did not have any markup for the proposed List Item block, so I fixed that: https://pastebin.com/pQs3Gnp1

It then occurred to me that if the List block started using nesting, then you could theoretically allow almost any block in a List Item block, allowing for lists of images, quotes, Custom HTML blocks containing description lists (<dl>), and other kinds of content. That might be taking things too far, though.

[josephrocca]

+1 I'd find it very useful to be able to re-order list items without copy/paste. Currently, the copy-paste approach doesn't preserve nesting. So if I copy a list item that has children to a new location in the list, the children get all squashed up together into the parent item.

[strarsis]

Would be a list a good way to model the following content/design/structure?

(List-like icon) Heading
Some descriptive text

(List-like icon) Heading
Some descriptive text

(List-like icon) Heading
Some descriptive text

(and so on)
Like a feature list with additional item description.

This isn't possible with current list block because at least a line
break has to be forced (bold text could be used as the "title").

Each title + description text could be wrapped into a container block or separate paragraph with styles,
etc, but this seems to highly complicate it, also a list feels most natural for this.

[hacknug]

@strarsis what you're describing sounds like a description list. Discussion is on #4880 and there's also a plugin you can use today here (with all the UI/UX issues that come with nested blocks): https://github.com/lassemt/wp-block-description-list

[strarsis]

@hacknug: This is exactly what I had been looking for! I had to use sections, titles and paragraphs for
this which is terrible UX and is also less elegant than using <dl>.

[hacknug]

@strarsis that's the beauty of semantic html haha

[strarsis]

@hacknug: The only downside with <dl> is that there is no wrapper element for
the <dt>/<dd> combinations, like for styling a border around it or
using flexbox/grid on the <dt>/<dd> as single items.

[hacknug]

@strarsis the first problem you mentioned could be solved using the adjacent selector (dd + dt { border-top: 1px solid black; }) depending on what it is that you're trying to achieve. Second one maybe with flex-wrap: wrap or float: left or column-count: 2.

[stmarytx]

Actually, the current List block surprisingly already allows for nested lists of different types.

@ZebulanStanphill how is this accomplished? I've been trying to nest OLs and ULs and have not been able to do so.

[ZebulanStanphill]

@eshannon3 Indent a list item, and while your text cursor is on that item, use the toolbar to toggle the list type.

[stmarytx]

@ZebulanStanphill OH! Thank you so much! I kept selecting multiple items to toggle, which toggled all levels.

[paaljoachim]

Hey @ellatrix Ella and @nosolosw André.

I happen to come across this older List Block issue, and thought about the Quote block issue:
Quote: use nested blocks
#15486

[dmsnell]

I believe that this would resolve #21406 if we get it in.

[dmsnell]

I'm very interested in making this happen, or at least figuring out if we can make it happen. I tried an approach with a ListItem block, the only allowable nested block for the List block. This is visible in the screenshot below.

Some initial impressions:

• It's great to be able to rearrange blocks within a list. It's great being able to add any content inside of a list. This makes for a stronger match with the HTML list semantics, which don't arbitrarily restrict list content to text as the list block currently does.
• Having to work around the ListItem wrapper is far less convenient than the way the list block currently works, particularly when navigating between list items with Return and Backspace.
• Indenting and outdenting comes from RichText, which was a very big surprise to me. Converting the list block in a way that preserves the ergonomics of indentation and continuation is going to require a lot of work.
• We should auto-insert a paragraph block when creating a new list item so you don't have to add one manually. It's annoying to hit enter and then have to add a new block.
• The ListItem blocks add noise in the block tree. Is there a way around that? It also makes is slightly more difficult to rearrange blocks between list items.
• We need CSS updates to prevent duplicate list-item bullets, as evident in the image. The code producing the screenshot follows HTML recommendation with <ul><li><ul><li>…</li></ul></li></ul> structure for the nesting, vs <ul><ul><li>…</li></ul></ul>

[ellatrix]

This will be a very interesting challenge, but one I'm not super eager to take on. I'd be more than happy to review work on it though.

Yes, rich text currently handles all of it. Hopefully one day we can reduce complexity in rich text by removing multi line values.

[Paul-Hebert]

Hey, thank you all so much for working on this! We're working on a block-based blog for a client and they reached out with a request related to nesting blocks within list items. I had a couple questions about this effort:

1. I see a PR was merged to allow nesting lists within lists (in list block V2). Will the current development efforts allow nesting other blocks within list items? (Our client writes a lot of technical content and would like to be able nest code blocks within list items)
2. If the answer to # 1 is yes, do you have a sense of when this feature will be available for Wordpress users?

We'd love to support this request from our client, but we're hesitant to create our own list block to do so, especially if your team is working on a similar solution.

I wasn't sure who would know the answers to these questions. @youknowriad , @ellatrix would either of you know or know who I should ask?

We're loving the block editor. Thanks for all the great work!

[youknowriad]

@Paul-Hebert Hi there and thanks for your interest here. It's going to be very hard for me to give you precise answers thought, the reason is that there's still some unknowns for us. Basically, we're working on that block indeed, we don't really know if we will allow other blocks as list items, but the main question for us right now is whether we will be able to provide a UX that is on par with the current block. One of the main challenges being the keyboard interactions.

I suggest you subscribe to this thread and the related PRs and follow the progress.

[Paul-Hebert]

@youknowriad , thanks for taking the time to respond!

That makes sense. I know it can be hard to give precise answers while still answering unknowns. I can also understand how keyboard interactions could get tricky for that block.

I'll circle back with our client and see how they'd like to proceed here. I'll also subscribe to this thread. Are there any open PRs I should track as well?

Thanks

[youknowriad]

You might want to check the List block label as this is being worked on on multiple small PRs.

[Paul-Hebert]

Thanks @youknowriad !