WordPress.org

Make WordPress Core

Opened 3 years ago

Closed 2 years ago

#34133 closed enhancement (fixed)

Improve the Moderate Comment screen

Reported by: johnbillion Owned by: johnbillion
Milestone: 4.5 Priority: normal
Severity: normal Version:
Component: Comments Keywords: has-patch commit
Focuses: ui, accessibility, administration Cc:

Description

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.

Attachments (10)

Screen Shot 2015-10-02 at 20.39.07.png (295.9 KB) - added by johnbillion 3 years ago.
34133.diff (2.2 KB) - added by johnbillion 3 years ago.
after.png (330.8 KB) - added by johnbillion 3 years ago.
34133.2.diff (3.0 KB) - added by rachelbaker 2 years ago.
refreshed patch and added Edit link
comment-moderation-editing.png (111.7 KB) - added by melchoyce 2 years ago.
34133.3.diff (3.0 KB) - added by rachelbaker 2 years ago.
Using messages styles and moved "Edit" link under comment_content
34133.4.diff (3.4 KB) - added by rachelbaker 2 years ago.
Added 10px margin to Edit link
34133.5.diff (6.3 KB) - added by afercia 2 years ago.
34133_filter_text.diff (573 bytes) - added by rachelbaker 2 years ago.
Use the comment_text() function when displaying the comment_content as promised
34133_filter_text.2.diff (561 bytes) - added by rachelbaker 2 years ago.
Passing the entire WP_Comment object to the comment_text function

Download all attachments as: .zip

Change History (44)

@johnbillion
3 years ago

#1 @johnbillion
3 years ago

  • Keywords has-patch added

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?

@johnbillion
3 years ago

#2 @DrewAPicture
3 years ago

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

#3 @afercia
3 years ago

  • Focuses ui accessibility added

#4 @meta
3 years ago

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

#5 @afercia
3 years ago

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.

#6 @rachelbaker
2 years ago

  • Milestone changed from Awaiting Review to Future Release

#7 @rachelbaker
2 years ago

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

Screenshot of result: https://cldup.com/DExvOzGY73.png

@rachelbaker
2 years ago

refreshed patch and added Edit link

#8 @rachelbaker
2 years ago

@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?

#9 follow-up: @karmatosed
2 years ago

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.

#10 in reply to: ↑ 9 @afercia
2 years ago

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.

#11 follow-up: @karmatosed
2 years ago

@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 pattern of the majority I can see that as a solid argument.

Last edited 2 years ago by karmatosed (previous) (diff)

#12 @karmatosed
2 years ago

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.

https://cldup.com/j2EHy9WbFy.png

That translates to:

https://cldup.com/O3ukHe4B88.png

I also did some explorations without changing too much here:

https://cldup.com/FD16qIoxjE.png

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:

https://cldup.com/HshYIq9Y4S.png

#13 in reply to: ↑ 11 @afercia
2 years ago

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.

#14 follow-up: @melchoyce
2 years ago

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.

#15 in reply to: ↑ 14 @rachelbaker
2 years ago

@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!

#16 @rachelbaker
2 years ago

  • Milestone changed from Future Release to 4.5

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


2 years ago

@rachelbaker
2 years ago

Using messages styles and moved "Edit" link under comment_content

#18 @rachelbaker
2 years ago

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: https://cldup.com/NEhJ8C8RYm-3000x3000.png https://cldup.com/nrStFBjrN4-3000x3000.png

@melchoyce what do you think?

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


2 years ago

#20 @melchoyce
2 years ago

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
2 years ago

Added 10px margin to Edit link

#21 @rachelbaker
2 years ago

@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
2 years ago

#22 @afercia
2 years ago

@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.

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


2 years ago

#24 @rachelbaker
2 years ago

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

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

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


2 years ago

#26 @ocean90
2 years ago

@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.

#27 @johnbillion
2 years ago

  • Keywords needs-patch added; ux-feedback has-patch removed
  • Resolution fixed deleted
  • Status changed from closed to reopened

[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
2 years ago

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

#28 @rachelbaker
2 years ago

  • Keywords has-patch added; needs-patch removed

@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).

#29 follow-up: @ocean90
2 years ago

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

@rachelbaker
2 years ago

Passing the entire WP_Comment object to the comment_text function

#30 in reply to: ↑ 29 @rachelbaker
2 years ago

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

#31 @ocean90
2 years ago

  • Keywords commit added

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


2 years ago

#33 @johnbillion
2 years ago

  • Owner changed from rachelbaker to johnbillion
  • Status changed from reopened to reviewing

#34 @johnbillion
2 years ago

  • Resolution set to fixed
  • Status changed from reviewing to closed

In 37158:

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

Fixes #34133

Note: See TracTickets for help on using tickets.