Wp-calypso: Comments: Moderation actions in the Reader

[gwwar]

In the Reader, if a user is an Author or above, let's give users another workflow option for moderating comments, and render both pending and approved comments. This is a tracking issue for the design discussion. I'll be breaking this down into smaller technical tasks.

Open Technical Tasks:

• [ ] setup another user interview to test a few prototypes.
• [ ] Link/Button to Manage Comments #19720
• [ ] Display Pending Comments In Reader #19726
• [ ] Actions on Pending Comments #19727
• [ ] Undo placeholders #19728

• Make sure pending comments do not appear in Conversations
• Look into success transitions

So as @drw158 noted:

• no trashed or spam comments, only pending and approved
• trashing/spamming a comment will remove it and be replaced by some sort of notice with an undo.
• no edit action

_( 🔎 image is now big)_

@jancavan suggests to hide all actions behind the hamburger, but note that we should still display actions for pending comments.

See related p5PDj3-4cR-p2

[blowery]

does clicking on "Approved ✅" unapprove the comment?

[gwwar]

Does clicking on "Approved ✅" unapprove the comment?

That's correct! If this looks noisy, we can certainly consider slimming down actions on already approved comments in the reader if we have a "manage comments" button available. I'd be fine if we only had "like" and "reply" like we do currently, with more options available on pending comments.

[gwwar]

Oh and @drw158, @jancavan did we need any change in styling for comments awaiting moderation?

[jancavan]

did we need any change in styling for comments awaiting moderation?

It should mirror /comments(yellow background with yellow left border).

[jancavan]

I've created a quick mockup showing all options for comments awaiting moderation. The same options are collapsed into an ellipsis for comments that have been approved. But we want users to still be able to quickly undo the action so the ellipsis should only show after refreshing the page.

Can we try this out to see how it feels?

@jancavan suggests to hide all actions behind the hamburger, but we can perhaps abtest this.

I think that having visible moderation buttons is likely going to get more clicks, but that is in the expense of readability. My goal here is to really just de-clutter the UI.

If we were to test this, the success metric would have to be - if this actually gets significant usage (ie Do users moderate comments in Reader or do they just do them in /comments?

[gwwar]

My goal here is to really just de-clutter the UI.

Definitely, I'm happy to try the hamburger for approved comments. As noted in https://github.com/Automattic/wp-calypso/issues/19718#issuecomment-344086807. Mainly I want to make sure we have actions available on pending comments. I've updated the summary.

[davewhitley]

did we need any change in styling for comments awaiting moderation?

@jancavan @gwwar Did you mean what the user sees when they submit a comment and it doesn't get approved right away?

If so, we don't _need_ to update the style, but it would be nice to either make it yellow, or simply use an in line notice. Right now it's just text I believe.

---

Rather than quantitative data, I think it would be helpful to see a few ppl use the 2 different UIs (w/ ellipsis and no ellipsis) and ask them questions. I would be interested in the usage data of this after shipping though.

[jancavan]

Did you mean what the user sees when they submit a comment and it doesn't get approved right away?

Ah, I see. I was referring to what the site owner sees. But for the non-site owner, yes, it's just text for now.

[gwwar]

I think it would be helpful to see a few ppl use the 2 different UIs (w/ ellipsis and no ellipsis) and ask them questions. I would be interested in the usage data of this after shipping though.

That sounds like a good idea to arrange a few more interviews to help narrow down mocks for the reader. @megsfulton do we still have some candidates that we can contact?

[rodrigoi]

The ellipsis menu is already implemented, but hidden on the reader by using a showModerationTools flag that defaults to false here:

https://github.com/Automattic/wp-calypso/blob/8fe7dd269bd0038fd3d2dc766bdd4a76bb46db80/client/blocks/comments/comment-actions.jsx#L86

[rodrigoi]

@jancavan you can try this branch: https://github.com/Automattic/wp-calypso/pull/19831
Pardon its roughness, we changed focus before finishing it.

[gwwar]

Closing this out for now due to research findings. We can always revisit later