JuanMa Garrido 5:38 pm on April 8, 2022
Tags: ,   

Help Test the Comments Blocks for WordPress 6.0

The previously monolithic “Post Comments” blockBlock Block is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience. has been updated to work in a more flexible and modular way by using child blocks. The new version is now called the “Comments Query LoopLoop The Loop is PHP code used by WordPress to display posts. Using The Loop, WordPress processes each post to be displayed on the current page, and formats it according to how it matches specified criteria within The Loop tags. Any HTML or PHP code in the Loop will be processed on each post. https://codex.wordpress.org/The_Loop.” block, and it comes with new blocks that can be used as child blocks within it. These new Comments blocks allow users to define and change the layout of the post comments directly from the GutenbergGutenberg The Gutenberg project is the new Editor Interface for WordPress. The editor improves the process and experience of creating new content, making writing rich content much simpler. It uses ‘blocks’ to add richness rather than shortcodes, custom HTML etc. https://wordpress.org/gutenberg/ editor.

Table of Contents

Help test this feature

This post is a call for users to test the new blocks that can be used to build a  comments section in a page or post (following the block paradigm). The results of this  testing will allow the contributors behind the development of these blocks to decide whether or not they are ready to be included in the next release of WordPress (v6.0) 

Please report your findings either as issues on GithubGitHub GitHub is a website that offers online implementation of git repositories that can easily be shared, copied and modified by other developers. Public repositories are free to host, private repositories require a paid subscription. GitHub introduced the concept of the ‘pull request’ where code changes done in branches by contributors can be reviewed and discussed before being merged be the repository owner. https://github.com/ in the Gutenberg repository ,or in the comments below. If you have triage access, labelling any issue with “[Block] Comments Query Loop” would be very helpful. Alternatively, you can start the title of your issue with “Comments Blocks: ” to help those triaging the issues to label them appropriately. 

How comments currently work in Full Site Editing

The “Post Comments” block is the block that currently manages a comments section on a post or page, 

For example, the Twenty-Twenty-Two  theme uses this block in its “Single Post” template

But with this “Post Comments” block no option exists to change the styles and the layout of the comments from within the Editor. This block uses the comments_template() function internally to generate the HTMLHTML HTML is an acronym for Hyper Text Markup Language. It is a markup language that is used in the development of web pages and websites. for that section and the styles are defined via CSSCSS CSS is an acronym for cascading style sheets. This is what controls the design or look and feel of a site. files.

So, in summary, if you want to customize your comments section (change styles and layout) when using this “Post Comments” block you have to do a bit of coding

What’s new?

With the new Comments Query Loop block, you now have available a set of child blocks that enable you to customize the layout and styles of this section directly from within the Editor.

The new Comments Blocks that are available from Gutenberg v13.0 are:

  • Comments Query Loop: An advanced block that  displays  post comments and allows for various layouts and  configurations.
    • Comment Template: Contains the block elements used to display a comment, such as  the title, date, author, avatarAvatar An avatar is an image or illustration that specifically refers to a character that represents an online user. It’s usually a square box that appears next to the user’s name. and more.
    • Comments Pagination: Displays next/previous links to paginated comments where this has been enabled in the comment settings in the WordPress admin
      • Previous Page: Displays the link to the previous page of comments.
      • Page Numbers: Displays a list of page numbers for comments pagination.
      • Next Page: Displays the link to the next page of comments.

The addition of these blocks to Gutenberg is just the beginning. With these blocks, in the future you will be able to create and share your own patterns for a comments section.

Testing Environment 

While there’s more information below to ensure you get everything set up properly, here are the key things to consider with regard to your testing environment: 

Testing Instructions

Set proper pluginPlugin A plugin is a piece of software containing a group of functions that can be added to a WordPress website. They can extend functionality or add new features to your WordPress websites. WordPress plugins are written in the PHP programming language and integrate seamlessly with WordPress. These can be free in the WordPress.org Plugin Directory https://wordpress.org/plugins/ or can be cost-based plugin from a third-party and themes

  1. Have a test site using the latest version of WordPress (5.9.3 at time of writing). It’s important that this is not a production/live site. 
  2. Install and activate the Twenty Twenty-Two theme by going to Appearances > Themes. If you choose to use a different block theme, install and activate by going to Appearances > Themes > Add New and searching for the one that has the `Full Site Editing`  listed as a feature. 
  3. Install and activate Gutenberg 13.0 RC

