Gutenberg: Improving the List block

[paaljoachim]

Hey

My customer wants it to look like this:

This seems like a challenge for the list block.
There are multiple things to consider. Checkmarks, numbers, letters, roman numbers etc. Then also having the list horizontal instead of vertical.

I would suggest to have drop down of the prefix icons. Similar to what we do with alignment options in other blocks.

That could mean a drop down with name such as ordered list and the icon. Followed by names and icons of other options.

One would then check the drop down and select the type of icon one wants to use.

Mockup:

Additionally

Then also add an alignment option drop down similar to other blocks. To show the list in
Horizontal or vertical mode.

[Wingo5315]

For the checks in the list, there could be an option where the user could upload an SVG/PNG image which could be used as a bullet.

Also, whilst we're on the subject of improving the List block,I think there should be a number of ways that the numbers can be displayed (roman numerals, indented lists with 1, 1.1, 1.1.1 etc.) that the user can choose from.

[joyously]

I wonder how much of this should be in the core block and how much should just be styles added by a plugin.

Does the current list block expose the start attribute? How about the reversed attribute?

[Wingo5315]

The horizontal - vertical option should be added by a plugin or custom CSS, as it's something most users won't want or need.

However, I do think that with the numbers, such as the roman numerals, maybe we should have the numbering options that are provided in Microsoft Word:

And, in terms of the bullet styles, there should be these options:

• filled-in circle (default)
• circle outline
• filled-in square
• use an image as a bullet (PNG)

[skorasaurus]

Regarding bullet styles, there's a couple issues that also mention it #9117, #15005, and #13888

@joyously as I understand, the current block exposes both the start and the reversed attribute.

[phpbits]

@paaljoachim Just wanted to let you know that I've just added few list block styles on EditorsKit Plugin. Here's the preview and I hope you'll love it. Cheers!

https://twitter.com/editorskit/status/1213105775632977921

[joyously]

How does that connected one look with nested lists? Or with text that wraps to a second line?

[joyously]

as I understand, the current block exposes both the start and the reversed attribute.

I just tested this, and the attributes are only available on the outermost list.

[phpbits]

I just tested this, and the attributes are only available on the outermost list.

The style will also be applied on the nested list :)

[paaljoachim]

Design folks really need to go through this issue. Thanks a lot for sharing Jeffrey! I look forward to seeing your List Block improvements make it's way into GB Core.
@karmatosed @mapk

[karmatosed]

Let's get the design feedback label on this so we can dive into some thinking here. I do first off think we need to be cautious about what we add here as a lot can be done with a combination of styles and also a class.

I'd be cautious as a result of my above comment to add a way to upload an image. I think there's a lot can be done with maybe another block style variation (maybe a couple), but I don't think making this too complex is the way to go. I also think this should be done under style variations over in toolbar.

[mapk]

I would suggest to have drop down of the prefix icons.

I actually like the block styles option that @phpbits proposed as a way to do this. We don't need to provide every possible bullet symbol, but a good few that are common to use.

Then also add an alignment option drop down similar to other blocks.

This reminds me of the Navigation block and might be worth an exploration there if it hasn't happened yet.

In either case, providing more bullet options sounds good to me. Using them as block styles opens them up for plugins to easily expand and add their own styles too.

[strarsis]

Please make nested lists stylable! This is easily possible with HTML and I can indeed achieve the same in editor by manually adding the is-style-* classes to nested <ul> and </ol> elements, but it appears that the editor removes them when changing the uppermost list block (e.g. changing its block style).
Also it is currently not possible to return back to list item when a nested list has been added to it:

1. Top 1
2. Top 2
   
   
   
   1. Level 2
   
   
   2. Level 3
   
   
   3. Level 3
      
      Back to same item!
   
   
3. Top 3
4. Top 4

[paaljoachim]

One focus area is to add styles to the List Block such as Jeffrey mentioned in his comment above. https://github.com/WordPress/gutenberg/issues/17738#issuecomment-570594829
I also made an animated gif.

I would suggest that we add these styles into the Core List Block:
Default
None
Arrow
Checked
Dashed
Starred

Another would be checkboxes.

[mapk]

It seems there's some consensus around adding a variety of bullets to the List block. Using the style variations for this purpose feels like the right way to go. Shall we move this to dev?

[paaljoachim]

Hey Jeffrey. @phpbits
Can you add some styles to the block?

[zdenys]

Additionally
Then also add an alignment option

This would be really nice indeed, as compared to the paragraph block, list one is missing the alignment option but also justify option. Having both for parity would be good.
| Paragraph | List|
----|----
|||

[joyously]

@zdenys What else do you have installed?
There is no Justify option. It was removed from WP years ago, and not added back in the new editor. This screenshot is from WP 5.5RC2:

[strarsis]

Note: The EditorsKit plugin adds a justify option.

[zdenys]

@zdenys What else do you have installed?
There is no Justify option. It was removed from WP years ago, and not added back in the new editor. This screenshot is from WP 5.5RC2:

The screenshots I provided are from a site with only Gutenberg plugin version 8.7.0. and Jetpack version 8.8. In fact, it may be coming from the latter as when I deactivated it, I could see the justify option disappear.

[strarsis]

@zdenys: Yes, the Jetpack plugins adds a justify format option to Gutenberg.

[mtias]

I think this is more plugin territory. Unless we were to support any symbol / emoji, which might be worth exploring, specific style variations can quickly become dated while still needing to be supported for a long time.

[CHEWX]

Really missing roman numbers, impossible to do Privacy Policies and legal documents.

[strarsis]

@CHEWX: Exactly this!

[Wingo5315]

@CHEWX I think we should get this in for WP 5.6.