Consider a new order and grouping for the toolbar controlsTry/toolbar controls order grouping

[afercia]

This PR is a first try to experiment the design proposal in #467. Before moving on and refine things, it would be great to have some testing and feedback.

Gains:

• Publishing is the main goal here, so that should be the first action.
• Previewing is related to achieving that goal, and to preview you need to save, so grouping those actions together will eliminate some confusion. The icon for saving can also display a spinner (and then a checkmark) while (auto)saving.
• In order of 'user needs', adding blocks to the page is next up, followed by undo-ing and re-do-ing what you do in those blocks. This also groups the icon + text buttons, which brings some calm to the toolbar.
• Switching from visual to text is something you do a limited amount of times per post edit, so it should be clearly findable, but not a blocking higher-order element.
• The settings toggle should be directly next to the sidebar, as it will 'spawn' something coming from that side of the screen. Making it stick to that side will make it more intuitive if somebody is searching for it. When the sidebar is hidden, the mode switcher could move next to the settings button.

Screenshot on the issue.

Note: the save buttons would need a new icon.

Minor glitches to address noticed so far:

• when saving, the Save button text changes and thus the button width changes: all the following elements get moved horizontally
• when closing the sidebar, the "Mode Switcher" hangs in a awkward position :)

The responsive view has some pre-existing issues, unrelated to this PR. However, now also the Preview link gets hidden on very small screens, this improves things a bit.

Personally, I think this goes in the right direction even if maybe it's not still there. Grouping together Publish, Saved state, and Preview makes a lot of sense to me.
Considering plugins might want to add their controls in the toolbar, the space is very limited especially on small screens. Maybe worth considering to split the Inserter, Undo/Redo and move them elsewhere...

[afercia]

[anna-harrison]

Hi - I've spent some time looking through the design issues in this ticket, as well as the related discussion in #467, and have penned recommendations and backing research here

tl;dr we will need to make a choice as to whether we optimise the design for sighted readers, or for screen readers as eye-tracking research indicates that these two use cases are at odds with each other

Taking all the factors into consideration, I would recommend that the toolbar is implemented as follows, full rationale in the notes here

/cc @melchoyce @karmatosed @jasmussen @afercia

[karmatosed]

Thanks for taking time to look at this @annaephox

we will need to make a choice as to whether we optimise the design for sighted readers, or for screen readers as eye-tracking research indicates that these two use cases are at odds with each other

I think we need to be very careful here as both are important users. I still believe we can make it work for both. It's worth noting eye-tracking isn't a perfect research to rely on. We totally can consider it as part of the research but it's not good to use it as a rule. Where things like neurodiversity and vision complications come in, it simply can't be relied - that is a lot of the population.

With regards to the PR, there's a lot here so lets break down into sections. First, I do not think reversing the order makes sense. The top right is prime location (although we could debate is that only in cultures where the language flows that direction) and having that be the publish feels and works naturally for users. @afercia is there no way that can be accessible?

[karmatosed]

Closing as I advised this to be broken down and we need to get feedback from testing.