Top Toolbar improvements

[mtias]

The top toolbar has stagnated a bit while the feature set of the editor has evolved. The following design addresses the most pertinent issues including:

1. The lack of parent selector for nested blocks
2. The overall increase in editor UI footprint

Original issue

In particular, the now established block parent selector is missing when top toolbar is enabled, which makes selecting some wrappers particularly challenging (group and gallery, for example). The layout also doesn't feel quite right with the block type not being aligned with the [+], and it becoming somewhat inconvenient on larger screens.

I propose we explore these two changes:

• Add direct parent selector on the left.
• Try center layout and/or floating docked toolbar.

If the docked-floated treatment works, we should have to do anything else for the parent selector. If it doesn't, we'd need some visual treatment between the parent and current block types.

[jasmussen]

Three quick options:

These ideas are mainly based off inital design outlines suggested in #20592, but with an eye towards toolbar-reuse. In the cases above, the main difference in suggestion 1 is the omission of the drag handle, and in images 2 and 3, the color/radius/padding of the toolbar itself.

[jameskoster]

Aligning with the [+] might be safer than aligning to the content due to its variable width. Without that geographical relationship, the floating/docked iteration might not work so well. Option 2 looks quite good to me.

[pablohoneyhoney]

Not sure we are there yet. The first could make sense as a natural relationship to the floating mode. The others have a strange alignment. It could be tested centered, for example, or even all the way to the left.

The uncompleted dividers are perhaps an anomaly from the rest of similar cases in the current language.

[jameskoster]

In terms of the layout, as we explore concepts here it would be good to consider other edit views like focus mode (#37946) and the upcoming zoomed-out view (#41156).

[david-gonzalez-a8c]

Hey folks!

Working on a few concepts for this, will share them shortly :)

[david-gonzalez-a8c]

Hi folks.

Worked on a couple of prototypes, I'm sharing some videos. I think it's important to see this in movement for the fixed effect and because of the change in sizes of the top bar for the child/parent block, as this could bring some visual awkwardness.

Fixed top bar center-aligned:

topbarcentered.mov

Fixed top bar left-aligned:

topbarleft.mov

For this option I've tried other alignments:

But the former felt more balanced.

Also to consider are context like these (which in my view rule out the option of merging the block toolbar and the main Gutenberg top menu):

Here I suggest the top bar if we implement any of these solutions, would "push down" the content to avoid issues like the floating toolbar is causing:
.

Would love to hear everyone's thoughts!

[jameskoster]

Another thing to consider is the interplay between top toolbar and select mode. This doesn't feel right:

[jameskoster]

which in my view rule out the option of merging the block toolbar and the main Gutenberg top menu

I'm curious to hear more of the thinking behind this. Merging seems like the most consistent approach given the array of different views that exist or are in development:

[mtias]

@david-gonzalez-a8c thanks for sharing the mockups. I like the first one, it seems worth trying to see how it feels in practice, as it solves the most salient points right now.

[david-gonzalez-a8c]

I'm curious to hear more of the thinking behind this

Hey @jameskoster. Sorry, that was a little vague on my part! I was referring to efforts in this direction, shared back in #20592.

Not only because of contexts where there's a selector in the main navigation, but also I think it's challenging when it comes to information density.

What you shared makes total sense as a solution to me! I think it's a matter of pros and cons now: I personally like the simplicity of extending the main bar like what you shared and how unambiguous is it, with the floating toolbar it may not be obvious that it will stick to the top until users scroll or play around. But then this is probably more convenient for bigger screens and I think the ability to share the same component in both modes could be valuable.

[jameskoster]

When top toolbar is enabled, the document tools could morph into block tools on selection:

It won't scale down so well to small screens, so we may have to revert to stacking there.