Top toolbar: Refine the icons on the right

[jasmussen]

A few recent changes happened to the top toolbar:

• A new device icon indicator in the preview dropdown
• Moving the "Switch to draft" button into the inspector for published posts
• Showing the "Saved" state indicator also for published posts.
• A new "View post" icon button

The buttons are a mix of colors and styles, and could use a little cleaning up:

Here's a design iteration that accounts for both post editor and site editors:

Before	After

Main changes:

• Same color for all icon buttons
• Leveraging an icon-button for the device preview button
• Can show the "View post" always, just link to the preview before publishing.

---

Post updated Jun 6.

[jameskoster]

Could we just always show the "View post" button, and have it act as preview if unpublished?

Yep, I think that could work for the post editor. We'll need to add the equivalent button to the Site Editor, perhaps as a part of #50378?

[jasmussen]

Tentatively updated the post and added the dev label.

[jameskoster]

Are the proposed changes for the post editor, site editor, or both?

The Site Editor may require a little more thought as the draft concept doesn't really exist there yet.

[jasmussen]

It was actually both site editor and post editor, but I forgot to include the site editor, and perhaps I should omit the document title as that's just distracting from the rest. Here's a clearer comparison:

Before	After

[jameskoster]

Bingo!

[juanfra]

I was taking a look at this one, and I have a doubt.

Leveraging an icon-button for the device preview button

^ Does it mean that we want to remove the dropdown for the preview/view?

[jasmussen]

No, that would still drop down and show the devices plus labels, the dropdown would just be opened by an icon button.

But maybe the "Preview in new tab" option was extracted into the "View post" button instead, making the dropdown devices-only.

[juanfra]

Perfect, thanks for the clarification :)

[juanfra]

I had some time to work on this today, and I found a small constraint with moving the "Preview in new tab" to the "View" button.

While in the draft post-editing context it could make sense to have something like that (because eventually, the behavior of the two buttons would be the same), when a post/page is already published, the value of the "preview" is to view how the changes (not saved) could look. Whereas the "view" always opens the public content (what's saved). So we would have two functionalities competing in one button.

Screen.Recording.2023-06-20.at.13.23.07.mov

I'm unsure if it is an ideal UX to have a button behaving differently in two contexts. Plus, having the "View" button previewing can be confusing as well (It'll be next to a "Preview" dropdown). And, as these two would be competing, we would have to decide on which one to leave out. As a user, I would expect to be able to still preview changes without saving.

What I would propose is to:

• Have the "View" button disabled (or could also be hidden, as it is now) when in draft-context.
• Enabling the "View" button once the post/page is published.
• Keep the "Preview in new tab" under the preview dropdown, so that we keep the functionality available.

Screen.Recording.2023-06-20.at.13.30.47.mov

The other thing I was thinking is if, in favor of consistency, we could think of having a "View site" button in the site editor. That could maybe be a different discussion (could be contextual when editing pages, or just general to view the site).

[jasmussen]

when a post/page is already published, the value of the "preview" is to view how the changes (not saved) could look. Whereas the "view" always opens the public content (what's saved). So we would have two functionalities competing in one button.

That's a great clarification. Yes indeed. To me that actually suggests keeping the existing trunk behavior, which is have the preview in new tab continue to exist in the dropdown, and then add a new "View site" button once published.

Can we try that as a starting point?

Another option which I wouldn't start with, is to keep the view post button and have it be a preview until published, then a view link, but also keep the "preview in new tab" button in the dropdown. Not quite as elegant, but a potential plan B.