Comments

In this article


An advanced block that allows displaying post comments using different visual configurations.

  • Name: core/comments
  • Category: theme
  • API Version: 3
  • Block Type: Hybrid (static save + server enhancements)

Attributes

Defined via the attributes property in block.json.

Attribute Type Default Description
tagName string "div" —
legacy boolean false —

Supports

Defined via the supports property in block.json.

Context

Defined via the usesContext and providesContext properties in block.json.

Uses context:

  • postId
  • postType

Block Markup

This is a hybrid block. It saves static markup that the server may enhance during rendering.

<!-- wp:comments {"className":"comments-post-extra"} -->
<div class="wp-block-comments comments-post-extra"><!-- wp:comments-title /-->

    <!-- wp:comment-template -->
    <!-- wp:columns -->
    <div class="wp-block-columns"><!-- wp:column {"width":"40px"} -->
    <div class="wp-block-column" style="flex-basis:40px"><!-- wp:avatar {"size":40,"style":{"border":{"radius":"20px"}}} /--></div>
    <!-- /wp:column -->

    <!-- wp:column -->
    <div class="wp-block-column"><!-- wp:comment-author-name {"fontSize":"small"} /-->

    <!-- wp:group {"style":{"spacing":{"margin":{"top":"0px","bottom":"0px"}}},"layout":{"type":"flex"}} -->
    <div class="wp-block-group" style="margin-top:0px;margin-bottom:0px"><!-- wp:comment-date {"fontSize":"small"} /-->

    <!-- wp:comment-edit-link {"fontSize":"small"} /--></div>
    <!-- /wp:group -->

    <!-- wp:comment-content /-->

    <!-- wp:comment-reply-link {"fontSize":"small"} /--></div>
    <!-- /wp:column --></div>
    <!-- /wp:columns -->
    <!-- /wp:comment-template -->

    <!-- wp:comments-pagination /-->

    <!-- wp:post-comments-form /--></div>
    <!-- /wp:comments -->

Source