Skip to content

Exploring beyond a sidebar for exposing styling tools #20212

@karmatosed

Description

@karmatosed

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

1

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.

2

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.

3

Toolbar inline

I did a few other explorations as to where this could go inline. These are varied but show some options.

4

5

Style library

What if it looked like the block library?

6

What if you could dock it? This image shows potentially moving to the side to 'dock' so you can interact.

7

What about mobile?

The great thing is that a more toolbar approach really brings easier versions on mobile:

8

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.

Metadata

Metadata

Assignees

No one assigned

    Labels

    Global StylesAnything related to the broader Global Styles efforts, including Styles Engine and theme.jsonNeeds Accessibility FeedbackNeed input from accessibilityNeeds Design FeedbackNeeds general design feedback.[Focus] Accessibility (a11y)Changes that impact accessibility and need corresponding review (e.g. markup changes).

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions