Creating Block Templates

Block Template Basics

Block templates use HTML comments to define blocks:

<!-- wp:block-name {"attribute":"value"} -->
Content goes here
<!-- /wp:block-name -->

For self-closing blocks:

<!-- wp:block-name {"attribute":"value"} /-->

Essential Templates

templates/index.html (Fallback)

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

<!-- wp:group {"tagName":"main","layout":{"type":"constrained"}} -->
<main class="wp-block-group">
    
    <!-- wp:query {"queryId":1,"query":{"perPage":10,"pages":0,"offset":0,"postType":"post","order":"desc","orderBy":"date","inherit":true}} -->
    <div class="wp-block-query">
        
        <!-- wp:post-template -->
        <!-- wp:group {"style":{"spacing":{"blockGap":"0.5rem"}},"layout":{"type":"flex","orientation":"vertical"}} -->
        <div class="wp-block-group">
            <!-- wp:post-title {"isLink":true} /-->
            <!-- wp:post-meta -->
                <!-- wp:post-date /-->
                <!-- wp:post-author {"showAvatar":false} /-->
            <!-- /wp:post-meta -->
            <!-- wp:post-excerpt {"moreText":"Continue reading"} /-->
        </div>
        <!-- /wp:group -->
        <!-- /wp:post-template -->
        
        <!-- wp:query-pagination -->
        <!-- wp:query-pagination-previous /-->
        <!-- wp:query-pagination-numbers /-->
        <!-- wp:query-pagination-next /-->
        <!-- /wp:query-pagination -->
        
    </div>
    <!-- /wp:query -->
    
</main>
<!-- /wp:group -->

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

templates/single.html (Single Posts)

<!-- 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:group {"layout":{"type":"flex","flexWrap":"nowrap"},"style":{"spacing":{"blockGap":"1rem"}}} -->
    <div class="wp-block-group">
        <!-- wp:post-date /-->
        <!-- wp:post-author {"showAvatar":false,"prefix":"by "} /-->
        <!-- wp:post-terms {"term":"category","prefix":"in "} /-->
    </div>
    <!-- /wp:group -->
    
    <!-- wp:post-featured-image {"align":"wide"} /-->
    
    <!-- wp:post-content {"layout":{"type":"constrained"}} /-->
    
    <!-- wp:post-terms {"term":"post_tag","prefix":"Tags: "} /-->
    
    <!-- wp:separator {"className":"is-style-wide"} -->
    <hr class="wp-block-separator is-style-wide" />
    <!-- /wp:separator -->
    
    <!-- wp:comments -->
    <div class="wp-block-comments">
        <!-- 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} /-->
                </div>
                <!-- /wp:column -->
                <!-- wp:column -->
                <div class="wp-block-column">
                    <!-- wp:comment-author-name /-->
                    <!-- wp:comment-date /-->
                    <!-- wp:comment-content /-->
                    <!-- wp:comment-reply-link /-->
                </div>
                <!-- /wp:column -->
            </div>
            <!-- /wp:columns -->
        <!-- /wp:comment-template -->
        <!-- wp:comments-pagination /-->
        <!-- wp:post-comments-form /-->
    </div>
    <!-- /wp:comments -->
    
</main>
<!-- /wp:group -->

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

templates/page.html (Static Pages)

<!-- 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-featured-image /-->
    <!-- wp:post-content /-->
    
</main>
<!-- /wp:group -->

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

templates/404.html (Not Found)

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

<!-- wp:group {"tagName":"main","layout":{"type":"constrained"},"style":{"spacing":{"padding":{"top":"var:preset|spacing|50","bottom":"var:preset|spacing|50"}}}} -->
<main class="wp-block-group">
    
    <!-- wp:heading {"textAlign":"center","level":1} -->
    <h1 class="has-text-align-center">Page Not Found</h1>
    <!-- /wp:heading -->
    
    <!-- wp:paragraph {"align":"center"} -->
    <p class="has-text-align-center">The page you're looking for doesn't exist or has been moved.</p>
    <!-- /wp:paragraph -->
    
    <!-- wp:search {"label":"Search","showLabel":false,"placeholder":"Search...","buttonText":"Search"} /-->
    
</main>
<!-- /wp:group -->

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

templates/archive.html

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

<!-- wp:group {"tagName":"main","layout":{"type":"constrained"}} -->
<main class="wp-block-group">
    
    <!-- wp:query-title {"type":"archive"} /-->
    <!-- wp:term-description /-->
    
    <!-- wp:query {"inherit":true} -->
    <div class="wp-block-query">
        <!-- wp:post-template {"layout":{"type":"grid","columnCount":2}} -->
            <!-- wp:post-featured-image {"isLink":true,"aspectRatio":"16/9"} /-->
            <!-- wp:post-title {"isLink":true} /-->
            <!-- wp:post-excerpt /-->
        <!-- /wp:post-template -->
        <!-- wp:query-pagination /-->
    </div>
    <!-- /wp:query -->
    
</main>
<!-- /wp:group -->

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

Custom Templates

Register in theme.json:

{
    "customTemplates": [
        {
            "name": "page-full-width",
            "title": "Full Width",
            "postTypes": ["page"]
        },
        {
            "name": "page-sidebar",
            "title": "Page with Sidebar",
            "postTypes": ["page"]
        },
        {
            "name": "blank",
            "title": "Blank Canvas",
            "postTypes": ["page", "post"]
        }
    ]
}

templates/page-full-width.html

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

<!-- wp:group {"tagName":"main","align":"full","layout":{"type":"default"}} -->
<main class="wp-block-group alignfull">
    <!-- wp:post-content {"layout":{"type":"default"}} /-->
</main>
<!-- /wp:group -->

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

<!-- Grid -->
<!-- wp:group {"layout":{"type":"grid","columnCount":3}} -->

Next Steps

In the next lesson, we'll build reusable template parts.

## Next Steps

In the next lesson, we'll build reusable template parts.

<div class="callout callout-success">
<strong>🎯 Lesson Complete!</strong> You can now create complete block templates for any content type.
</div><!-- /wp:group -->

Layout Types

<!-- Constrained (centered content) -->
<!-- wp:group {"layout":{"type":"constrained"}} -->

<!-- Flex (horizontal) -->
<!-- wp:group {"layout":{"type":"flex","flexWrap":"nowrap"}} -->

<!-- Grid -->
<!-- wp:group {"layout":{"type":"grid","columnCount":3}} -->

Next Steps

In the next lesson, we'll build reusable template parts.