Patternizing Block Templates

Written by Tinjure WP Posted on

Notes: This post is part 2 of leaning creating and block patterns using full site editing (FSE) interface in block themes. This learning post is still in active development and updated regularly.

In this previous post, how to move entire patterns from /inc/patterns folder to theme’s root /patterns folder was described. The PHP registered patterns were refactored by modifying header section inside the /patterns folder, a feature available since Gutenberg 12.7 and to be landed in WordPress 6.0.

In this short learning-note post, I wanted to move the entire post-content from the block templates to /patterns folder and just refer the related patterns in the templates.

Learning Goals
Part 1: To create entire block theme templates based on block patterns only using experimental emptytheme.
Part 2: Patternizing Block Templates (this post)

The objective of this learning-note post is to move entire post-contents from the block templates to /patterns directory as described in the previous part 1 post.

For this proof of concept post, I used a child theme (Empty-child) of the emptytheme of WordPress experimental theme.

#! EMPTY-CHILD theme file structure
empty-child
|__ assets
|__ patterns
    |__ footer-default.php
    |__ header-default.php 
    |__ hidden-404.php
    |__ posts-list.php
    |__ query-default.php
    |__ query-pagination.php
    |__ single-post.php
|__ templates
    |__ index.html
    |__ archive.html
    |__ singular.html
    |__ search.html
    |__ 404.html
|__ parts
    |__ header.html
    |__ footer.html
|__ style.css
|__ functions.php
|__ index.php
|__ theme.json

In this example, I created parts and templates and added content from WordPress Archeo theme, with some modification.

The index.html template of the Empty-child looks as shown below.

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

  <!-- wp:group {"align":"full","layout":{"inherit":true}} -->
  <div class="wp-block-group alignfull"><!-- wp:query {"queryId":0,"query":{"perPage":10,"pages":0,"offset":0,"postType":"post","order":"desc","orderBy":"date","author":"","search":"","exclude":[],"sticky":"","inherit":true,"taxQuery":null},"tagName":"main","align":"wide","layout":{"inherit":false}} -->
    <main class="wp-block-query alignwide"><!-- wp:post-template -->
    <!-- wp:separator {"opacity":"css","className":"is-style-wide"} -->
    <hr class="wp-block-separator has-css-opacity is-style-wide"/>
    <!-- /wp:separator -->
    
    <!-- wp:columns {"style":{"spacing":{"padding":{"top":"1em"}}}} -->
    <div class="wp-block-columns" style="padding-top:1em"><!-- wp:column {"verticalAlignment":"top","width":"10%","style":{"spacing":{"padding":{"top":"1em"}}}} -->
    <div class="wp-block-column is-vertically-aligned-top" style="padding-top:1em;flex-basis:10%"><!-- wp:post-date {"format":"M j","fontSize":"small"} /--></div>
    <!-- /wp:column -->
    
    <!-- wp:column {"verticalAlignment":"center","width":""} -->
    <div class="wp-block-column is-vertically-aligned-center"><!-- wp:post-title {"isLink":true,"fontSize":"x-large"} /-->
    
    <!-- wp:post-excerpt {"moreText":"Read More ...."} /--></div>
    <!-- /wp:column --></div>
    <!-- /wp:columns -->
    <!-- /wp:post-template -->
    
    <!-- wp:spacer {"height":"32px"} -->
    <div style="height:32px" aria-hidden="true" class="wp-block-spacer"></div>
    <!-- /wp:spacer -->
    
    <!-- wp:pattern {"slug":"emptytheme/query-pagination"} /-->
    
    </main>
    <!-- /wp:query --></div>
    <!-- /wp:group -->
  
 <!-- wp:template-part {"slug":"footer","tagName":"footer"} /-->

The above code snippet was refactored by moving the content section into /patterns folder, as described in the previous post.

Create posts-list.php file inside /patterns folder

First create the following header section at the top section of posts-list.php file.

