feat: add comments sidebar

[thomasguillot]

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 moves the comments functionality to a hidden sidebar, which can be toggled by a button within the content. While far from perfect, this is a good starting point. Ideally, we would want the button to display only when comments are enabled - perhaps this can be achieved with some JS? cc @laurelfulford.

How to test the changes in this Pull Request:

1. Switch to this branch
2. Check a post
3. Try to open the comments

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]

Few more issues:

The pagination doesn't fully works: it doesn't re-open the overlay.

And then a similar issue when using a comment's permalink, e.g #comment-5

[laurelfulford]

I think this looks good overall! I added a couple code comments/notes but I think they could either be incorporated into this PR or another iteration.

I tested both comments and pingbacks, and noticed some visual differences:

I also tested with Disqus, which seems to mostly work, except the reCAPTCHA it uses gets cut off. Disqus is used by a dozen publishers at the moment, and IIRC is our primary third-party commenting system. I'm not sure we can do anything about this but perhaps there's a recommended Disqus setting, or a fallback for Disqus users, that we can have queued up (like a non-sidebar version):

Lastly, similar to the issues you noted about the comment link not working, it'd also be handy if that reopened the sidebar because that's used when comments are held in moderation.

I'm making this as approved since it works as something in progress to be built on, but let me know if you have any questions about any of my feedback, or if I can look at anything again!

[laurelfulford]

Nit, but I think it would be good to rename this variable - the header bit caught me off-guard! Maybe something to do with its location, to contrast against commentsContent?

[laurelfulford]

Suggested change

	commentsContents = document.querySelector( '.comments-contents' );
	commentsContents = document.querySelector( '.comments-contents' ),
	commentsExist = document.querySelector( '.wp-block-comments' );
	if ( ! commentsExist ) {
	headerContain.parentNode.removeChild( headerContain );
	return;
	}

This could probably use more testing/cases, but it looks like it would work in a pinch to remove the comment toggle button -- it checks whether the wp-block-comments CSS class exists, and if not, removes the button.

Another approach could be to add a CSS class to the body if comments are open and using that to show/hide things? My only concern with relying on something existing is if it doesn't work in all cases (though the above -- plus this setup in general -- does work with Disqus).

[thomasguillot]

Thank you @laurelfulford. I will create an issue to make sure I don't forget about it 😅

[matticbot]

🎉 This PR is included in version 1.8.0-alpha.1 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀

[matticbot]

🎉 This PR is included in version 1.8.0 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