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”

    https://herbmiller.me/code-is-poetry/


  2. Bobbing Wide Avatar

    That’s a short poem. You may prefer to read Because “code is poetry”.
    https://herbmiller.me/because-code-is-poetry/


  3. Bobbing Wide Avatar

    You may also be interested in “My Favourite Block”
    https://herbmiller.me/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; }