Comments Block

Go to the list of Blocks

The Comments block is an advanced block that displays post comments with various visual configurations. It contains multiple blocks to show comments, such as Comments Title, Comment Template, Comment Pagination, and Post Comments Form. With the Comments block, adding a comment section to your posts becomes effortless.

To add the Comments block, open the block inserter by clicking the (+) icon on the upper left corner of the editor. After that, look for Comments using the search bar and click it to insert the block into the editor.

A demonstration to add a comments block in the block editor.

Alternatively, you can type /comments on the editor to insert the Comments block manually.

Detailed instructions on adding blocks can be found here.

Block toolbar

The block toolbar provides various tools for customizing each block. It will appear when you select the Comments block. Below is a list of tools shown in this block toolbar:

Transform to

The transform button on the block toolbar

The Transform to button lets you change the Comments block into a Columns or a Group block. 

Change alignment

The alignment tool in the block toolbar

You can modify the alignment of the Comments block using this tool. Click on the icon and select one of the following alignment options:

  • None – is the default block size.
  • Wide width – increases the block width beyond the content size.
  • Full width – extends the block to cover the full width of the screen.
The vertical alignment tool in the block toolbar

When you transform the Comments block into a Columns block, the toolbar will show an additional tool called Change vertical alignment with three options:

  • Align top – makes the block top-aligned.
  • Align middle – lets you align the block to the center.
  • Align bottom – makes the block right-aligned.

More options

More options button in the block toolbar

The three dots icon on the Comments block toolbar lets you access more block options. A drop-down menu will appear when you click it, and below is a list of actions you can find:

  • Show/Hide more settings opens or closes the block settings panel on the editor’s sidebar. Its functionality is similar to clicking the cog icon next to the Publish button.
  • Copy block adds the comment author block into the clipboard. Then, you can paste it anywhere you want in the block editor.
  • Duplicate creates a copy of the selected block that appears after the current block.
  • Insert before adds a new block before the selected block(s).
  • Insert after adds a new block after the selected block(s).
  • Lock prevents users from moving or deleting the selected block. A pop-up window will appear to set the block locking attribute to the selected block. You can disable movement, prevent removal, or both for the selected block.
  • Create Reusable block makes the selected block a reusable block. A pop-up window will appear to set the name for the block.
  • Group turns the selected block(s) into a group of blocks so you can configure them as a unit.
  • Remove Comments deletes the selected block from the editor.

Block settings

WordPress blocks have specific configuration options in the block settings panel. To access the Comments block settings panel, click the Settings button at the top-right corner of the WordPress editor. Alternatively, click the More options or three dots icon in the Comments block toolbar and select Show more settings.

Color

Color section in the block settings panel

The Comments block provides color settings options to change the text and background colors.

For details, refer to this support article: Color settings overview

Typography

Typography section in the block settings panel

The Comments block provides typography settings to change the font family, appearance, line height, letter spacing, decoration, letter case, and font size.

For details, refer to this support article: Typography settings overview

Dimensions

The comments block provides dimension settings options to add padding and margin.

For details refer to this support article: Dimension settings overview

Advanced

Advanced section in the block settings panel

Additional CSS Class(es)

The Comments block provides advanced settings for adding CSS class(es), allowing you to style the block using custom CSS code.

HTML Element

Use this feature to select an HTML element in the Comments block.

Changelog

  • Updated 2023-03-07
    • Fixed the link to Comment Pagination block page
  • Updated 2023-01-10
    • Added dimension settings
  • Created 2023-01-04

Was this article helpful? How could it be improved?

First published

Last updated