WordPress.org

Make WordPress Core

Opened 5 years ago

Last modified 6 months ago

#28006 assigned feature request

Add visual cues when viewing drafts on the frontend

Reported by: hlashbrooke Owned by:
Milestone: Awaiting Review Priority: normal
Severity: normal Version:
Component: Posts, Post Types Keywords: needs-design
Focuses: template Cc:
PR Number:

Description

This is a relatively minor issue, but I've often had the problem where I think a post is published because I can view it on the frontend and there is nothing on the page that indicates that I am viewing a draft. If this happens to me from time to time then I'm sure it happens to other users too.

I propose adding a few unobtrusive visual cues to the single post page that indicates that you are viewing a draft. I have attached my changes here - they include:

  • Adding "(Draft)" to the end the 'edit post' text in the admin bar
  • Adding "(Draft)" to the end of the default link generated by edit_post_link()
  • Adding a new body class to single post pages: single-status-{status}

These changes are minor enough to not break the existing display, yet significant enough to clearly show that you are currently viewing a draft. The addition of the post status to the body class will also help with customising the page according to the current status.

Attachments (3)

28006.diff (1.8 KB) - added by hlashbrooke 5 years ago.
Changes as listed in ticket description
28006.2.diff (1.2 KB) - added by hlashbrooke 5 years ago.
Removes 'draft' suffixes and adds 'draft' prefix to post title
28006.3.diff (972 bytes) - added by hlashbrooke 5 years ago.
Removes 'Draft:' from post title, but leaves body class in place

Download all attachments as: .zip

Change History (26)

@hlashbrooke
5 years ago

Changes as listed in ticket description

#1 @hlashbrooke
5 years ago

  • Keywords has-patch added

#2 follow-up: @johnbillion
5 years ago

  • Focuses template added; ui removed

Makes sense. We should do this in the same way we do it for private posts; prefix the status in get_the_title(). See here.

#3 in reply to: ↑ 2 @hlashbrooke
5 years ago

Replying to johnbillion:

Makes sense. We should do this in the same way we do it for private posts; prefix the status in get_the_title(). See here.

I considered that, but I was trying to make sure that the draft posts look identical to how they will look after they're published and prefixing the title seemed a bit too intrusive. Maybe not though - happy to add that into the patch as well :)

#4 follow-up: @SergeyBiryukov
5 years ago

  • Version changed from trunk to 3.9

From i18n perspective, we can't just combine "Edit This" and "Draft" as separate strings, we need a new string in order for it to be translated properly.

I think johnbillion's suggestion might actually be enough here.

#5 in reply to: ↑ 4 @hlashbrooke
5 years ago

Replying to SergeyBiryukov:

From i18n perspective, we can't just combine "Edit This" and "Draft" as separate strings, we need a new string in order for it to be translated properly.

I think johnbillion's suggestion might actually be enough here.

Thanks - I wasn't sure of the best way to handle the i18n side of things, so thought I would wait for feedback on that.

I'll make a new patch that just includes the body class and the title prefix in the same way that the 'private' prefix is handled.

@hlashbrooke
5 years ago

Removes 'draft' suffixes and adds 'draft' prefix to post title

#6 @SergeyBiryukov
5 years ago

  • Milestone changed from Awaiting Review to 4.0

#7 @johnbillion
5 years ago

  • Owner set to johnbillion
  • Resolution set to fixed
  • Status changed from new to closed

In 28963:

Prepend "Draft:" to draft post titles when previewing on the front end, and add a "single-status-$status" class to the body classes for all post statuses. Fixes #28006. Props hlashbrooke

#8 @krogsgard
5 years ago

I hate to be the debbie downer.

I've given this patch some serious thought, and I think it's a bad idea.

In short, it makes the "Preview" not much of a preview. Example: https://cloudup.com/cMgS64JVDUL

