Gutenberg: Consider changing settings/sidebar icon from a cog to a sidebar

[jasmussen]

Gutenberg comes with a sidebar that is enabled by default. This sidebar, so far, we've called the "Settings" sidebar, because it contains settings for _the post_ (or page or cpt), as well as settings for _the block itself_. We've also fondly referred to it as "the inspector", as it allows you to "inspect the blocks".

Is the "Cog" the best icon for this? What if we drew an actual "Sidebar" icon, like this?

And if we like a sidebar icon like the above, would we need to change the _label_ for this sidebar? Is it still "Settings"? Or should it be "Settings sidebar"? Or perhaps _Inspector_?

CC: @afercia @karmatosed @mtias @folletto

[jasmussen]

As an addition to this, we'll want to consider what to show on mobile, as obviously phones can't show the sidebar at all, on mobile it's a popover. This is the latest mockup currently:

Do we just keep the cog for mobile?

[afercia]

Worth noting also the sidebar ARIA region uses an aria-label "Editor settings". Maybe we should try to clarify _what_ the sidebar content is before trying to find a new name.

Not sure about "Inspector", it sounds too technical. "Sidebar" doesn't identify so much what the sidebar content is. Actually, the sidebar content is a mix of different things and I can't think of a better name other than "Settings".

[folletto]

Maybe we should try to clarify what the sidebar content is

Good point.

I'll give it a go, feel free to correct me if I'm mistaken:

1. The Document tab (static) — things that can be configured at document level, and generally don't change on any single post/page.
2. The Block tab (dynamic) — this is what the inspector takes the name as it exists in other platforms (i.e. macOS "Inspector", Adobe "Property Inspector", ...). It usually refers to a part of the UI that adapt dynamically to whatever is the selected object. As such, it's also empty if there are no selected items. Using inspector would feel familiar to anyone already comfortable with these tools, but would be neutral to anyone else.

As such there are two slightly different _intents_ going on in the sidebar, even if there's also a clear commonality.

---

Label

I feel "Documents & Block Settings" could be good for ARIA if we want something a little longer, otherwise I feel "Settings" to be clear as a single word, which could also be used as button label if we ever want one.

---

Icon

As for the icon, I think the major determinant is the lack of label, which means that an icon would be fairly obscure regardless. I think we could do something more than a cog – while keeping the cog as a fallback if we don't find anything sharp.

A very rough idea riffing on yours Joen, that would hint at a sidebar, but also it work for mobile too:

[mtias]

Worth noting the sidebar panel itself will be extensible, and plugins can render a full set of tools there, so it's not just document and block settings either. I do like the genericness of the sidebar icon for that purpose, at that point it's more about toggling the panel visible or hidden.

Wonder if the approach Ulysses does could work:

The icon is a toggle like ours, but it also let's you navigate to the specifics within the dropdown, which in our cases could be (document / block settings).

[folletto]

Note that Ulysses dropdown is a switcher between different layout configurations of the sidebar (which is toggled by the button), not a navigation to the specific panel (even if it doubles as that if the panel is closed, and the switcher is used instead of the toggle button).

In their scenario, I think it's worth it — I'm less sure about our scenario as we don't toggle multiple layouts (1-2-3-4 columns) but a single column that has its own switcher tabs.

[mtias]

I don't see that as fundamentally different, and the single toggle action works very much the same.

[folletto]

Yep, the single toggle has the same functionality 👍

[karmatosed]

Do we just keep the cog for mobile?

I'm not sure about that, I think it's a 'section' so we could not keep the cog for mobile.

at that point it's more about toggling the panel visible or hidden

This resonates strongly for me. Should it therefore more indicate visibility over even a sidebar?

Out of all the icons then that have been suggested my pick would be to work on this one from @folletto:

It's not stating a sidebar specifically as 'something more'.

[karmatosed]

Looping back to this, I would love to see us decide on a pattern here. I think that getting rid of the cog on all cases is still a good plan. It's just a matter I think of deciding the option here. What happens for example if we don't have an icon but have the word? I am not sure that's good going forward but worth considering.

[folletto]

I'd prefer words when space is not an issue — I just think there are scenarios where this will collapse to an icon tho... happy to be proven wrong and see that's possible. :)

[jasmussen]

While I like the sidebar icon, it feels like changes to Gutenberg since we discussed this initially have, at least for me, suggested that the cog is still the right icon.

The cog, compared to the sidebar icon I initially drew, scales across devices. Other icons in this thread also do, but the cog still feels to me like the most generic and _base_ icon. This ties into the second reason.

Since we discussed this, we've discussed how Gutenberg can be extended natively in #3330. One of the bigger APIs being built is a sidebar API, where plugins have the option to untoggle the post settings sidebar (if present), and toggle their own, and additionally pin an icon next to the Settings cog. So you could potentially have icons for Spell-Check, Grammarly, Yoast, or an number of others, right after the Settings cog. On mobile breakpoints, these would all overflow into the More menu, but you'd always have the cog to _configure the post_.

[jasmussen]

Noting that while there is not a complete agreement on what the best path forward is here — a better icon than the cog still seems to be desired — I'm going to close this one for now, because the change is not urgent.

As a bit of repository management, I've also filed it in the "Ideas" project so we can revisit this in the future: https://github.com/WordPress/gutenberg/projects/8

[kjellr]

Adding another thought to this thread: I frequently experience confusion around the difference between the functionality of the "Cog" and "Ellipsis" icons. The cog means "settings" to me, but both menus include settings of some sort.

I'd love for us to in some way clarify that the "Cog" icon is specifically about the document/block settings, whereas the "Ellipsis" icon is primarily about the editor itself (I think that's a fair distinction, but please correct me if that's not the case 😄).