// header section
<?php
/**
 * Title: Posts list
 * Slug: emptytheme/posts-list
 * Categories: featured, query
 * Block Types: query
 */
?>

Next copy the content section (line 3-31) from the previous section append after the header in post-list.php file, see below in entirety.

<?php
/**
 * Title: Posts List
 * Slug: emptytheme/posts-list
 * Categories: emptytheme-posts
 * Viewport Width: 1280
 * Inserter: yes
 */

?>

<!-- wp:group {"align":"full","layout":{"inherit":true}} -->
<div class="wp-block-group alignfull"><!-- wp:query {"queryId":0,"query":{"perPage":10,"pages":0,"offset":0,"postType":"post","order":"desc","orderBy":"date","author":"","search":"","exclude":[],"sticky":"","inherit":true,"taxQuery":null},"tagName":"main","align":"wide","layout":{"inherit":false}} -->
<main class="wp-block-query alignwide"><!-- wp:post-template -->
<!-- wp:separator {"opacity":"css","className":"is-style-wide"} -->
<hr class="wp-block-separator has-css-opacity is-style-wide"/>
<!-- /wp:separator -->

<!-- wp:columns {"style":{"spacing":{"padding":{"top":"1em"}}}} -->
<div class="wp-block-columns" style="padding-top:1em"><!-- wp:column {"verticalAlignment":"top","width":"10%","style":{"spacing":{"padding":{"top":"1em"}}}} -->
<div class="wp-block-column is-vertically-aligned-top" style="padding-top:1em;flex-basis:10%"><!-- wp:post-date {"format":"M j","fontSize":"small"} /--></div>
<!-- /wp:column -->

<!-- wp:column {"verticalAlignment":"center","width":""} -->
<div class="wp-block-column is-vertically-aligned-center"><!-- wp:post-title {"isLink":true,"fontSize":"x-large"} /-->

<!-- wp:post-excerpt {"moreText":"Read More ...."} /--></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->
<!-- /wp:post-template -->

<!-- wp:spacer {"height":"32px"} -->
<div style="height:32px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer -->

<!-- wp:pattern {"slug":"emptytheme/query-pagination"} /-->

</main>
<!-- /wp:query --></div>
<!-- /wp:group -->
Refactoring Template Files

Next, refactoring template file. The refactored index.html file has only three lines of code.

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

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

The refactored index.html file and original template displayed exactly same way both in the editor and in the front-end.

The following other refactored template files (see below) behave similarly too.

(a) Refactored singular.html template:

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

<!-- wp:pattern {"slug":"emptytheme/single-post"} /-->

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

(b) Refactored archive.html template file:

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

<!-- wp:query {"tagName":"main","layout":{"inherit":true}} -->
<main class="wp-block-query">
  <!-- wp:query-title {"type":"archive","style":{"spacing":{"margin":{"bottom":"80px"}}}} /-->
  <!-- wp:post-template -->
  <!-- wp:pattern {"slug":"emptytheme/query-default"} /-->
  <!-- /wp:post-template -->
  <!-- wp:group {"layout":{"inherit":true}} -->

  <!-- wp:pattern {"slug":"emptytheme/query-pagination"} /-->

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

(c) Refactored 404.html template:

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

<!-- wp:group {"tagName":"main"} -->
<main class="wp-block-group"><!-- wp:group {"layout":{"inherit":true}} -->
<div class="wp-block-group">
<!-- wp:pattern {"slug":"tt2test/hidden-404"} /-->
</div>
<!-- /wp:group --></main>
<!-- /wp:group -->

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

Similarly, other templates can be created with desired patterns to display.

Wrapping Up

In this learning-note post, how to move page contents from template or parts files to /patterns directory was discussed. This process greatly simplifies patterns use in templates.

Useful Resources

The following is list of references link that I gathered during my brief research. While preparing this post, I have also referred some of the following references extensively.