Add a preview section to the pre-publish sidebar

[javierarce]

After working on the Status & Visibility panel improvements, we found that certain elements could be more appropriate and helpful inside the pre-publish sidebar. We also thought that we could use this opportunity to refresh the design of the sidebar a little bit and rethink some of its functionality.

The main changes I’m proposing involve showing the Featured Image and the Excerpt and reducing the interactions that users can perform at this stage of the flow.

Here’s an example of what the current interface looks like after hitting the publish button of a post:

We show the name and URL of the blog, allow users to modify the visibility and publication date of the content, and give some suggestions to describe the post through tags and/or categorize it.

Here’s my proposal for the sidebar:

This new sidebar integrates the elements mentioned before but also includes the title of the content and the permalink (replacing the blog information, which I think is less important at this point of the flow), the user, and the categories and tags that the author applied to the content.

I removed the options to update the visibility and publishing date because they can be modified easily by going back to the previous state. Instead, I placed the information more prominently on top of the sidebar. This new position makes more sense for this info now that we will be adding more content to the panel.

PS: There’s a related open issue (Remove or filter the default panels in the PrePublish sidebar) that could benefit from this change.

Here's an idea to avoid rendering a large list of categories by default: the full list is visible by clicking on the "See categories" link.

And here are different examples of the text we could show for each visibility status. The idea is to render the shortest text that we can without sacrificing legibility. For example, in the case of posts that are marked as public (the default option), we don’t say “public”. We also hide the year if the post is scheduled for the current one, and say “tomorrow” if the post is going to be published on the next day.

• Your post will go live immediately
• Your private post will go live on March 10 at 11:10 am
• Your password-protected post will go live tomorrow at 00:30 am

The suggestions will keep working as they do now, but they won’t have to compete for the attention with the now-gone Publish and Visibility sections.

And here are some examples of the sidebar with and without some types of content:

Finally, there’s something I haven't figured out yet:


Now that there’s more content in the column pushing the suggestions down in the sidebar... should we move them up? Or maybe make the new section with the preview foldable? We could also mention that there are suggestions in the first section of the sidebar.

Here are some ideas:

In addition to the previous exploration, I also played with the idea of showing icons to describe each field:

Please, let me know what you think of this proposal. The designs can also be found in this Figma file.

---

cc: @noisysocks @Mamaduka

[noisysocks]

Looking good!

Here's an idea to avoid rendering a large list of categories by default: the full list is visible by clicking on the "See categories" link.

This is nice for when there are lots of categories but I'd expect that in the vast majority of cases there will be only 1-3 categories. What should the text say when there is 1 category, 2 categories, and 3 categories?

Now that there’s more content in the column pushing the suggestions down in the sidebar... should we move them up?

Personally I like the first treatment you have here where Preview is in its own collapsable section as it adds some hierarchy.

[javierarce]

This is nice for when there are lots of categories but I'd expect that in the vast majority of cases there will be only 1-3 categories. What should the text say when there is 1 category, 2 categories, and 3 categories?

You are making a good point, and I was probably being too extreme on the number of categories we show. Showing up to three by default seems reasonable, if there are four or more we could just say "See all".

Personally I like the first treatment you have here where Preview is in its own collapsable section as it adds some hierarchy.

That could also have the benefit of helping with keyboard navigation by reducing the number of elements one would need to go through.

[jasmussen]

I still love the colophon view for this, and the pre-publish flow could be the right place for it.

One thing I'd love for us to test out before we go too much further in implementation, is how this looks with plugins that add items to this post-publish dialog. Jetpack and Yoast come to mind:

Let's make sure those options don't get pushed too far down. Some visual reduction, and/or max-heights/eliding can probably help ensure that.

[jasmussen]

I took a quick stab at the plugin issue :

☝️ this work is incomplete and not meant to replace the work provided in this ticket. It is, perhaps, a smaller interim step onto bigger and better things.

[javierarce]

Thanks for those alternatives, @jasmussen, and for pointing out the potential long sidebars we could end up having. My only comments about the designs you propose are:

• I think the design in the middle is a bit busy in the top section under the featured image. What do you think about removing the Visibility and Publish sections and integrating that information (without any interactivity) on the top, as I did?
• Since we are showing the URL of the content, do we really need to show the site's favicon and the title? Could we remove it and save some space?
• I like the idea of the right-hand side design where you show buttons to add tags and categories… would they open a popover? I considered a similar option too, but I discarded it because of previous pushback when I proposed popovers on the document sidebar.

[jasmussen]

Great thoughts!

What do you think about removing the Visibility and Publish sections and integrating that information (without any interactivity) on the top, as I did?

It's a feeling that those are some of the most important last minute things you want to check, so important they appear interactive. But it's not a strong opinion, and the primary goal of the mockup was to explore if there was a smaller interim step we could take.

Since we are showing the URL of the content, do we really need to show the site's favicon and the title? Could we remove it and save some space?

Probably, yes. There could also be an opportunity here to consider the cases where a featured image has not been set — is that when this shows up? Or what does it look like otherwise?

I like the idea of the right-hand side design where you show buttons to add tags and categories… would they open a popover? I considered a similar option too, but I discarded it because of previous pushback when I proposed popovers on the document sidebar.

I'm not too confident in these, but the idea at the time was for the button to just output the control inline.

[javierarce]

It's a feeling that those are some of the most important last minute things you want to check, so important they appear interactive. But it's not a strong opinion, and the primary goal of the mockup was to explore if there was a smaller interim step we could take.

Removing existing functionality is always difficult, but since users can change the date and visibility in the previous sidebar, if we make sure the information is easy to spot, we could have a good justification for the removal. The benefit of eliminating those fields is of course that we get back some space to use in the new sections.

There could also be an opportunity here to consider the cases where a featured image has not been set — is that when this shows up? Or what does it look like otherwise?

I think making the blog information dependent on the Feature Image could be confusing and I would prefer to keep the variations at a minimum. Maybe we could integrate the favicon next to the title, although, with an excerpt the section looks unbalanced:

I'm not too confident in these, but the idea at the time was for the button to just output the control inline.

I've decided to review my idea of avoiding the popovers and combine it with something similar to those buttons you added:

The difference in height is only noticeable when there's an excerpt and a featured image (and we could reduce it further by removing the author's name). I think that, with these changes, the sidebar as a whole is easier to read than our current stack of toggleable sections

In any case, thinking of a smaller interim version maybe we could do something like this:

The changes would be:

• Rewriting the copy at the top of the sidebar to reflect the visibility and publication date.
• Adding the Featured Image, title, URL, and excerpt.
• Removing the Visibility and Publish sections.

[joedolson]

At this stage, considering design only, we don't have any significant accessibility feedback. With the removal of the publish & visibility controls, it's possible that having 'Cancel' move the user directly into the post panel could be useful. That might mean automatically opening the settings panel if it's currently closed. I think that would make sense, anyway.

[skorasaurus]

related: Requesting to customize the pre-publish sidebar #17112

[Mamaduka]

@WordPress/gutenberg-design can we close this issue? After recent refactoring, the proposed design has been incorporated into Document Settings.

[jasmussen]

Yes, we can! I want to take a moment and acknowledge that this work by Javi informed what's shipping now in WordPress, even if some details have been adjusted. Thank you for your contributions, Javi!