Improve 'Status & visibility' panel in the inspector sidebar

[noisysocks]

Let's improve the Status & visibliity panel that appears in the document settings sidebar.

Resources:

• Blog post by @shaunandrews
• Design exploration by @javierarce

Changes required

Author popover | Popovers

• Design tweaks to Post Visibility popover #40530
• Design updates to the Publish popover (DateTimePicker) #41097
• Show user's avatar in post author dropdown #41430
• Turn Template settings panel into a Template popover #41925
• Rewrite URL (Permalink) panel as a popover #42033

Summary panel | Secondary options

• Document settings: Move 'Mark as pending', 'Revision history' and 'Trash post' to new ellipsis menu in Summary panel #42175

Editable feature image | Inline editing

• Add Featured Image, Title and Excerpt to top of the settings sidebar #42352

[noisysocks]

Hi @javierarce! Thanks for volunteering to help with this. How do the designs in @shaunandrews's post look to you? Let's get them finalised before I begin development.

I also had a couple of questions:

• Do you have a link to the mockups in Figma?
• Where should the Stick to the top of the blog and Pending review checkboxes go? I don't see them in the mockups.

[javierarce]

How do the designs in @shaunandrews's post look to you? Let's get them finalised before I begin development.

They look good, but I want to review them again since I haven't looked at them in a while.

Do you have a link to the mockups in Figma?

Here's the original file. Since it contains lots of explorations for other elements of the sidebar, I'm going to create a new file to focus on this project.

Where should the Stick to the top of the blog and Pending review checkboxes go? I don't see them in the mockups.

The "Stick to the top of blog list" is accessible through the pin icon.

I'm not sure where he placed the review checkbox on that exploration, but on a different one, he kept the checkboxes in the sidebar.

[noisysocks]

Thanks @javierarce! I'll wait for your new Figma before starting dev 😀

[tellthemachines]

Regarding the visibility radio buttons, it would be good to bear in mind the a11y issue described in #15328. The tl;dr is we should avoid popping up a dialog on switching the visibility to private. The classic editor gets around this by silently publishing the post (if it's a draft). An alternative could be to add a warning inline or underneath the private option, to make it clear that the switch to private will auto-publish the post.

[javierarce]

Thanks, @tellthemachines, I'll have that in mind.

[javierarce]

Here's the Figma file for my exploration. It includes an interactive prototype that explains the whole concept and gives some context through the lens of two other proposals. I encourage anyone to have a look before reading the rest of the issue.

The main goal of my exploration is to improve the overall legibility of the sidebar. To accomplish that, I propose reorganizing its sections (so that the most important items appear on top) and grouping the settings (so they are easier to find and manage). By applying those changes, we'll also reduce the height of the toolbar.

Structure

The sidebar I propose is divided in three main sections:

• Summary area
• Settings area
• Organization & discussion area

The summary area that sits on top of the sidebar acts as a card for the post and contains a preview of the featured image, the title, and the excerpt, plus the user (or users) that collaborated on the post.

Here's what this area would look like before and after the user has filled up the content:

Promoting the featured image and the excerpt to a top position encourages good online practices: filling up that meta-information will potentially increase the reach of the posts when shared online.

If the empty placeholder of the featured image is too prominent, we could find other ways to make it less noticeable but equally accessible. Here are a couple of ideas:

Secondary options like the one to stick the post to the top of a blog, accessing the revision history, or removing the post could be accessed through the ellipsis menu of the section.

And editing the title and the excerpt could use the inline editing proposal from Shaun's exploration, which is compact and easy to use.

Modifying the other fields will be done through popovers.

Here's my proposal for the Author popover.

As you can see in the image above, each item contains: 


• An avatar
• The display name
• A label with secondary information

We could also indicate (using an icon or a text string) which user is the owner or the original creator of the post.

Also, instead of showing the email address, we could show the user's role.

Adding users



The input field on the top of the popover allows searching and adding users to the list. If we showed the email address, we could allow searching for both the display name and the email.

Removing users


When it comes to removing users, there are two rules:




• We don't allow removing the last author. Instead, when there's just one user on the list, we disable the remove option.
• We allow removing the owner of the post, but we show a message to indicate that they were removed. This could be useful to locate the original author.

Publish settings



Right below the summary area, there could be a section that groups all the settings related to how and when the post is presented to its readers.

That section would contain settings for:

• Visibility
• Scheduling
• URL
• Template

As with the post authors, all those settings would be accessible through different popovers, which help to reduce the visual clutter on the sidebar and allow users to focus on one main task.

Secondary actions are accessed through a button or link in the header of each popover.

I won't cover each of them in this issue, but you can see how the new ones could work in the following Figma prototypes plus some iterations for each of them:

• Date popover
• URL popover
• Template popover
• Visibility popover

Iterations

To finish this comment, I'll show you a couple of simple iterations on the sidebar using the same ideas I've already presented. The one on the left is a little more compact than the sidebar I just showed you. The one on the right demotes the excerpt field.

And here's another one that includes the creation and update dates:

[noisysocks]

Looks great @javierarce!

I prefer the variation where everything is underneath Summary and not split into Summary and Publish settings. It means that we don't have to try and label the settings which can be unintuitive. For instance, why is Template a "publish setting"?

The mockups show the ability to have multiple authors, but I don't think that you can do this in WordPress without using a plugin? It's a cool feature, but would be a significant undertaking. Best to explore that separately from this project.

[noisysocks]

Updated Changes required in the description to reflect how I'd break down implementing the updated design. I probably won't be able to start on development until I'm back from vacation in mid April, though 😅

[javierarce]

I prefer the variation where everything is underneath Summary and not split into Summary and Publish settings. It means that we don't have to try and label the settings which can be unintuitive. For instance, why is Template a "publish setting"?

Maybe we could find a better name for the section. My only worry is that we end up with more than 5 or 6 options in there (the idea for the ellipsis menu for the "publish settings" would be to configure the items that appear there).

The mockups show the ability to have multiple authors, but I don't think that you can do this in WordPress without using a plugin? It's a cool feature, but would be a significant undertaking. Best to explore that separately from this project.

I'm totally OK to leave it out of this project, it was more of an exploration for the future. I'll add a variation that only shows one user and can be implemented easily.