Adjust borders on block-level controls in the Toolbar

[mtias]

The semantic groupings we have in the toolbar — meta, block level, inline — should also have a visual representation with the borders. Right now separate block level controls have different representations, including cases like Navigation where every single one has borders.

Here's a before and suggested after:

[karmatosed]

I took a little look at this and my current thinking is how far could we reduce the use of borders which would result in having much clearer groupings.

Here is what just some look like currently to context.

Grouping

As mentioned, the groupings naturally fall into the following. I would like to check my thinking on meta referring to document controls (moving within space), but this is what I think summarises a potential reduction here:

In this case, if controls fell into that group, there would be no border.

The outlayer here is the options section, which might be acceptable as additional information appended to the toolbar.

There will need to be some working out of each case, but applying a pattern across all blocks seems like a good starting place.

[jasmussen]

Great ticket. I've taken Tammies work above, and built upon it and expanded with some "before/after" ones, which I will take the liberty of updating the main ticket with.

Note that this is about toolbar groupings in the design sense. There are some underlying tech issues that need to be addressed in order to make this happen to solve this PR.

As already proposed by Matías and Tammie, I've embraced these 4 section descriptors:

• Meta refers to actions on the block itself — its type, style, position.
• Block level refers to the HTML parlance where block level relates to the whole block. Actions here apply to the whole block, such as alignments, or in case of blocks with nesting, actions that affect all blocks inside.
• Inline level similarly refers mostly to in-text transformations such as bold or italic on a text selection. This grouping can also be Other, for actions that don't fall into any of the other groups.
• More is the overflow menu.

Mockup:

In the above mockup, the Paragraph already has correct groupings. Image and Navigation need a little work.

Related issues:

• Full height button in Cover
• Allow width controls on every block
• Design improvements to Image block toolbar
• Block Toolbar/Movers: Revisit groupings and align to a grid (can largely be closed in favor of this one)

[hedgefield]

This is really great, makes the grouping so much clearer 👍 Can it be picked up for 5.7?

[mtias]

Closing this as done.