WordPress block template markup: types of tag

In the new WordPress (WP) block themes, HTML files are used for templates. They’re called things like index.html, page.html and archives.html. Blocks are added using a mix of commented-out WP markup and HTML tags. There are two types of markup tags, as shown in this example:

[…]
<!-- wp:group -->
<div class="wp-block-group">
  <!-- wp:post-author /-->
  <!-- wp:post-date /-->
  <!-- wp:post-terms {"term":"category"} /-->
  <!-- wp:post-terms {"term":"post_tag"} /-->
</div>
<!-- /wp:group -->
[…]

The commented-out tags are WP template markup. There are two types, as in HTML:

  1. markup tags with an explicit close tag – multi-line tags
  2. markup tags without an explicit close tag – self-closing tags.

Multi-line tags are like HTML <div> … </div> tags, where a pair of tags appear at the beginning and at end of the block; a forward slash / marks the end tag: <!-- wp:group --> … <!-- /wp:group -->. Other tags go between the pairs of tags.

Self-closing tags are like HTML <img /> tags, where a single tag contains the block; a forward slash / marks the end of the tag: <!-- wp:post-terms /-->. The type of tag tells WordPress what content goes there, such as the post author’s name and the publication date.

The markup tags go outside the HTML tags.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.