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.

[jasmussen]

This is looking good! This part alone feels potent:

This segment reads almost like a "colophon", an inscription of publication facts that you'll usually see at the end of a book. It's reads like a single piece of prose, yet it integrates title, featured image, excerpt and author in an organic and intuitive structure.

Even if this one piece is the only thing we implement as a starting point, it'll be an excellent improvement.

[ZebulanStanphill]

I really like these mockups from a visual and organization perspective, but I question the accessibility here. There seems to be a lot of buttons that are labeled with the value of a setting, rather than an actual description of what the button does. Granted, the current design already has this problem, but these mockups make the issue even more prevalent by extending it to stuff like the author and summary fields.

#470 is one of the oldest issues in this repository, and unfortunately, these mockups seem to worsen the described problem.

And I should note that I'm not just talking about screen readers. In fact, I'm mostly talking about visual usability. It genuinely is confusing to have buttons not be labeled according to their actions. If I see blue text with the name of an author, I might think that it's a link to their profile, rather than a way to edit the author list.

[jasmussen]

@noisysocks What if we start with just the colophon part as outlined here? I'd be super happy to pair on it, do the CSS/style work.

[ntsekouras]

@noisysocks What if we start with just the colophon part as #39082 (comment)? I'd be super happy to pair on it, do the CSS/style work.

FYI I'll start a first version of this with @jasmussen' s support 😄

[jasmussen]

This week, @ntsekouras and I tried a V1 of the Summary panel to see if including just the colophon part could work. A few issues emerged, so we'll be reverting it for now. What we learned from the effort can help inform the future direction of this ticket.

Mainly, the omission of the ellipsis control for managing metadata came with a few downsides:

• Instead of becoming mainly a summary, it fully absorbed Excerpt and Featured Image panels, making it less clear how to add/edit those.
• In giving prime real estate to the empty placeholders, it gave prominence to the excerpt and featured image features that is not always deserved: they are crucial for posts that need them, but not all posts do.

Both of these issues feel partially solved already through the ellipsis functionality outlined on this ticket, suggesting the V1 of this feature should include that functionality.

One take-away worth revisiting is the flow of how excerpts and images are added: perhaps instead of being placeholders to fill out, the summary can be mostly a static representation of only that which is added. The act of adding these can then remain a separate part of the summary. Something to explore!

The effort did validate the clear context the metadata gives when filled out, showing an elegant summary of the document. In fact, when this returns, we should consider adding and integrating this summary also in the pre-publish flow.

[noisysocks]

Thanks for the exploration @ntsekouras and @jasmussen! I'm back at work now so will get going on this.

Instead of becoming mainly a summary, it fully absorbed Excerpt and Featured Image panels, making it less clear how to add/edit those.

I think it's pretty clear how to add a title, excerpt, and featured image because we show a placeholder.

But you're right that, when these fields have content, it's not very clear that these fields are editable.

