Moderate Comment screen no longer displays raw content

[SergeyBiryukov]

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?

[johnbillion]

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:

[SergeyBiryukov]

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.

[rachelbaker]

Related (and with a similar approach) #12480

[helen]

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

[rachelbaker]

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

[rachelbaker]

Initial pass at CSS based approach

[rachelbaker]

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:

[melchoyce]

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]

add parenthesis around url

[adamsilverstein]

36380.2.diff​ variation with parenthesis, looks like this:

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:

[adamsilverstein]

In 36380.3.diff​

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

[rachelbaker]

Removed comment_text function that was leftover from a #34133 patch

[rachelbaker]

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.

[pento]

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

[boonebgorges]

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.

[jorbin]

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?

Patch to follow.

[ocean90]

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

[helen]

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

[ocean90]

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

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

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.

[ocean90]

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.

[kirasong]

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.

[jorbin]

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

[rachelbaker]

#12480 was marked as a duplicate.