Improve the Moderate Comment screen

[johnbillion]

The Approve, Trash, and Spam links in comment moderation emails send you to the Moderate Comment screen in WordPress, which doesn't get much love.

Three main problems with this screen:

• The comment appears in escaped HTML form, so all of the text appears as one massive block with no formatting. See screenshot.
• The comment date links to a non-existent permalink (this is also the case in other places in the admin area).
• There's no link to the comment editing screen, which takes a minimum of two clicks to reach from here.

[johnbillion]

34133.diff​ addresses the formatting of the comment text and the comment permalink.

I'm not sure where to place an 'Edit Comment' link. Next to the 'Cancel' link at the bottom, maybe?

[DrewAPicture]

Would be good to get some a11y feedback here as well from @afercia.

[meta]

Also, the date is in the wrong format. It ought to be formatted as per the preferences in Settings > General.

[afercia]

From an accessibility perspective I don't see big issues in these screens. Ideally, the admin menu and toolbar should be hidden, I see this workflow more like something that should bring users from the notification email to a simplified screen and not the "full" admin. I understand this would require some discussion :)
Meanwhile, maybe adding #wpbody-content to the links could help. A simple "in-page link" would let users land directly on the relevant content.

[rachelbaker]

In 34133.2.diff​, I refreshed @johnbillion's initial patch after r35665 and took a stab at adding the "Edit" link.

Screenshot of result:

[rachelbaker]

refreshed patch and added Edit link

[rachelbaker]

@karmatosed @melchoyce Did either of you have opinions (or perhaps different ideas) on first steps being taken here to improve this often forgotten about screen? Or the location of the "Edit" link?

[karmatosed]

A few things strike me:

• Approving and cancelling buttons shouldn't be together.
• The message should be where the action is. It is above.

Those are just off cuff thoughts, I'd be happy to take a look at this over the next few days and put up a suggested refinement on the great work done so far.

[afercia]

Replying to karmatosed:

A few things strike me:

• Approving and cancelling buttons shouldn't be together.

Can you please expand a bit on this? As fas as I see, there's no established convention in WordPress admin, sometimes they're together, sometimes not. From an accessibility perspective, proximity of UI controls is very important, thinking for example at screen magnifiers.

[karmatosed]

@afercia is proximity of UI controls important when they are opposite controls for accessibility? That's the instance I'm talking about. The issue is mistaking one for the other. Accidently clicking either because they are beside each other and often look the same.

I agree though there is no established convention in admin - a point perhaps wider than this ticket. For the case of this ticket we should perhaps take the majority I can see that as a solid argument.

[karmatosed]

I've done some explorations and found a pattern we probably could follow if we want consistency with this - which we probably do without creating something new at this stage.

That translates to:

I also did some explorations without changing too much here:

Probably, the least friction creating and more beneficial in light of comments and without testing of new patterns would be the existing pattern. I do still think we could change some of those patterns for the behaviour but airing on this maybe not being the ticket to do that in.

My only other suggestion could be to use the warning styling for the message like this:

[afercia]

Replying to karmatosed:

@afercia is proximity of UI controls important when they are opposite controls for accessibility? That's the instance I'm talking about.

@karmatosed thanks, yep I guess there are pros and cons, something not strictly related to this ticket though. Just noticed in the majority of cases when there are multiple controls on the same row, the current WordPress convention is to put the primary control on the right (see for example Quick Edit and Bulk Edit but also the smaller Publish box). Not saying that I like that :) but that's what WordPress is using right now.

I agree though there is no established convention in admin - a point perhaps wider than this ticket.

Agreed! Thanks.

[melchoyce]

Since in this case, the primary action of this screen is whatever action you clicked to get to this screen — spamming, trashing, or approving — I think it is appropriate to use the [ Primary Button ] Cancel pattern.

Of the proposed edit locations, I think a link underneath the "Comment" label makes the most sense.

Another option could be adding a new paragraph at the bottom of the comment that contains the edit link. I'll add a quick mockup to show what I mean.

[rachelbaker]

@melchoyce @karmatosed @afercia All of the thoughtful suggestions here make sense. With the luxury of being able to compare them all together, I fear absence of a primary button (to perform the primary moderation action) would be a disservice.

@melchoyce do you think having the "Edit" link at the bottom of the comment_content makes it easy to lose?

@karmatosed Great idea to use the warning styling on the message!

[rachelbaker]

Using messages styles and moved "Edit" link under comment_content

[rachelbaker]

In 34133.3.diff​:

• moved the Edit link under the comment_content
• added markup to display the "Caution" message using current warning message styles (per @karmatosed's suggestion)

The results:

@melchoyce what do you think?

[melchoyce]

Can you throw a little extra space between the "Edit" link and the comment? Maybe another 5px? Should help it stand out more. Otherwise, looks good to me.

[rachelbaker]

Added 10px margin to Edit link

[rachelbaker]

@afercia I was about to commit this and then realized I missed this comment of yours:

From an accessibility perspective I don't see big issues in these screens. Ideally, the admin menu and toolbar should be hidden, I see this workflow more like something that should bring users from the notification email to a simplified screen and not the "full" admin. I understand this would require some discussion :)
Meanwhile, maybe adding #wpbody-content to the links could help. A simple "in-page link" would let users land directly on the relevant content.

Would you be able to refresh 34133.4.diff​ with your suggested changes?

[afercia]

@rachelbaker hi. In the refreshed patch I've just hardcoded #wpbody-content appending it to all the links. By the way, this won't work when users are logged out and have to log in again. Not sure what to do about this :) Fixed also a couple of double spaces.

[rachelbaker]

In 36588:

Comments: Refresh the Moderate Comment screen for a friendlier experience with email moderation actions.

Brings some love to this neglected screen:

• format comment_content, instead of escaping in one massive block of text
• only wrap the comment date in a link if the comment permalink exists
• include link to the Edit Comment screen at the bottom of the comment_content
• update the message styles to match other screens
• append #wpbody-content to the comment email message links for accessibility

Props johnbillion, rachelbaker, afercia, melchoyce, karmatosed.

Fixes #34133

[ocean90]

@rachelbaker Was there a reason for not using comment_text( $comment ) like done in 34133.diff​ by @johnbillion?

IMO the ticket isn't fixed yet since it's still a "one massive block with no formatting", see ​https://cloudup.com/ihcE1Y5Xt1l.

[johnbillion]

[36588] fixed removed the escaping of comment content, but as @ocean90 pointed out it doesn't format the content, so a comment with paragraphs will still appear as one large block of text.

[rachelbaker]

Use the comment_text() function when displaying the comment_content as promised

[rachelbaker]

@johnbillion @ocean90 I don't know how I missed this! 34133_filter_text.diff​ uses the comment_text() function to format the output (as was promised/intended in this ticket).

[ocean90]

@rachelbaker Although the first argument is named $comment_ID, comment_text() supports the WP_Comment object too.

[rachelbaker]

Passing the entire WP_Comment object to the comment_text function

[rachelbaker]

Replying to ocean90:

@rachelbaker Although the first argument is named $comment_ID, comment_text() supports the WP_Comment object too.

Well look at that! Adjusted in 34133_filter_text.2.diff​

[ocean90]

34133_filter_text.2.diff​ looks good.

[johnbillion]

In 37158:

Comments: Wrap the formatted comment text on the comment moderation screen in comment_text() so paragraphs and texturisation are applied.

Fixes #34133