Rethink the View (device emulation), Preview, and View Post UI

[afercia]

Description

Splitting this out from ongoing conversation in #65856

I'm not sure the current UI for the View (device emulation), Preview, and View Post features provides an easily understandable UI and usable experience for users. I think there are some different concepts here that are either mixed together or not well communicated and I see room for improvements.

View

This button provides access to a dropdown menu where there are two entirely different concepts mixed together:
For the sake of clarity I'll call the Desktop, Tablet, and Mobile views 'device emulation tools'.

This feature is meant to allow users to check their content and design by emulating the viewport of different devices. It's actually a 'device emulation' tool. When changing device emulation, the toggle button icon changes to communicate whether it's desktop, tablet, or mobile:

Still, these device emulation tools are grouped within a menu labeled 'View', which is not fully representative of the feature and also confusing because the same term is used for different features.

Additionally, the dropdown menu also contains the 'Preview in a new tab'. This feature is entirely different. It allows users to see a preview of their live changes even the changes that haven't been saved yet. This is an entirely different concept. As such, I think the Preview link is misplaced and should not live in this menu.

Preview and View

'Preview in a new tab' and 'View Post' use the same icon. However, they're functionally different. The UI doesn't do a great job with communicating what the difference is. Also, 'Preview in a new tab' is an extremely useful feature to check your live changes but it's buried down in a menu and not very discoverable. As an user, when I'm editing a post, I want this button to be more prominent and I don't want to click twice to use it.

The difference between the two buttons:

• 'View Post' only appears when there is a published version. It's meant to see the published post.
• 'Preview in a new tab' is always available. For a published post, it shows your live changes even when they're not saved yer. This is extremely useful and makes this control related to the concept of 'working version', while 'View Post' is the published version.

I'd think all these concepts should be clearly separated and better presented in the UI.

Proposal

As a prerequisite, I'd love to know if there's any data or tracking of how users use the 'device emulation tools'. I think it's fundamental to understand how often users use them and whether they find them useful in the first place.
I can only report my personal experience:

• When editing a post, I use them very very rarely. I only need to check how my post will look on Tablet and Mobile in rare cases, e.g. with a large table or content that may potentially look not that great on smaller viewports.
• Potentially, I'd find the 'device emulation tools' more useful when designing my site in the Site Editor. However, I don't use them because I think the browsers built-in emulation tools are way superior. I tend to think theme authors, plugin authors, designers and site creators will do the same. Just my guess, we still have no data.

Overall, I'm not sure the 'device emulation tools' menu should be placed in such a prominent position.
Instead, I think 'Preview in a new tab' should be way more prominent. It is way more useful in an editorial flow. It allows to see the live changes and as an user I'd want that link to be a top level control.

I'd propose to consider to:

1. Move 'Preview in a new tab' to the top bar. It should be clearly distinguished from 'View Post' and make clear it's a tool to see your live changes, even the ones that aren't saved yet.
2. The 'View' dropdown should be renamed and moved elsewhere. I'd love to have data to support my feeling that these tools aren't used that often. I'd consider to move them to a less prominent place. They shouldn't be in the top bar.
3. Overall, I'd like to propose to make the right part of the top bar an area that only contains controls related to the save / preview / publish / view editorial flow. Those are logically related features that should stay together while the device emulation tools are more a design tool.
4. On a published post, when there are no live changes, 'Preview in a new tab' should be (accessibly) disabled because there's no live changes to see. In this scenario, only 'View Post' should be enabled.
5. Rename 'Preview in a new tab' to make more clear it shows your changes e.g. 'Preview changes'. It's not a case that this is what Classic Editor always did for published posts:

I'd definitely leverage the ability to see both the published version and the working version in two different browser tabs. This is a powerful tool to let users compare the changes they are making but then 'Preview in a new tab' and 'View Post' should be top level controls in the top bar and renamed to better explain what they are about.

Step-by-step reproduction instructions

• Edit a published post.
• Make some changes to the content and let your changes unsaved.
• Click 'Preview in a new tab'
• Click 'View Post'.
• Observe in the new two tabs that open, you can check the published version and the 'live changes' version.
• Observe 'Preview in a new tab' is palced inside the device emulation menu and it's not a top level control in the top bar.

Screenshots, screen recording, code snippet

No response

Environment info

No response

Please confirm that you have searched existing issues in the repo.

• Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

• Yes