Maybe we can go back to showing an outline as in @shaunandrews's proposal or use a pencil icon as in David's (sorry, don't know his handle) proposal.

I'll leave it up to @javierarce to iterate here 😀

In giving prime real estate to the empty placeholders, it gave prominence to the excerpt and featured image features that is not always deserved: they are crucial for posts that need them, but not all posts do.

Well put. It's why I prefer the variation that makes Set featured image appear less prominent and keeps Excerpt in its own dedicated panel.

[jasmussen]

One idea I think could be interesting to explore:

• Keeping the summary panel truly inert — literally a summary.
• Don't show any placeholders at all, see how it looks if we summarize only that which has been filled out. If you haven't filled out an excerpt or a featured image, you'd get only the Title and the Author.
• This summary could play a key role in the pre/post-publish flow.
• Excerpt and Featured Image panels remain, either as bespoke collapsible panels as they are today, or as sections that can be added using an ellipsis menu flow.
  • Doing so would allow us to start with the Summary and postpone any ellipsis mechanisms, as a followup step.

The above would not preclude future explorations in terms of retirement or otherwise, but based on our experiment, it seems like the most pragmatic way to start. What do you think?

[javierarce]

@noisysocks:

Maybe we can go back to showing an outline as in @shaunandrews's proposal or use a pencil icon as in David's (sorry, don't know his handle) proposal.

Those two ideas are also present in my prototype, so I'd say let's go for it :)

@jasmussen:

The above would not preclude future explorations in terms of retirement or otherwise, but based on our experiment, it seems like the most pragmatic way to start. What do you think?

The problem I see with this approach is that, even if this could be useful (which I think it could be), we would be adding more elements to the interface instead of removing stuff. For me, this idea could be a good middle point only if we end up implementing the editable version.

[jasmussen]

To expand a bit, I mean for that suggested approach to be a stepping stone, not the final destination. It may be easier to implement in steps, and doing so may unearth challenges along the way. The ellipsis to add/subtract properties seems promising enough!

[noisysocks]

Update

The new designs for all popovers (Visibility, Publish, URL, Template) have been implemented and are live in the Gutenberg plugin.

Work is underway on adding new UI for Featured image, Title and Excerpt in #42352.

Work is underway on rehoming the Mark as pending, Revision history and Trash post buttons in #42175.

Implementing the new design for the Author dropdown requires some underlying work on CustomSelectControl which @ciampo is exploring in #41726. If this is too slow for WP 6.1 though then we can resort to the more temporary approach taken in #41430.

When the above PRs are merged I think we can consider this project complete.

[javierarce]

I've been trying to find a good way to solve the problem that @ZebulanStanphill pointed out about the label + value rows not being clear enough (and maybe even #470):

It genuinely is confusing to have buttons not be labeled according to their actions. If I see blue text with the name of an author, I might think that it's a link to their profile, rather than a way to edit the author list.

While thinking of a solution I came across this tweet that shows how the new iOS version is solving a similar problem.

So in the same spirit, I'd like to get feedback on the following idea: placing an icon next to each value to indicate that the element is not a regular link/button.

The following image shows several ideas for that icon: a double chevron, a horizontal ellipsis, a pencil, sliders, and a cog.

[javierarce]

And here's another idea to group the settings while at the same time making the connection between labels and values clearer.

In the image below the settings are grouped using a border around each item, in a table-like configuration. I've also added a version with an icon on the right side, as I did in my previous comment.

A similar solution was also shared by @shaunandrews in this post. I think adding icons as he did could also work, but I prefer a purely text-based version since the horizontal space is limited.

[javierarce]

After excellent work led by @noisysocks and @Mamaduka, we are quite close to getting most of the original proposal implemented, but I'd like to get final approval from @WordPress/gutenberg-design, @mtias, and other participants on this thread before we go ahead and merge the following changes:

• Add Featured Image, Title and Excerpt to top of the settings sidebar #42352
• Add UI for toggling Summary fields #42546

Back on this thread, @jasmussen mentioned that:

One take-away worth revisiting is the flow of how excerpts and images are added: perhaps instead of being placeholders to fill out, the summary can be mostly a static representation of only that which is added. The act of adding these can then remain a separate part of the summary. Something to explore!

This is something I've explored in this quick iteration, where users can toggle the preview of the Featured Image and Excerpt in the summary, but the redundancy of those elements feels difficult to defend and could be confusing for the user.

I still think that moving the Featured Image and Excerpt sections to the top of the sidebar makes sense, even if not all users fill them, because it promotes good practices, improves the IA, and serves as an elegant (as Joen said) summary of the publication, but I'd like to hear more voices.

[critterverse]

Thanks for the summary @javierarce! It's exciting to see how far this work has come so far.

I'd like to suggest a change to #42352 because the current implementation shares many of the same issues with the previous exploration that was reverted (see @jasmussen's summary of that exploration above).

Can we instead try this summary panel as a part of the pre-publish panel? That way we won't be putting too much prominence on the Featured Image and Excerpt by having those appear right at the top of the document settings. This would also allow us to keep the existing Featured Image and Excerpt panels without having confusing duplication in the UI.

What do others think about giving this a try?

[javierarce]

Thanks, @critterverse! This sounds good to me. The pre-publish panel could benefit from a small redesign, and it's a logical place to show the featured image and excerpt. I'll offer a design for this, open a new issue, and close this one if that's ok.

[javierarce]

Ok, I've opened an issue to enhance the pre-publish sidebar, and I'm closing this one.

[Walrus117]

All done. I'll post a plugin for it soon.

[ivantomicic]

@WalrusRIK do you have any updates on this plugin? This is exactly what I'm looking for.

[Walrus117]

It is complete and I'm using it. Unfortunately I'm not familiar with the Wordpress plugin upload procedures and having taken a look a few weeks ago it appears to be both time consuming and has a delay of several months on their review process. I suppose I could provide it privately, it does represent a week of work however.

[ivantomicic]

@WalrusRIK ok, don't do it because of me, but if you ever have something thats available to look at, I'd be very happy to check it out!

[Walrus117]

@WalrusRIK ok, don't do it because of me, but if you ever have something thats available to look at, I'd be very happy to check it out!

I should probably have someone else test it anyway. Would you be open to trying it but not sharing it for now. I've created two versions. A simple panel that gives the ability to control page title and excerpt without needing to add the relevant blocks and the graphical version that looks and functions exactly like the mock up in this post. The idea could be that the simple one is free and the graphical one has a small fee.

[ivantomicic]

@WalrusRIK ok, don't do it because of me, but if you ever have something thats available to look at, I'd be very happy to check it out!

I should probably have someone else test it anyway. Would you be open to trying it but not sharing it for now. I've created two versions. A simple panel that gives the ability to control page title and excerpt without needing to add the relevant blocks and the graphical version that looks and functions exactly like the mock up in this post. The idea could be that the simple one is free and the graphical one has a small fee.

Absolutely! Feel free to ping me at [email protected]

[Walrus117]

@WalrusRIK ok, don't do it because of me, but if you ever have something thats available to look at, I'd be very happy to check it out!

I should probably have someone else test it anyway. Would you be open to trying it but not sharing it for now. I've created two versions. A simple panel that gives the ability to control page title and excerpt without needing to add the relevant blocks and the graphical version that looks and functions exactly like the mock up in this post. The idea could be that the simple one is free and the graphical one has a small fee.

I'll clean it all up a bit and get something over to you. R.
...SENT