Overview

In a block theme, templates are HTML files of block markup — and blocks such as wp:post-title and wp:post-content do exactly what <?php the_title(); ?> and <?php the_content(); ?> do in a classic PHP template.

From PHP to blocks

If you have worked through the classic lessons, you already know what every one of these blocks does.

parts/header.html

<!-- wp:group {"tagName":"header","layout":{"type":"flex","justifyContent":"space-between"}} -->
<header class="wp-block-group">
    <!-- wp:site-title {"level":0} /-->
    <!-- wp:navigation /-->
</header>
<!-- /wp:group -->

templates/single.html

<!-- wp:template-part {"slug":"header","tagName":"header"} /-->

<!-- wp:group {"tagName":"main","layout":{"type":"constrained"}} -->
<main class="wp-block-group">
    <!-- wp:post-title {"level":1} /-->
    <!-- wp:post-date /-->
    <!-- wp:post-featured-image {"align":"wide"} /-->
    <!-- wp:post-content {"layout":{"type":"constrained"}} /-->
    <!-- wp:post-terms {"term":"post_tag"} /-->
    <!-- wp:comments /-->
</main>
<!-- /wp:group -->

<!-- wp:template-part {"slug":"footer","tagName":"footer"} /-->

The template hierarchy is the same as in lesson 5 — only the file extension changes. templates/single.html renders posts, templates/page.html renders pages, templates/archive.html renders archives.

templates/index.html — the Loop as a block

<!-- wp:template-part {"slug":"header","tagName":"header"} /-->

<!-- wp:query {"queryId":1,"query":{"inherit":true}} -->
<div class="wp-block-query">
    <!-- wp:post-template -->
        <!-- wp:post-featured-image {"isLink":true} /-->
        <!-- wp:post-title {"isLink":true} /-->
        <!-- wp:post-excerpt /-->
    <!-- /wp:post-template -->

    <!-- wp:query-pagination -->
        <!-- wp:query-pagination-previous /-->
        <!-- wp:query-pagination-numbers /-->
        <!-- wp:query-pagination-next /-->
    <!-- /wp:query-pagination -->

    <!-- wp:query-no-results -->
        <!-- wp:paragraph -->
        <p>No posts found.</p>
        <!-- /wp:paragraph -->
    <!-- /wp:query-no-results -->
</div>
<!-- /wp:query -->

<!-- wp:template-part {"slug":"footer","tagName":"footer"} /-->

"inherit":true is the key setting. It tells the Query block to use the page's main query — the same posts the classic Loop would show — rather than running a custom one.

Do not hand-write block markup

The fastest and safest workflow is to design in the Site Editor, then export:

1. Build the template visually in Appearance → Editor.
2. Install the Create Block Theme plugin.
3. Use it to save your changes back into the theme's templates/ and parts/ files.

Watch out: Once someone edits a template in the Site Editor, their version is stored in the database and overrides your file. If your file changes seem to do nothing, check Appearance → Editor for a customised template and reset it.

Practice

• Write parts/header.html, parts/footer.html and templates/single.html for gdc-blocks.
• Build templates/index.html with an inheriting Query block.
• Edit the header in the Site Editor, then use Create Block Theme to save it back to the file.