Feature Request: Preview drafts in category archives and homepage.

[hearvox]

WordPress would surpass all other CMSs by adding the ability to preview draft posts in category archive and home pages, as they would display when published. Publishers would discover, before hitting publish, things like:

• A too-long title that takes too many lines.
• An excerpt with too-similar language as adjacent posts.
• A thumbnail that doesn't look good next to the others in the list.

Right now we find these things out (as do our readers) only after post is public.

I know this means a query that includes 'post_status' -> 'draft'. I'd recommend the normal nav in Customizer stay the same (i.e, archives list only published posts). But we add a couple new preview buttons: Category and Home, for checking a draft in these archive views.

It'd be part of a post's pre-Publish workflow: Make sure post's content displays well on mobile and tablet devices, then check the title/excerpt/thumbnail display on category and home pages.

I'm not a great coder so may not be much help there, but, if interested, I could enlist some national journalism and pubmedia sites as testors.

[westonruter]

@hearvox thanks for the suggestion. But it seems that what you're suggesting is already a feature of the plugin? Currently if you create a new post in the customizer, you can navigate to the homepage or to the category archive on which it would appear, and you'll see the post appear there as it will once it is published. (Note that assigning a post to a category is not yet built, see #58.)

[hearvox]

@westonruter Currently when I Preview a post with status Draft (and Customize Posts activated), I see the draft post displayed in single page view. But if I click to that posts Category archive, the draft post isn't listed, only published posts display, (Tested in multiple themes including 2016.)

I do NOT see the behavior you describe:

Currently if you create a new post in the customizer, you can navigate to the homepage or to the category archive on which it would appear, and you'll see the post appear there as it will once it is published.

I see that only after the post is published/public. Am I missing something, a way to preview a post in archives while it's still a draft? Thanks for any info you can provide.

And BTW, Customize Posts plugin rox, hard. Wonderful work.

[westonruter]

@hearvox ah, I meant you have to have the status in the set to “Published” for the post in the customizer. Can you confirm that a new pre-published post appears on the homepage and archives when you set the status to Published (even though the underlying post is a draft or auto-draft in the DB)?

[hearvox]

@westonruter I see what you mean in your screenshot, and that would be lovely solution. But I am NOT seeing the Status dropdown in the Customizing > Posts in the Customizer. Tested on a WP Engine-hosted set in both a custom and 2016 theme. From Edit Post screen I hit Preview and get:

Be glad to test on other sites on other webhosts if you want.

[hearvox]

OK, I do get that Status dropdown when I use the View Post link, then the Customize link in the Admin-bar. That works great. Seems that Date and Stats do not display from Edit Post screen Preview button. Not does the Save & Publish button. Bug?

(BTW, when I set the draft post's status to Publish, works just as you described: display in archive views .like Category and Home. Excellent.)

[westonruter]

@hearvox yeah, it's a known issue. It's captured in a todo here:

wp-customize-posts/js/customize-post-section.js

Line 280 in f885db7

// @todo Add support for syncing status and date from Customizer to post edit screen.

Another option rather than implementing the sync between the post status control in the customizer with the UI in the edit post screen would be to just always open the customizer preview from the edit post screen with the status forcibly set to publish. Since the customizer is a “dead end” when opened from the post edit screen, it doesn't really matter which status we use. If we let it default to “Published” instead of “Draft” then it would appear everywhere like you're looking for.

[hearvox]

FWIW, that's my $0.02: I think it best to leave the Edit Post's Preview functionality the same as a default WP install, aka, NOT engaging the Customizer. This way users can still get a full-window preview -- the Customizer grabs lots of screen real-estate, posibly problematic for previewing on laptops.

So it would only be the admin-bar Customize link that Customizing> Posts screen (BTW, shouldn't it be singular "> Post"?). In a sense, this distinguishes between the concept of preview and that of customize, and offers both options.

An issue would be discoverability of the admin-bar link -- could easily be missed. You could have on-boarding instructions, or maybe a Customize button in the Edit Post screen (the approach many premium theme customizers use, like Fusion Builder.)

For now tho, I'll just advise folk to use the Customize admin-bar link and all will be well. Thanks much.

[westonruter]

So it would only be the admin-bar Customize link that Customizing> Posts screen (BTW, shouldn't it be singular "> Post"?)

It's named this way because it's a singular Post section within a Posts panel. So “> Posts” is not the terminal node in the breadcrumbs there, but rather the parent breadcrumb. The terminal breadcrumb node is the title of the post itself in the post section, here for the “Hello World” post:

FWIW, that's my $0.02: I think it best to leave the Edit Post's Preview functionality the same as a default WP install, aka, NOT engaging the Customizer. This way users can still get a full-window preview -- the Customizer grabs lots of screen real-estate, posibly problematic for previewing on laptops.

They can still grab the full real-estate if they click the Close Controls (Collapse) button. In addition to this, they also have the device preview buttons to preview how the post will look on tablet and mobile screens:

Something else to a user could do is click the permalink instead of clicking the Preview button:

The caveat here is that this permalink won't POST any unsaved changes, but that's something that could be added.

An issue would be discoverability of the admin-bar link -- could easily be missed. You could have on-boarding instructions, or maybe a Customize button in the Edit Post screen (the approach many premium theme customizers use, like Fusion Builder.)

Perhaps adding a Customize button like appears like on the widgets and nav menus prompting users to “Manage with Live Preview”:

[hearvox]

Re: the heading of the Customizer's Posts panel: Using the plural makes sense. But perhaps it'd be more obvious is it continues the grammatical construction by adding an > after Posts:

Or perhaps a colon after Posts:

But I'm not sure Customizing and Posts aren't really the same kind of hierarchy as are Posts and the post's title, so maybe Customizing gets the colon:

Customize Posts functionality is likely to become a major feature of WP. So if you can nail the best UI grammar protocols now, that'll smooth the transition. Goals for language and grammar would be:

• Clarity of functionality.
• Clarity of hierarchies.
• Adopting existing WP grammatical conventions when possible.

I'll thumb thru the the rest of Customize Posts, and the existing Dashboard, to look for current conventions and similarities that might help.

[hearvox]

They can still grab the full real-estate if they click the Close Controls (Collapse) button

Right, forgot all about that. Guess my main concern is the potential user-shock of such a different UI for the editing experience. Seems like the more Customize Posts feels like an extension of the existing Edit Posts, rather than a complete replacement, then quicker it will be adopted.

CP may, in fact, become a replacement.for many editing tasks, but for now, I think of it as somewhere between Quick Edit on All Posts lists and the Edit Post panel and (with CP's obvious advantage of live previews, but w/o the full-page of customizing options of Edit Post -- e.g., for adding values in the many custom fields which popular plugins like ACF and Yoast SEO use.)

So a typical user may draft a post in Edit Posts, then, when all the CFs have values, switch to Customizing > Posts panel to tweak Title/Excerpt, then maybe back to Edit Posts to polish content in distraction-free window, etc..

So what would "feel" best is when user switches panels like this, the UI makes CP seem as connected as possible to Edit Posts. (Sorry to ramble on, especially with nothing concrete to suggest yet.)

One more thought: most users at a >1-person organization, will never have seen the Customizer UI. That's used by the admin/designer/devs to setup site, but never by the average content creator: Customize Posts may be their first glimpse of the Customizer.

The simplest ways to make their transition smoothest might be things like similar language/grammar and easy, intuitive switching between CP and Edit Post. I'll cogitate and do more testing to see if I have anything but this blathering to contribute. Thanks for listening, @westonruter

[hearvox]

I think the transition from Edit Posts to Customizing > Posts is already quite smooth (the big top-right close <. That works great. So perhaps the transition to Edit Posts is all that needs attention.

I really like your idea of basing it on the the Widgets panel UI -- I would suggest using the same wording:

[hearvox]

Another option rather than implementing the sync between the post status control in the customizer with the UI in the edit post screen would be to just always open the customizer preview from the edit post screen with the status forcibly set to publish. Since the customizer is a “dead end” when opened from the post edit screen, it doesn't really matter which status we use. If we let it default to “Published” instead of “Draft” then it would appear everywhere like you're looking for.

I think you're saying when the Edit Post user hit Preview button on a draft page, the post gets a 'publish' status in the CP panel.One problem with that is: The Preview button and the Customize admin-bar link now preview differently with no easy way for the user to understand why.

(Pretty sure you aren't suggesting the Customize link also force "publish' as that could lead to users not noticing that the drafts "Saved" button has switch to "Save & Publish" and inadvertently publishing when they'd intended only to save draft changes.)

Seems there are three different but overlapping concepts/wordings: Preview, Live Preview, Customize, Edit.

The two ways to launch CP's panel use different terms; both use existing WP admin links:

• From View Post, "Customize" launches the full Customizing >Posts.
• From Edit Post, "Preview" launches a limited Customizing >Posts. (Or "Preview Changes" if post is published.)

Maybe in the Edit Post panel, CP needs to distinguish itself from the existing WP language and use "Live Preview," as WP does in Widgets.

However when viewing a post, using the existing admin-bar "Customize" link makes sense, the behavior is expected: the Customizer then defaults to the CP Posts panel, now part of the Customizer's hierarchy.