WordPress.org

Make WordPress Core

Opened 4 years ago

Closed 4 years ago

Last modified 4 years ago

#36380 closed defect (bug) (fixed)

Moderate Comment screen no longer displays raw content

Reported by: SergeyBiryukov Owned by: rachelbaker
Milestone: 4.5 Priority: normal
Severity: normal Version: 4.6
Component: Comments Keywords: has-patch commit
Focuses: ui, administration Cc:
PR Number:

Description

Background: #34133

Since [36588], comment content on Moderate Comment screen is formatted for display (previously it was raw HTML code, apparently since [5543]).

It looks much better, but it also makes it much easier for commenters to insert hidden spammy links on commas and other punctuation marks that cannot be caught on moderation (see the screenshots).

So it's now harder to make sure the comment has no bogus links, which I think is the purpose of this screen.

Are we all comfortable with this change?

Attachments (11)

36380.moderate-comment-wp44.png (12.9 KB) - added by SergeyBiryukov 4 years ago.
36380.moderate-comment-wp45.png (12.1 KB) - added by SergeyBiryukov 4 years ago.
36380.diff (1.2 KB) - added by rachelbaker 4 years ago.
Initial pass at CSS based approach
36380.2.diff (1.2 KB) - added by adamsilverstein 4 years ago.
add parenthesis around url
36380.3.diff (1.4 KB) - added by adamsilverstein 4 years ago.
36380.4.diff (1.4 KB) - added by rachelbaker 4 years ago.
Removed comment_text function that was leftover from a #34133 patch
36380.5.diff (1.4 KB) - added by boonebgorges 4 years ago.
36380.6.diff (1.4 KB) - added by jorbin 4 years ago.
#444.png (309.6 KB) - added by ocean90 4 years ago.
#555d66.png (318.8 KB) - added by ocean90 4 years ago.
36380.7.diff (1.4 KB) - added by jorbin 4 years ago.

Download all attachments as: .zip

Change History (37)

#1 follow-up: @johnbillion
4 years ago

Maybe we need to take a leaf out of Akismet's book and display the URL after the link. Akismet does this on the comment listing screen:

https://i.imgur.com/cU6XgmZ.png

#2 in reply to: ↑ 1 @SergeyBiryukov
4 years ago

Replying to johnbillion:

Maybe we need to take a leaf out of Akismet's book and display the URL after the link.

Indeed, integrating that Akismet feature would resolve this.

#3 @rachelbaker
4 years ago

Related (and with a similar approach) #12480

#4 @helen
4 years ago

+1 on the way Akismet does it, I always forget that's not an actual core thing.

#5 @rachelbaker
4 years ago

  • Keywords needs-patch needs-unit-tests added; ux-feedback 2nd-opinion removed

#6 @rachelbaker
4 years ago

  • Milestone changed from Awaiting Review to 4.5

@SergeyBiryukov @johnbillion @helen Is this something we should fix in 4.5?

@rachelbaker
4 years ago

Initial pass at CSS based approach

#7 @rachelbaker
4 years ago

  • Keywords has-patch ux-feedback dev-feedback added; needs-patch needs-unit-tests removed

In 36380.diff I used the CSS :after pseudo-element along with the content property to output the value of the href attributes. This is the same approach Akismet uses.

I am not happy with the CSS selectors I am using. If this approach looks good, feedback on how to best target the comment_content here without impacting the "Edit Comment" comment link within the same table cell would be appreciated.

Screenshot of the link appearance:
https://cldup.com/MFWMA7vltG.thumb.png

#8 @melchoyce
4 years ago

Looks good. I'd maybe also wrap the url in parenthesis, but that's just a minor stylistic preference.

@michaelarestad what do you think about the selectors?

@adamsilverstein
4 years ago

add parenthesis around url

#9 @adamsilverstein
4 years ago

36380.2.diff variation with parenthesis, looks like this:

http://cl.ly/1t1u3U3M2f08/Moderate_Comment__Dev_Test__WordPress_2016-04-04_08-35-37.jpg