I write a lot. Title wrapping absolutely plays a role in my decision making for a title. Widows and Orphans are a big deal in typography, and the tone of a post can change with a widow. Adding "Draft: " to the title prevents the previewer from properly previewing and catching these typography issues.

I *do* actually like the idea of noting post status in the preview mode, but I think this is the wrong way, and the bad outweighs the benefit.

I know the patch was made to match the "Private" post style. I'd argue the private post style is the one that needs to change, to whatever format we decide to be better for drafts (or why exclude any non-published format for that matter?)

So I propose we re-think this solution, and then apply the new solution to private (and maybe other non-publish status) posts as well.

#9 @nacin
5 years ago

  • Keywords revert 2nd-opinion added
  • Resolution fixed deleted
  • Status changed from closed to reopened

I agree with krogsgard here. I think it's cruft, unnecessary, and also a nightmare for those trying to control their widows.

The only reason why this is here for Private is it is a terminal status. (I'm not even a fan of it there, but that stems more from disliking private posts in general.) Meanwhile, Draft is transitional.

There are limited situations where you need a body class at all. But especially for a post status on a single post. post_class() is still in play here, which will give you the status classes. How often are you really going to need to style outside the post based on status? This is redundant and crufty. If your design happens to need this, then you should add it yourself.

I'm not saying the use cases are invalid. I'm simply saying core shouldn't do anything for them. Happy to be disagreed with, but I think both changes here are unnecessary and that [28963] should be reverted. Maybe there is a solution here to help with confusion but these are not it.

#10 follow-up: @hlashbrooke
5 years ago

Even though I wrote this patch, I do tend to agree with Brian on this too. My initial patch was to append the title with '(Draft)' - also none too elegant, but it would have made title wrapping easier to predict.

My suggestion would be to remove the 'Draft:' text from the title, but keep the body class as this would give themes a way to modify the display slightly for any status. This simplifies the patch somewhat, but right now I can't think of another way of indicating that the post is a draft. Happy to take suggestions for that :)

Last edited 5 years ago by hlashbrooke (previous) (diff)

@hlashbrooke
5 years ago

Removes 'Draft:' from post title, but leaves body class in place

#11 @obenland
5 years ago

  • Keywords commit added; revert 2nd-opinion removed

#12 in reply to: ↑ 10 @SergeyBiryukov
5 years ago

Replying to hlashbrooke:

My suggestion would be to remove the 'Draft:' text from the title, but keep the body class as this would give themes a way to modify the display slightly for any status.

As noted in comment:9, it's possible to do that with post_class(). It's also trivial to add it via body_class filter if necessary, so I'm going to revert [28963] completely.

#14 @SergeyBiryukov
5 years ago

  • Keywords has-patch commit removed
  • Milestone changed from 4.0 to Future Release

This ticket was mentioned in Slack in #core by nacin. View the logs.


5 years ago

#16 @iseulde
4 years ago

  • Milestone changed from Future Release to Awaiting Review
  • Version 3.9 deleted

#17 @johnbillion
4 years ago

  • Keywords ux-feedback added
  • Type changed from enhancement to feature request

This ticket was mentioned in Slack in #design by karmatosed. View the logs.


2 years ago

#19 @karmatosed
2 years ago

With the changes happening on Gutenberg, I would suggest this could be reviewed as part of that. @joen just pinging you to take a look at this.

#20 @johnbillion
2 years ago

  • Owner johnbillion deleted
  • Status changed from reopened to assigned

This ticket was mentioned in Slack in #design by karmatosed. View the logs.


17 months ago

This ticket was mentioned in Slack in #design by karmatosed. View the logs.


6 months ago

#23 @melchoyce
6 months ago

  • Keywords needs-design added; ux-feedback removed

Let's take a step back and think about more potential solutions, outside of the previously proposed ideas. Would anyone be interested in proposing some alternative ideas either as designs or patches?

Note: See TracTickets for help on using tickets.