Adds option to collapse comments

[laurelfulford]

All Submissions:

• Have you followed the Newspack Contributing guideline?
• Does your code follow the WordPress' coding standards and VIP Go coding standards?
• Have you checked to ensure there aren't other open Pull Requests for the same update/change?

Changes proposed in this Pull Request:

This PR adds an option to collapse comments to the Customizer.

The way WordPress handles comments makes this a bit tricky -- I had to do some hacky stuff to work around making sure a new comment, for example, wasn't hidden when added, or to make sure users saw the 'awaiting moderation' message.

I'm sure there are still some issues with this approach; I tried to be extensive in my testing steps, but please, hammer it has hard as you can.

Closes #804 .

How to test the changes in this Pull Request:

1. Apply the PR and run npm run build.

2. Navigate to Customize > Comment Options, and turn on 'Collapse Comments'.

3. If it's not already, turn AMP mode to standard.

4. As a logged in user, view a post with one -- the comments should not be collapsed with only one comment:

5. Add a second comment. Verify that comments are not collapsed when you first add the second comment. The code is figuring out when to do this by checking the URL -- it will contain cpage or comment-page-, depending on your permalinks settings, when you add a comment:

6. Remove the comment part of the URL (returning it to its normal state), and test the post again -- comments should now be collapsed:

7. Test the toggle to make sure the comments open and close as expected:

Note: At this point you may see a double title, which is unrelated to these changes, and can be recreated on master by toggling the search. This will be fixed when #821 lands:

8. Try switching to an incognito window, and add a comment as a non-logged in user; confirm that comments don't collapse after your comment is submitted, and you can see your comment awaiting moderation:

9. Continue adding a few comments to the post as both new comments and replies, repeating steps 5-7 with each one, confirming things work as expected, until you have more than five top-level comments.
10. Navigate to Dashboard > Settings > Discussion, and check the box to "Break comments into pages with"; set it to 5 top level comments:

11. Navigate back to the post, and try adding a comment, as both logged in and logged out users and confirm it still works the same way (not collapsed).
12. Expand the comments, and scroll to the bottom, then click "Previous Comments". Confirm the next page is not collapsed.
13. Turn off AMP, and confirm the comments toggle still works (opening/closing on click).

Other information:

• Have you added an explanation of what your changes do and why you'd like us to include them?
• Have you written new tests for your changes, as applicable?
• Have you successfully ran tests with your changes locally?

[thomasguillot]

Bellow are a couple of recommendations:

button alignment

The button isn't properly aligned. I'd suggest we use something like:

.comments-toggle {
    align-items: center;
    display: flex;
    justify-content: center;
}

And remove position and top from .comments-toggle svg.

button hover/focus

There's no hover state. Maybe we could use the primary colour for the focus state?

[laurelfulford]

Thanks Thomas!

I've updated the toggle styles to use flexbox to vertically align the SVG.

I've also updated the focus/hover states to use the primary colour and a transparent background -- it should pick up the blue by default, or use your custom colour if it contrasts sufficiently against white. Otherwise it'll go from very dark grey to medium grey.

Just let me know if anything else needs adjustment!

[thomasguillot]

Thanks Thomas!

I've updated the toggle styles to use flexbox to vertically align the SVG.

I've also updated the focus/hover states to use the primary colour and a transparent background -- it should pick up the blue by default, or use your custom colour if it contrasts sufficiently against white. Otherwise it'll go from very dark grey to medium grey.

Just let me know if anything else needs adjustment!

This is much better! Thanks @laurelfulford

🚢

[laurelfulford]

Thanks!

[matticbot]

🎉 This PR is included in version 1.4.0 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀

[laurelfulford]

Docs have been completed on this feature.