I also tested in ie8 to verify the css works properly; the targeting isn't quite right in ie8, the Edit link at the bottom is also getting the link added after:

http://cl.ly/203U162O3r1h/Dashboard_2016-04-04_08-36-57.jpg

#10 @adamsilverstein
4 years ago

In 36380.3.diff

  • add an edit-comment class the <p> tag surrounding the final link. Fixes targeting of final link in ie8.

@rachelbaker
4 years ago

Removed comment_text function that was leftover from a #34133 patch

#11 @rachelbaker
4 years ago

In 36380.4.diff I removed a change from #34133 (https://core.trac.wordpress.org/attachment/ticket/34133/34133_filter_text.2.diff) that wasn't intended to be included in this ticket.

#12 @mikeschroder
4 years ago

  • Owner set to rachelbaker
  • Status changed from new to assigned

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


4 years ago

#14 @pento
4 years ago

  • Keywords dev-feedback removed

Assuming no other style changes from @melchoyce or @michaelarestad, 36380.4.diff is good to commit.

@boonebgorges
4 years ago

#15 @boonebgorges
4 years ago

  • Keywords commit added; ux-feedback removed

36380.5.diff refreshes the patch after [37158]. (No lines of code were touched, but some adjacent lines were modified, making it impossible to apply cleanly.)

+1 from me to commit.

#16 @jorbin
4 years ago

The grey used ( #82878c ) has a contrast ratio of only 3.6:1 which is below the 4.5:1 WCAG 2.0 AA recommendation. Can we go darker? Perhaps using a monospaced font to help it stand out?

https://cldup.com/Zyp19xVlK0-3000x3000.png

Patch to follow.

@jorbin
4 years ago

#17 @ocean90
4 years ago

Not sure if using the same color as the default text is a good idea. Maybe go with #555d66 instead?

@ocean90
4 years ago

@ocean90
4 years ago

#18 @helen
4 years ago

@ocean90 In your screenshots, are those URLs actually linked in the comment as written or were they made links through make_clickable()? The redundancy there is pretty distracting.

#19 @ocean90
4 years ago

@helen Yeah, that's the result of make_clickable(). I agree that it looks weird but I don't see an easy way to not target them.

#20 follow-up: @jorbin
4 years ago

My goal of using the same color was to not introduce yet another gray. The difference between #444 and the other grays we have available that are accessible is fairly low.

Besides color, what other ideas do people have for making this distinct? We could try a background color, but I worry that will be to distracting.

#21 in reply to: ↑ 20 @ocean90
4 years ago

Replying to jorbin:

My goal of using the same color was to not introduce yet another gray. The difference between #444 and the other grays we have available that are accessible is fairly low.

I think the handbook page needs an update, because http://codepen.io/hugobaeta/full/RNOzoV/ has other colors,  #555d66 gets used a few times in core.

Edit: NVM, the handbook page lists just a few of them.

Last edited 4 years ago by ocean90 (previous) (diff)

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


4 years ago

#23 @mikeschroder
4 years ago

Can we pick a grey that is not indistinguishable from the normal text and go with it?

Leaning towards the patch that has already been approved, but with a color with high enough contrast.

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


4 years ago

@jorbin
4 years ago

#25 @jorbin
4 years ago

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

In 37161:

Make Moderate Comment Screen Great Again by showing links

You know what's wrong with the Moderate Comment Screen? It doesn't win anymore. Well, I'm going make the Moderate Comment screen win. It's going to win by showing the urls that are linked to from every anchor. It's going to win by having those urls be a lighter shade of gray than the surrounding text. Spammy links aren't going to be able to hide in commas. Spammy links aren't going to win. The Moderate Comment Screen is going to win and we are going to make the Moderate Comment Screen Great Again.

Fixes #36380
Props rachelbaker, mikeschroder, adamsilverstein, boonebgorges, melchoyce, ocean90, jorbin, pento

#26 @rachelbaker
4 years ago

#12480 was marked as a duplicate.

Note: See TracTickets for help on using tickets.