Post Comments Block: Implementation Notes

[ockham]

The Post Comments Block is currently implemented to be rendered by comments_template() on the frontend (which can be fairly complex, containing e.g. the comment author name and gravatar, date, and content).

In the editor, it is a loop over paragraphs containing individual comments.

We need match what is editable in the editor with the output produced by the frontend. Furthermore, before making any edits, both needs to be determined by the theme. To that end, we need to apply a similar paradigm to Post Comments that we're already applying to the rest of a theme in FSE. Specifically, we need to:

• Use the comments_template hook to use a block-based system rather than a PHP one (akin to how we replace the PHP-based templating system with a block-based one in Gutenberg's lib/template-loader.php and 'redirect' to lib/template-canvas.php).
• Implement the Post Comments Block using a Query block that loops over the comments for a given post ID.
• Implement the Post Comment Block to consist of a number of allowed inner blocks which also have to be implemented. Those include:
  • Comment Author (Comment Author Block #30572)
  • Comment Date (Comment Date Block #30573)
  • Comment Content (Comment Content Block #30574)
  • Comment Author Gravatar (Comment Author Gravatar Block #30575)
  • Comment Reply Link (Comment Reply Link Block #30576)
  • Edit Comment link (Edit Comment Link Block #30577)

[karmatosed]

Unless I am mistaken this doesn't need design, so for now going to remove the label. It can always be added back in though.

[jameskoster]

If we intend to mimic the behaviour of the Query block (I agree we should) then I am wondering what purpose the "Post Comment" block serves in this context? There isn't an equivalent block for queries/posts.

---

Comment Author
Comment Date
Comment Content

In addition to these, we may also need:

• Comment Author Gravatar
• Comment Reply Link
• Edit Comment link

---

These new blocks will need design for their placeholders/previews, descriptions, and icons. I created a Figma file here for us to explore this.

[jameskoster]

I shared designs for the new blocks we need in separate issues. Links in the OP :)

[carolinan]

If we intend to mimic the behaviour of the Query block (I agree we should) then I am wondering what purpose the "Post Comment" block serves in this context? There isn't an equivalent block for queries/posts.

Comment Author
Comment Date
Comment Content

In addition to these, we may also need:

• Comment Author Gravatar
• Comment Reply Link
• Edit Comment link

These new blocks will need design for their placeholders/previews, descriptions, and icons. I created a Figma file here for us to explore this.

I think the post comment block has a different purpose because it only shows one specific comment and this comment can be unrelated to the current post/page/view.

[jameskoster]

Yes, I think that block has more utility in the post editor. But even there it feels kind of niche.

[carolinan]

We also have to consider the different settings that are available in the admin area under Settings > Discussion such as the nested comments and the comment pagination.

[jameskoster]

That is true, we may also need new blocks for the pagination. Hopefully we can lean on the query pagination blocks there, seeing as they serve (roughly) the same purpose, and will have crossed a similar hurdle when accounting for the posts_per_page setting.

[SantosGuillamot]

Hi there! Really nice work done here 👏

I'd like to retake it and create a Post Comments Loop block, similar to the current Query Loop block, to display all the comments of a specific posts. I've created this tracking issue with a detailed explanation and all the steps needed for anyone interested. I've also created this project to keep track of all the relevant issues.

[mtias]

Great, let's consolidate in #34994!