Try hiding block toolbar under ellipsis

[ellatrix]

This is an alternative to #2148 and tries to address the blocky feel/noisy UI feedback.

I'm not proposing to merge this, it's just a proof of concept.

Think of it a bit as the right-click of Gutenberg.

Here are the states:

• Hover and select. We could still trim down the hover state if needed, or just design it better.

• Revealed toolbar state. Maybe I'd also move the right icons under the toolbar for a cleaner look.

• Typing state. Moving the mouse brings you back to the selected state, which happens to be the same as hover. :)

• Text selection state. Selecting some usually text implies a formatting action, so we should show the toolbar. It hides again when you remove the selection.

Things I like about this:

• Keyboard users are less likely to need the UI, so it's not there.
• When you're in the process of writing, you don't really need the toolbar. You only need it for editing (usually after you're done writing). So when you click around while writing (non heavy keyboard users), the toolbar doesn't pop in your face all the time. If you move the mouse, it's the same state as hover.
• When you are in an editing flow and need to move around text, format it, etc., you don't really need any more clicks. You can open the toolbar immediately from hovering the block. Formatting options become available as soon as you select some text, if you're a heavy mouse user.

Things I don't like about this:

• Hover state still feel strange to me, in general. Maybe it just needs a better design.

Maybe we need block setting for "object-like" blocks such as images. There it would make sense to show the toolbar all the time, though I don't mind it when I think about it as right-click for Gutenberg. It makes it feel less heavy overall.

[jasmussen]

While I do love how this looks, I'm not convinced that it's a good solution. It hides a lot of important stuff behind a small touch target, and adds friction. While not as good looking or contextual, I think the fixed toolbar (#2148) is a better "plan b" if we can't get the current system to feel lightweight enough.

[ellatrix]

@jasmussen Could you elaborate on the friction? Which flow?

…

On 7 Aug 2017, at 10:55, Joen Asmussen ***@***.***> wrote: While I do love how this looks, I'm not convinced that it's a good solution. It hides a lot of important stuff behind a small touch target, and adds friction. While not as good looking or contextual, I think the fixed toolbar (#2148) is a better "plan b" if we can't get the current system to feel lightweight enough. — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub, or mute the thread.

[jasmussen]

Sure. Right now you click the block itself to surface the quick toolbar. This is a big and easy touch target. Although I love the visual minimalism of the little ellipsis, it's a smaller touch target.

[ellatrix]

If the touch target is too small, we could always make it bigger.

Anyway, it was worth a try. :)

[jasmussen]

No exploration is wasted. Everything becomes part of the whole picture. If an avenue was explored and abandoned, it's an avenue cauterized, and intentionally not chosen. That has great value too.

[melchoyce]

While I think this is a cool exploration, I agree with @jasmussen.