Displaying the Post Comments Block to Block Themes


When you install a block theme, it is important to note that post comments are displayed on the front end of a website via the Post Comments block. In this lesson, you will learn how to locate and manage the Post Comments block when editing the Single Post template or creating a custom template.

Objectives

After completing this lesson, participants will be able to:

  • You will be able to locate the Post Comment block when editing the Single Post template.
  • Understand the implications of removing the Post comments block from the Single Post template.
  • You will be able to add a Post Comment block to a custom template.

Prerequisite Skills

Participants will get the most from this lesson if they have familiarity with:

Readiness Questions

  • What are the advantages of allowing post comments on your site?
  • Do you know how to edit templates and use blocks?
  • Are you familiar with how to insert or remove blocks?

Materials Needed

  • A local install of WordPress.
  • A block theme, such as Twenty Twenty-Two

Notes for the Presenter

Lesson Outline

  • Discuss how comments are displayed on the front end of a website and look at an example.
  • Highlight the advantages of allowing comments on your website.
  • Use the List View to gain a clear picture of the Single Post template structure via the Site Editor.
  • Show what will happen if you delete the Post Comments block from the Single Post template.
  • Demonstrate how to create a custom template via the Template Editor.

Exercises

Create a custom template

  • Ask participants to create a post and use the sidebar settings to create a new custom template via the Template Editor. Remind attendees to add the Post Comment Block below the post layout.

Assessment

You can modify the Single Post template via the Site Editor and Template Editor.

  1. True
  2. False

Answer: 1. True

Blog comments will remain on the front end of your website if the Post Comments block is removed.

  1. True
  2. False

Answer: 2. False

Will you use the Site Editor or Template Editor to create a custom template?

  1. Site Editor
  2. Template Editor

Answer: 2. Template Editor

Additional Resources

Example Lesson

Today we are going to take a closer look at how post comments are displayed when you’re using a block theme. But before we make our way to the backend of our website, let’s see how comments display when people respond to a blog post. So when I visit the front end of my website, I will scroll down to one of my blog posts called Go Local. When we go to the bottom of the post, we will notice three people have already responded by adding their comments: Roger, Tina and Ross, and below that there is a section for more people to have their say. 

3 comment responses shown in the comment box on a post.

Allowing comments on your site has many advantages. It allows you to deepen your relationships with readers and find out what readers are interested in. It also increases the likelihood of them subscribing to your newsletter or purchasing something in future. Essentially, allowing comments can help you to build a community around your blog. It is of course important to manage comments effectively by using the built-in settings of WordPress under Discussions in your dashboard and installing an anti-spam plugin. But for now, let’s make our way back to the dashboard to investigate the Post Comments block. But to do that, we need to access templates. 

There are two ways to access templates, via the Site Editor and the Template Editor. Let’s first make our way to the Site Editor. Go to Appearance and click on Editor. This opens up the Site Editor where you are able to manage your templates, template parts and also where you can customise the global styles or site-wide styles of your website. We are after the Single Post template today.

Appearance, Site Editor, Templates shows several templates. Here we see Single Post.

The Single Post template displays the page structure for single posts. When we open up the List View we will have a clear picture of the current layout of single posts. And right at the bottom, you’ve got your post comments below. Just a reminder, you have the choice to modify the layout of single posts according to your requirements. 

Single Post template is edited to include the Post Comments block

But have you wondered what will happen if you delete the Post Comments block, well all comments on all blog posts that have been assigned to this template will disappear on the front end of your website. If we make our way back to the front end of my website, we will notice that this post has been assigned to the Single Post template and the three comments below display because of the Post Comments block. Let’s go back to the template, click on the three vertical dots (kebab menu) and remove the Post Comments block.

Post Comments block toolbar displayed with the options dropdown to select Remove Post Comments

Click Save, and then let’s return to the frontend on my website. I’m going to reload the page and when we scroll down, we will notice that the comments are gone.

Post Comments block is no longer visible on a Single Post template

I actually want my comments to display so I’m going to go back to my template, click on Undo, click Save, and then we will notice after reloading the page, the comments are back. So tread carefully as some might accidentally remove the Post Comments block without realising the impact it will have. 

The second way we access templates is via the Template Editor. We are going to make our way back to the dashboard, click on Posts and open one of our existing posts. In the sidebar settings, we’ll see that the default template is being used which is the Single Post template.

Mouse hand hovering over the Default template in the sidebar template settings. The Default template is the Single Post template.

When you click edit, it will take you into the Template Editing Mode. You will be able to customise how single posts are displayed just as when you were in the Site Editor. If we open the List View again, we will see that the Post Comments block is part of a Group and is located below the Separator block. The one difference you will notice when you are in Template Editing Mode is that the content of your page and post comments are visible.

Arrows showing Post Content and Post Comments blocks

Please remember though, templates are used to create site structure and are not used to add or edit content. 

But when you go back to your post and click on Default Template you will notice that you can assign this post to a different template. Or if you click on New, you can create your own custom template.

Mouse hand clicking on New to create a new custom template.

Give your new template a descriptive name and click Create.

Modal showing how to name a custom template

Open the List View and remove the header. Click on Insert Before and then add your new header. I’m going to choose an existing header that I’ve already created.

Default light header for the Twenty Twenty Two theme

Then scroll down, click on the Inserter and add a footer. You can choose an existing one but I’m going to create a new footer. I will use the Carousel View to select one of the available patterns, and once you’re happy, click Choose. Name it appropriately and click Create.

Default footer for the Twenty Twenty Two theme displayed

Lastly, don’t forget to add your Post Comments block, otherwise, no comments will display.

Paragraph block showing to enter `/Post Comments` to add the Post Comments Block

Let’s go to the front end of our website to see our changes in action. Firstly, I’m going to open up a different post “The World is Your Oyster” and you will notice that this post has still been assigned to the Single Post template.

Preview of a Post using Single Post template

And if I go back and open up the Go Local post, you will notice that this post has been assigned to the custom template which I’ve just created. 

Preview of the Post, Go local, with the new custom template used.

Lesson Wrap Up

Tip: 💡 Follow with the Exercises and Assessment outlined above.