Refining the rightmost top toolbar actions for clarity and consistency

[jasmussen]

The top toolbar is an important part of the publishing and saving flow. At the moment, the actions on the right-most side are a bit mixed and unstructured. Post editor, from left to right:

• Save draft/Saved
• Device previews
• View published post/page
• Publish
• Inspector
• Sidebar plugin slots
• Ellipsis/more menu

The site editor is similar, except it adds a global styles item in place of the plugin slot, and the Publish button says "Save". In both cases the most prominent action, the Publish/Save button jumps around in its placement, and the position of the inspector and global styles toggle buttons can be very random depending on how many plugins you might have:

Proposal

We can refine this a bit through moving the Publish/Save button to a consistent spot, and putting plugin slots to the left of that. Post editor, before and after:

New order, emphasis on the items moved:

• Save draft/Saved
• Device previews
• View published post/page
• Sidebar plugin slots
• Inspector
• Publish
• Ellipsis/more menu

Similar changes can be made for the site editor:

New order, emphasis on the items moved:

• Device previews
• Global styles
• Inspector
• Save
• Ellipsis/more menu

The result makes the two editors much more coherent to switch between, since the primary save/publish action is always in the same place:

Tasks

• [ ] Move the .editor-post-publish-button__button to the right of "Options"
• [ ] Reorder interface-pinned-items so the the Inspector is furthest to the right.

[james-tyner]

I love this. We have had the experience of adding plugins that introduce their own icons or buttons, causing the Publish button to move around… it's really disconcerting for users when the action that's the most important is so inconsistent.

I think it might make sense to keep the action that opens the right sidebar (you call it the "inspector"?) to the right of the Publish/Schedule/Save button, just to align its placement better with the user's mental model of the inspector as a sidebar that slides out from the right edge of the screen.

[jasmussen]

Thank you!

I think it might make sense to keep the action that opens the right sidebar (you call it the "inspector"?) to the right of the Publish/Schedule/Save button, just to align its placement better with the user's mental model of the inspector as a sidebar that slides out from the right edge of the screen.

I like the idea of grouping them with other sidebar plugin buttons, mostly for simplicity and because it's the same API. Since that inspector is a core feature, it also mainly raises the question of whether the global styles sidebar toggle should also be to the right of the save button, and then we're back to the save button moving around.

[jhmonroe]

While this change and these mockups are great, they don't show these buttons in the context of what falls beneath them which is very important and we have a chance here to fix a much bigger confusion about these buttons:

1. Moving Save makes a lot of sense since when it jumps around I have certainly seen this confuse clients/newbies. And the proposed order is perfect. Def YES!
2. Global Styles and Right Sidebar are not really buttons at all and are actually TABS to change the workspace drastically (and are parents of the tabs that nest below them when activated). Whereas the other buttons perform a different type of smaller action (open window, change responsive view). This is perhaps why the Save button was initially used like a separator to cluster these various actions (and keep them with three dots ellipsis which activates directly on top of them).
3. If clustering everything together, perhaps some type of visual separation is still needed to distinguish those small single actions and the much more experience-changing Global Styles and Sidebar buttons. Perhaps a gray | vertical bar?
4. Even better, Global Styles & Sidebar could actually be styled more like tabs or at the very least WIDER buttons. They should be at least as wide as "Page" and "Block" and could actually be underlined in blue when activated to show the same "on" state that the child tabs have (and thus reinforcing this consistent user experience for people). Perhaps this is why the original design adds a blue border when clicked (which goes away if you click anywhere else, so maybe it's just a browser highlight?)

This is something that is endlessly confusing to people and styling them as tabs would immediately make the hierarchy clear. Forgive bad sketch! If I had Figma access I would make a better one for you :-) "Switching between interfaces that use the same space" which Global Styles & Right Sidebar do!

[jasmussen]

Some valid points there, they do look a bit further than this issue which is intentionally kept minimal to make it very actionable for a dev to quickly reshuffle. That said, feel free to open a new issue with suggestion mockups, happy to discuss there!

If I had Figma access I would make a better one for you :-)

Paid edit access to the WordPress library is reserved for a subset of contributors, and only when they are actively working on something—the bill adds up! That said, Figma has a free tier which lets you create drafts. A common way of working is to copy/paste components from the WordPress library, or even duplicate that file to your drafts if need be, and then simply working with draft files. Happy to help there, you can find me in the core slack if need be! Thanks for contributing.

[jasmussen]

Noting one challenge with this, the the default inspector, as well as the Global Styles inspector are both registered as regular slots like all others. Which means they are registered left to right, and in this case we'd want the inspector toggle to be right-most.

[richtabor]

Which means they are registered left to right, and in this case we'd want the inspector toggle to be right-most.

100%. It should always be in the same spot.

[mtias]

Let's do this, it's a step in the right direction :)

[talldan]

Fixed by https://github.com/WordPress/gutenberg/pull/65163