How to create Comments blocks in Gutenberg 11.9.0

The Comments blocks in Gutenberg 11.9.0 are slightly different from those delivered in earlier versions of Gutenberg.

Initially I couldn’t get them to work at all, but I think I’ve found a technique that might help me to document them.

The problem

I was attempting to document each of the new Comments related blocks:

The trouble was, when I inserted the Comments Query Loop block all I got was No results found.

And the Comments Template block was empty.

Comments Query Loop – No results found.

How I documented the original Comments blocks

When I documented the original Comments blocks I created comments for the posts in order to demonstrate the blocks. If I remember rightly I did this using the Classic Editor and the Comments meta box.

Each of these blocks should have had comments associated with them.

It was a bit of a convoluted process. I think I’ve found an easier way for this new set of blocks.

How to add comments to demonstrate comments

  1. Use the Post Comments Form – core/post-comments-form to temporarily allow myself to add comments.
  2. Save the post and view it
  3. Write a comment.
  4. Edit the post
  5. Now add the Comments blocks that need to be demonstrated.
  6. Remove the Post Comments Form when done

Leave a Reply

Your email address will not be published. Required fields are marked *

Example Comments blocks

This example demonstrates the default Comments blocks in Gutenberg 11.9.0.

The Comments Query Loop block contains the Comment Template which consists of 6 blocks:

  • Comment Author Avatar
  • Comment Author Name
  • Comment Date
  • Comment Content
  • Comment Reply Link
  • Comment Edit Link

I’ve added a separator to the blocks in the Comment Template.

  1. Herb Miller Avatar

    “Less than, question mark, P – H – P

    the WordPress start to poetry”

  2. Bobbing Wide Avatar

    That’s a short poem. You may prefer to read Because “code is poetry”.

  3. Bobbing Wide Avatar

    You may also be interested in “My Favourite Block”

  4. Chris Weeks Avatar

    Thanks, that was really quite useful.

Comment Author Avatar is 48 pixels with a border radius of 22 px and zero pixel border

Comment Author Name has default typography

Comment Date typography is Tiny. Format settings: Full month plus time.

Comment Content has a background colour

Comment Reply link – doesn’t seem to do anything

Comment Edit link – only appears for authorised users

CSS to hide the bullets on the Comments query loop list..wp-block-comments-query-loop ul { list-style: none; }