Improving the List block with basic HTML list types

[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.

[CalumChilds]

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?

[CalumChilds]

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
3. Level 2
   1. Level 3
   2. Level 3
   Back to same item!
4. Top 3
5. Top 4

[paaljoachim]

One focus area is to add styles to the List Block such as Jeffrey mentioned in his comment above. #17738 (comment)
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!

[CalumChilds]

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

[createscape]

I am just working on a legal document in Gutenberg and found that I couldn't style the nested lists with different numbering system ( lowercase or roman numerals inside numbered list). Editing the HTML didn't work either and I found this frustrating (assuming it's because Gutenberg isn't actually using HTML ). I had to add a CSS class to remove the list items of the nested lists and just type in the lowercase and roman numerals.

[annezazu]

The ability to have more options rather than bullets or 1,2,3 came up in the FSE Outreach Program's fourteenth call for testing. Specifically, there was a desire to offer a, b, c options.

I think it would be interesting to explore as possible style variations for the block!

[solaceten]

Hello, I am wondering if this will get implemented and when? It would also be nice to have the ability to add list style e.g. A) B) C) etc

[kohheepeace]

I think emoji is better than preset default style.

[Idea]:

• Add emoji attribute to core/list
• Add InspectorControls with emoji-mart to allow user select emoji
• Inline css to ul when user select emoji

<ul style="list-style-type: "📌";">
...
</ul>

[caveat]:

• It does not support nested list
• It does not support Serial number style

[druxstr]

I feel this issue tries to address 2 different problems and should be split to better solve them.

1. Adding cosmetic list types (checks, stars, pins, emojis, etc.)
2. Adding basic HTML list types (letters, Roman numerals)

Cosmetic list types are about <ul>. They may be better dealt by a plugin.

Basic HTML list types are about <ol>. They should be dealt by core.

What's at stake isn't the same.

With no support for basic HTML types, nested ordered list are barely usable in Gutenberg. With no support for stars and emojis, unordered lists still work.

[mtias]

@druxstr that's a good point, would be good to split.

[annezazu]

Changed the title of this issue and created a new one for cosmetic list types to better split things out: #45830

[paaljoachim]

Yess!
@glendaviesnz has created a PR here: #51186 go and check it out and give feedback!

[jasmussen]

I shared some design thoughts in #51186 (comment) that might be relevant to this issue.