Bring consistency to block toolbar for text blocks

[jasmussen]

This issue is the result of a long and good discussion in #3785, which this issue subsumes.

Right now the toolbar across text blocks change a fair bit, and in the case of the heading block, it's not possible to set the alignment unless you open the sidebar. Let's simplify and unify that:

A toolbar for text-blocks consists of these elements and in this order:

1. The block switcher. This doubles as a block type indicator, even when a block has no transformations.
2. An optional "level selector". For headings, this lets you select the level of the heading. For the list block, this lets you pick between the type of list.
3. Text alignments. This one can collapse.
4. Inline formatting. Don't put any buttons here that apply on the block level, it's inline-only.
5. More menu.

A few other details in this mockup:

• The More menu button has been made thinner, as the vertical icon affords this.
• The dropdown triangle buttons have been made thinner as well.

We'll probably want to find a different icon for the List block, or alternately a different way of showing the types of lists.

Update: We agreed to not include text alignment control for List block:

I'd like to echo the concerns of the others here and say that while this consistency is nice, I can't really imagine a real-world use case that works aesthetically. I suggest NOT including alignment controls on the List block.

See the full discussion in #16792

[gziolo]

2. An optional "level selector". For headings, this lets you select the level of the heading. For the list block, this lets you pick between the type of list.

@jasmussen - should it include all heading levels 1-6? Does it mean they should be removed from the sidebar?

[jasmussen]

Yes to both questions. It would still default to level 2, and we have multiple tools to help you select the correct level for your hierarchy.

[gziolo]

Yes to both questions. It would still default to level 2, and we have multiple tools to help you select the correct level for your hierarchy.

Bonus question, how does it relate to the ongoing work (#14889) to bring heading hierarchy checker to the sidebar. The very last design proposal looks this way:

[jasmussen]

Great follow-up question.

UI redundancy is okay, and light of this, is one of those situations where we should just keep the levels in the sidebar due to the ongoing work there. I imagine we could revisit the UI in the future for further improvements.

[kjellr]

This is excellent — I'm looking forward to seeing it in. From a visual rhythm (and a click-ability) perspective, I'm not 100% sure about narrowing the ellipsis icon. But It's worth trying out in any case. 👍

My only question is around the list block: Based on your mockup, I'm guessing that the indent/outdent list item controls would live inside of the dropdown? I wonder if those actually qualify as "inline" controls, and should be over in that area. 🤔 There's another potential issue with them being in that dropdown too: the way those dropdowns usually work (at least in the case of alignments) is that the active item becomes the top-level icon for the dropdown:

Since those indent/outdent controls are actually separate from the alignment controls, this couldn't quite work that way. So I think they'd need to come out of that dropdown in any case.

[kjellr]

We'll probably want to find a different icon for the List block, or alternately a different way of showing the types of lists.

We could theoretically adopt the alternate list icon from Material here:

[jasmussen]

Based on your mockup, I'm guessing that the indent/outdent list item controls would live inside of the dropdown?

Correct, but I love moving those to being inline.

[paaljoachim]

(This might be partly off track, and might just need its own issue. There might already be one in place..:)

Regarding the drop down.

What other options should be added to it that is associated with the text blocks?
Linking in this plugin: https://wordpress.org/plugins/advanced-rich-text-tools/

[paaljoachim]

Speaking about consistency and common block functionality. I am sharing the issue here so that anyone finding one will also find the other. As this issue is related: #15450

[idea--list]

In my opinion if we want absolute consistency then the good old optional "kitchen-sink" should be brought back ;-)
Everything would remain simple as default (which is good for beginners and looks great for designers), but there would be an option to be absolutely consistent in text blocks if one prefers that better

[gziolo]

@mapk - can it be considered done?

[mapk]

@gziolo I believe so. It appears the List block doesn't include a dropdown for its options, but I think that's okay. Everything else is looking consistent.

(wow, colors are off in my gifs. I've got to fix this.)

I'm closing this issue. If I've missed anything, feel free to reopen.