Heading block controls: show buttons to set heading size about gutenberg HOT 6 CLOSED

This is addressed in the mockups. Relabelling the ticket to serve as a design task, hope that's okay ❤️

from gutenberg.

Here's a quick idea for showing fewer options, but with an arrow to expand to more:

And this video shows an idea to show a preview of the heading size (or whatever style) rather than a generic H1 icon:

from gutenberg.

The current mockups provide block level controls to change the type/size of heading, with "Heading" still being a single block:

Every level of heading, 1-6, are shown here so you can in only two clicks set the size of a heading (click block, click size). Alternate ideas explored included up/down arrows to bump or reduce the size of a heading, but these would require multiple clicks.

But the H1/H2/H3 ... buttons aren't very inviting, and feel very "techy". Is there a better way to solve this? A better icon design? Can we show 6 levels of sizes in six different icons? Should we only show sizes 1-3 (with sized icons) and show the rest in a dropdown?

Input welcome!

from gutenberg.

So in the spirit of exploration, here's a crazy idea:

The icons are a little fuzzy and unpolished, but this embraces the fact that H2 and H3 are technically separate blocks (as opposed to how we've seen it so far as a Heading block with the size being the defining difference).

Basically you pick the size of you heading here. Or you pick text, or quote or whatever it needs to be. The formatting toolbar is then contextual to the type.

from gutenberg.

Here's a more basic one, which is more akin to Shauns version above:

from gutenberg.

Closing in favor of #313

from gutenberg.