List: Add inspector interface to choose bullet or number type

[jasmussen]

#51186 adds an option to choose number types in the inspector. While the feature can land soon, we have an opportunity here to improve the interface in a few ways:

• Add more features, such as number selector, color
• Add similar options to the ordered list option
• Size and alignment options for bullets
• Improve compactness of the controls, making sure their value matches their prominence

In addition to that, we can make likely make the control into a style control, so that it doesn't split the inspector by adding just a single panel. All of this we can likely accomplish with a flyout menu pattern, like so, shown here for unordered list:

• The flyout would contain controls for selecting the bullet type (circle, square, diamond, dash)
• A color option
• A size and alignment option

Similarly we can apply the same pattern for ordered lists:

• The flyout would absorb existing controls for reverse order and starting value
• It would add a type selector (numbered, lettered, roman numerals)
• A color option
• A size option

What do you think?

Related: a similar flyout interface for the Paragraph block in #51481.

[hanneslsm]

I wouldn't distinguish between ordered and unordered list then anymore. Of core, the code should be ol or ul when numbers or bullets are used, but for the user it's irrelevant. Let's combine both.
Here is a very quick sketch on how this could look like.

Edit:
I'm reverting.
MS Word has also two icons for unordered and ordered list (even three, for mixed). Yeah… let's keep them separate. :)

[jasmussen]

Good thoughts. I actually think both can work, but also that it's one of those issues that can be hashed out in implementation.

[beafialho]

This is great.

I was wondering if this would also apply to the Categories List block? If so, for that specific case, it would be useful to be able to have no bullet, symbol or spacing behind the list items. For instance, on sidebars, we may want to showcase categories lists with a different stylistic treatment, and the bullets often add visual noise. Here's an example:

[jasmussen]

It seems like we should be able to copy over that same list item inspector control to a typography panel for the categories list block, yes. All the more reason that it's good for it to be compact.

[MaggieCabrera]

All of this should also be applied to the details block too :D

[jasmussen]

All of this should also be applied to the details block too :D

Do you mean in terms of changing the chevron? I'd love to provide options there, but we always get stuck at limitations in the base element. Are there new options for changing the icon?

[MaggieCabrera]

All of this should also be applied to the details block too :D

Do you mean in terms of changing the chevron? I'd love to provide options there, but we always get stuck at limitations in the base element. Are there new options for changing the icon?

It's certainly limited, but some CSS can be used. This is what we did in TT4, not the prettiest thing but I wanted to avoid too much CSS.

[jasmussen]

Nice, that works. It doesn't animate, though, and remains somewhat non-standard, so I wonder if the same interface will work here 🤔

[MaggieCabrera]

Nice, that works. It doesn't animate, though, and remains somewhat non-standard, so I wonder if the same interface will work here 🤔

Using pseudo-elements will give us more control than that, but I didn't want to overcomplicate things in the theme, that's why I quickly came here to mention we could support that better from the block directly instead