Customize the “Single Post” template to use the new “Comments Query Loop” block

  1. Go to the “Single Post” template by:
    1. Going to Appearance > Editor
    2. From the Template Editor click on the drop down menu in top centre  to choose the template to Edit (“Home” template selected by default)
    3. From that menú: “Browse all templates” & select “Single Post”
  2. Remove the “Post Comments” block that you’ll find at the bottom with the text “Post comments block: no post found” 
  3. Insert in that same place the “Comments Query Loop” block
  4. Save the “Single Post” template with this new “Comments Query Loop” block inserted

Customize the Comments blocks styles and layouts and check the result of your changes in the frontend

In order to ensure you have comments to play with you can add demo content to your WordPress

  1. Go to the homepage of your testing site and go to the default “Hello world!” post to check how the Comments section looks by default with these new Comments blocks. You can also create a new post by going to Posts > Add 
  2. Go to the “Single Post” template and configure each comments block to set the styles and layout you want
  3. Save the template and go to the post page to see your changes in the frontend (you’ll probably need to refresh the post’s page)
  4. Repeat this process as many times as you want and take note of any bug or User Experience inconsistency you encounter during the process

Insert the “Post Comments Form” block to check the behavior of the Comment Reply Link and the ability to insert new comments

The “Post Comments Form” cannot itself be customised via the Block Editor as yet. There’s an issue open to work on this but for the purpose of this testing we can just use it as it is and focus the testing on the display of the comments

  1. Go to the “Single Post” template and insert a “Post Comments Form” just after  the “Comments Pagination” block
  2. Save the template and go to the post page to see if the form is available from that page (you’ll probably need to refresh the post’s page)
  3. Submit a new comment and check whether the new comment appears and whether the styles you defined for the Comments blocks are also applied to this new comment
  4. Check that the ”Comment Reply Link” and “Comment Edit Link” work properly 
  5. Take note of any bug or User Experience inconsistency you detect in the process

What to test

So, what type of things can you test with these blocks?

This Call for Testing is mainly to check that these blocks work as expected, that is, the changes in the styles and layout work as expected without bugs.

But just to provide some guidance, here are some aspects we specifically would like to have some feedback about:

Styles and Layout

Try to replicate a specific design on your comments section and check that you’re able to implement that design using just  the Block Editor. For example you could try to apply a Duotone filterFilter Filters are one of the two types of Hooks https://codex.wordpress.org/Plugin_API/Hooks. They provide a way for functions to modify data of other functions. They are the counterpart to Actions. Unlike Actions, filters are meant to work in an isolated manner, and should never have side effects such as affecting global variables and output. to the Avatar, or perhaps a two column layout with the avatar on the left and rest of the content on the right – let your imagination run wild!

AccessibilityAccessibility Accessibility (commonly shortened to a11y) refers to the design of products, devices, services, or environments for people with disabilities. The concept of accessible design ensures both “direct access” (i.e. unassisted) and “indirect access” meaning compatibility with a person’s assistive technology (for example, computer screen readers). (https://en.wikipedia.org/wiki/Accessibility)

Check that the comments section is fully accessible in both the Editor and the Frontend and report any issues you find in this regard.

Discussion Settings

Go to Settings > Discussion and check that the different options are fully compatible with the new Comments blocks (i.e. that they work as expected according to the options that have been enabled/disabled).

Pagination Links

Test that the pagination links work as expected. To test this you’ll need enough comments for the comments to actually paginate. Comment pagination also needs to be enabled in the WordPress admin under Settings -> Discussion -> Break comments into pages

Thank you!

Thank you for helping to test these new Comments Blocks! With the adoption of Full Site Editing, bringing the power and flexibility of blocks to more parts of the page  is really helpful in enabling  users to customise their layouts and take full control of their sites.

Thanks to @mburridge @cbravobernal @santosguillamot for reviewing and helping shape this post

#call-for-testing, #gutenberg