-
Notifications
You must be signed in to change notification settings - Fork 4.8k
Exploring beyond a sidebar for exposing styling tools #20212
Description
I am starting a new issue to not distract from the flow of the work in #19255. In that issue, I have looked at what if we stayed with the sidebar. I consider that the baseline as what is being done in prototype right now. However, the more I work on this the more limiting this feels. I took some time to explore what could be beyond this and want to say this will be much later in my mind, maybe as an iteration over having to be done in v1.
I am going to share some earlier ideas here but they are all worth sharing, sometimes when you share an early mock it sparks something, so let's do that.
In these let's put to one side how you get to the styling tools, it's about where they appear and look like.
I have for now explored the following variations:
- Toolbar with dropdowns
- Toolbar inline
- Style library: using the block library pattern
Let's dive into those!
Toolbar with dropdowns
These explorations have 3 variations to share and all work around the same premise of the toolbar having styling tools appear. There are 2 variations on those tools:
- Group under styling types
- Split into individual tools
In the mocks, you will see a few variations on those explored.
Toolbar with basic dropdown
This version has sizing tools under one section, splitting out alignment and colors.
Toolbar by type
This toolbar splits into types, for example, typography and color. This uses sub-menus to show tools. Potentially this is a little clumsy for extra interactions but that can be worked out.
Toolbar with split out tools
Here every single tool is split out and has its own drop-down the interface. This is a simpler version and very aligned to the block toolbar.
Toolbar inline
I did a few other explorations as to where this could go inline. These are varied but show some options.
Style library
What if it looked like the block library?
What if you could dock it? This image shows potentially moving to the side to 'dock' so you can interact.
What about mobile?
The great thing is that a more toolbar approach really brings easier versions on mobile:
Next steps
As I worked on this for me creating a proper toolbar with each tool as in the split out tools makes a lot of sense, but that's my own feelings. I really want to get other insights here.
I have some particular feedback I am looking for, along with wider thoughts.
- Is there one version for you feels strongest?
- If you agree with the toolbar being the way to go, should this respond to the option setting of 'in top' or 'by block' for toolbars?
- What else not explored would you like to see?
It's worth noting that iterating like this could come after we get the basic version live, this is why I am moving this out into another issue.







