A vertical block toolbar for horizontally challenged contexts

[stokesman]

What problem does this address?

In the Customizer’s widget editor the top/fixed toolbar often cannot display all of it's button at once and must be horizontally scrolled.

What is your proposed solution?

A vertically oriented toolbar. In many cases there will be sufficient viewport height to accommodate all the toolbar buttons and, if not, perhaps scrolling vertically would be less challenging.

Considerations or potential blockers

• In order to not obscure portions of the blocks we'd probably want to narrow the space for blocks in the editor canvas as seen in the screen recording.
• Buttons with text-only labels need truncation (or iconification?).

vertical-block-toolbar-top.mp4

[stokesman]

@critterverse or @jasmussen, Let me know if this has already been discussed and discarded and I'll be glad to close it. I tried it out of curiosity and don't love it but thought it could be worth a look.

[jasmussen]

This is a wild and fun exploration, thanks for doing that!

I recall we actually did explore a vertical block toolbar in the 18667 explorations, for exactly that reason: constrained contexts. Ultimately that wasn't the path taken, primarily because it required a minimum height of the viewport, rather than a minimum width, and for 1-line paragraphs in the block editor, a very tall block toolbar tipped the balance.

However in context of the customizer, it's definitely intriguing to see! I'm not aware of how much support is meant to be built in for mobile editing in the customizer — that might present a problem if the soft-keyboard covers the bottom half of the screen — but if the customizer is mostly a desktop affordance, I could see it working. Ultimately I would defer to @critterverse on this, she's had some excellent thoughts on this lately. But really nice work!

[critterverse]

Hey @stokesman, this is great work! I really appreciate the fresh thinking here — thanks for jumping in to contribute to some of the trickier toolbar issues in the Customizer, both here and in #32490.

I think we will likely run into some of the same issues here that we’ve run into with the fixed version of the toolbar — particularly around scrolling the toolbar (touched on this a bit in #32062). While the vertical format definitely fits the space better, I imagine that some of the longer toolbars (List block, Image block, etc) are going to end up needing to scroll — especially for users who are navigating using with a zoomed-in view.

These issues are a bit more exaggerated in the horizontal context but I believe some of the same issues would carry over to the vertical solution. Usability-wise, one of the biggest questions is around discoverability that there is "more" unseen content when scroll bars are sometimes hidden by default and the containers themselves don't look very scrollable. (There's also plenty of room for improvement aesthetically speaking as well 😅 )

Whatever solutions are applied to help resolve the horizontal fixed toolbar could also apply to this vertical version. I think it would be super cool to explore adding something like this as a preference for the Customizer widgets screen (and potentially in other locations as well as blocks continue to be expanded into new and sometimes constrained contexts).

Some early thoughts and brainstorming around these scrolling fixes can be found in #30720 (comment) — I’m hoping to pick back up on that exploration and will be sure to tag this proposal into any new enhancement issues as well!

[noisysocks]

I'm going to close this out as it hasn't gotten much traction. Happy to reopen if there are folks interested in opening up a PR to explore these ideas 🙏