{"id":4771,"date":"2022-04-15T09:45:35","date_gmt":"2022-04-15T09:45:35","guid":{"rendered":"https:\/\/learncode.tinjurewp.com\/?p=4771"},"modified":"2022-04-16T09:46:05","modified_gmt":"2022-04-16T09:46:05","slug":"patternizing-block-templates","status":"publish","type":"post","link":"https:\/\/learncode.tinjurewp.com\/patternizing-block-templates\/","title":{"rendered":"Patternizing Block Templates"},"content":{"rendered":"

Notes: This post is part 2<\/strong> 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.<\/p>\n

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

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

Learning Goals<\/strong>
\nPart 1<\/strong>: To create entire block theme templates based on block patterns only using experimental emptytheme.<\/a>
\nPart 2:<\/strong> Patternizing Block Templates (this post<\/strong>)<\/div>\n

The objective of this learning-note post is to move entire post-contents from the block templates to \/patterns<\/code> directory as described in the previous part 1<\/em> post.<\/p>\n

For this proof of concept post, I used a child theme (Empty-child<\/code>) of the emptytheme<\/a> of WordPress experimental theme.<\/p>\n

#! EMPTY-CHILD theme file structure\nempty-child\n|__ assets\n|__ patterns\n    |__ footer-default.php\n    |__ header-default.php \n    |__ hidden-404.php\n    |__ posts-list.php\n    |__ query-default.php\n    |__ query-pagination.php\n    |__ single-post.php\n|__ templates\n    |__ index.html\n    |__ archive.html\n    |__ singular.html\n    |__ search.html\n    |__ 404.html\n|__ parts\n    |__ header.html\n    |__ footer.html\n|__ style.css\n|__ functions.php\n|__ index.php\n|__ theme.json<\/code><\/pre>\n
In this example, I created parts and templates and added content from WordPress Archeo<\/a> theme, with some modification.<\/p>\n
The index.html<\/code> template of the Empty-child looks as shown below.<\/p>\n
<!-- wp:template-part {"slug":"header","tagName":"header"} \/-->\n\n  <!-- wp:group {"align":"full","layout":{"inherit":true}} -->\n  <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}} -->\n    <main class="wp-block-query alignwide"><!-- wp:post-template -->\n    <!-- wp:separator {"opacity":"css","className":"is-style-wide"} -->\n    <hr class="wp-block-separator has-css-opacity is-style-wide"\/>\n    <!-- \/wp:separator -->\n    \n    <!-- wp:columns {"style":{"spacing":{"padding":{"top":"1em"}}}} -->\n    <div class="wp-block-columns" style="padding-top:1em"><!-- wp:column {"verticalAlignment":"top","width":"10%","style":{"spacing":{"padding":{"top":"1em"}}}} -->\n    <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>\n    <!-- \/wp:column -->\n    \n    <!-- wp:column {"verticalAlignment":"center","width":""} -->\n    <div class="wp-block-column is-vertically-aligned-center"><!-- wp:post-title {"isLink":true,"fontSize":"x-large"} \/-->\n    \n    <!-- wp:post-excerpt {"moreText":"Read More ...."} \/--><\/div>\n    <!-- \/wp:column --><\/div>\n    <!-- \/wp:columns -->\n    <!-- \/wp:post-template -->\n    \n    <!-- wp:spacer {"height":"32px"} -->\n    <div style="height:32px" aria-hidden="true" class="wp-block-spacer"><\/div>\n    <!-- \/wp:spacer -->\n    \n    <!-- wp:pattern {"slug":"emptytheme\/query-pagination"} \/-->\n    \n    <\/main>\n    <!-- \/wp:query --><\/div>\n    <!-- \/wp:group -->\n  \n <!-- wp:template-part {"slug":"footer","tagName":"footer"} \/--><\/code><\/pre>\n
The above code snippet was refactored by moving the content section into \/patterns<\/code> folder, as described in the previous post<\/a>.<\/p>\n
Create posts-list.php<\/code> file inside \/patterns<\/code> folder<\/strong><\/h6>\n
First create the following header section at the top section of posts-list.php<\/code> file.<\/p>\n
\/\/ header section\n<?php\n\/**\n * Title: Posts list\n * Slug: emptytheme\/posts-list\n * Categories: featured, query\n * Block Types: query\n *\/\n?><\/code><\/pre>\n
Next copy the content section (line 3-31) from the previous section append after the header in post-list.php<\/code> file, see below in entirety.<\/p>\n
<?php\n\/**\n * Title: Posts List\n * Slug: emptytheme\/posts-list\n * Categories: emptytheme-posts\n * Viewport Width: 1280\n * Inserter: yes\n *\/\n\n?>\n\n<!-- wp:group {"align":"full","layout":{"inherit":true}} -->\n<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}} -->\n<main class="wp-block-query alignwide"><!-- wp:post-template -->\n<!-- wp:separator {"opacity":"css","className":"is-style-wide"} -->\n<hr class="wp-block-separator has-css-opacity is-style-wide"\/>\n<!-- \/wp:separator -->\n\n<!-- wp:columns {"style":{"spacing":{"padding":{"top":"1em"}}}} -->\n<div class="wp-block-columns" style="padding-top:1em"><!-- wp:column {"verticalAlignment":"top","width":"10%","style":{"spacing":{"padding":{"top":"1em"}}}} -->\n<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>\n<!-- \/wp:column -->\n\n<!-- wp:column {"verticalAlignment":"center","width":""} -->\n<div class="wp-block-column is-vertically-aligned-center"><!-- wp:post-title {"isLink":true,"fontSize":"x-large"} \/-->\n\n<!-- wp:post-excerpt {"moreText":"Read More ...."} \/--><\/div>\n<!-- \/wp:column --><\/div>\n<!-- \/wp:columns -->\n<!-- \/wp:post-template -->\n\n<!-- wp:spacer {"height":"32px"} -->\n<div style="height:32px" aria-hidden="true" class="wp-block-spacer"><\/div>\n<!-- \/wp:spacer -->\n\n<!-- wp:pattern {"slug":"emptytheme\/query-pagination"} \/-->\n\n<\/main>\n<!-- \/wp:query --><\/div>\n<!-- \/wp:group --><\/code><\/pre>\n
Refactoring Template Files<\/h6>\n
Next, refactoring template file. The refactored index.html<\/code> file has only three lines of code.<\/p>\n
<!-- wp:template-part {"slug":"header","tagName":"header"} \/-->\n\n<!-- wp:pattern {"slug":"emptytheme\/posts-list"} \/-->\n  \n<!-- wp:template-part {"slug":"footer","tagName":"footer"} \/--><\/code><\/pre>\n
The refactored index.html file and original template displayed exactly same way both in the editor and in the front-end.<\/p>\n
The following other refactored template files (see below) behave similarly too.<\/p>\n
(a)<\/strong> Refactored singular.html<\/code> template:<\/p>\n
<!-- wp:template-part {"slug":"header","tagName":"header"} \/-->\n\n<!-- wp:pattern {"slug":"emptytheme\/single-post"} \/-->\n\n<!-- wp:template-part {"slug":"footer","tagName":"footer"} \/--><\/code><\/pre>\n
(b)<\/strong> Refactored archive.html<\/code> template file:<\/p>\n
<!-- wp:template-part {"slug":"header","tagName":"header"} \/-->\n\n<!-- wp:query {"tagName":"main","layout":{"inherit":true}} -->\n<main class="wp-block-query">\n  <!-- wp:query-title {"type":"archive","style":{"spacing":{"margin":{"bottom":"80px"}}}} \/-->\n  <!-- wp:post-template -->\n  <!-- wp:pattern {"slug":"emptytheme\/query-default"} \/-->\n  <!-- \/wp:post-template -->\n  <!-- wp:group {"layout":{"inherit":true}} -->\n\n  <!-- wp:pattern {"slug":"emptytheme\/query-pagination"} \/-->\n\n  <!-- \/wp:group -->\n  <\/main>\n  <!-- \/wp:query -->\n  \n  <!-- wp:template-part {"area":"footer","slug":"footer","tagName":"footer"} \/--><\/code><\/pre>\n
(c)<\/strong> Refactored 404.html<\/code> template:<\/p>\n
<!-- wp:template-part {"slug":"header","tagName":"header"} \/-->\n\n<!-- wp:group {"tagName":"main"} -->\n<main class="wp-block-group"><!-- wp:group {"layout":{"inherit":true}} -->\n<div class="wp-block-group">\n<!-- wp:pattern {"slug":"tt2test\/hidden-404"} \/-->\n<\/div>\n<!-- \/wp:group --><\/main>\n<!-- \/wp:group -->\n\n<!-- wp:template-part {"slug":"footer","tagName":"footer"} \/--><\/code><\/pre>\n
Similarly, other templates can be created with desired patterns to display.<\/p>\n
Wrapping Up<\/h6>\n
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.<\/p>\n
Useful Resources<\/h6>\n
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.<\/p>\n