I initially planned to continue with the header, as mentioned in the last blog post, in which we’ve created a sidebar for our theme in the Site Editor using a “Synced Pattern”. But since this has some downsides I wanted to address before creating more pattern, we are going to improve the current solution first.

The sidebar as a synced pattern

For the “Index” template, we’ve created a two-column layout and placed the sidebar in the right column. If we show the source code for the front page, this is what we will see:

<!-- wp:column {"width":"300px","style":{"spacing":{"padding":{"top":"0","bottom":"0","left":"0","right":"0"}}}} -->
<div class="wp-block-column" style="padding-top:0;padding-right:0;padding-bottom:0;padding-left:0;flex-basis:300px">
<!-- wp:block {"ref":1842} /-->
</div>
<!-- /wp:column --></div>

The sidebar is referenced by an ID. This is the post ID of that Synced Pattern with has a post_type of wp_block. The post_content is the blocks we’ve added to the sidebar:

<!-- wp:group {"style":{"spacing":{"padding":{"top":"20px","bottom":"20px","left":"20px","right":"20px"}}},"backgroundColor":"background-secondary","layout":{"type":"constrained"}} -->
<div class="wp-block-group has-background-secondary-background-color has-background" style="padding-top:20px;padding-right:20px;padding-bottom:20px;padding-left:20px"><!-- wp:search {"label":"Search","showLabel":false,"buttonText":"Search","buttonPosition":"button-inside","buttonUseIcon":true} /-->

<!-- wp:heading {"level":3} -->
<h3 class="wp-block-heading">Recent Posts</h3>
<!-- /wp:heading -->

<!-- wp:latest-posts /-->

<!-- wp:heading {"level":3} -->
<h3 class="wp-block-heading">Recent Comments</h3>
<!-- /wp:heading -->

<!-- wp:latest-comments {"displayAvatar":false,"displayDate":false,"displayExcerpt":false} /-->

<!-- wp:heading {"level":3} -->
<h3 class="wp-block-heading">Categories</h3>
<!-- /wp:heading -->

<!-- wp:categories /-->

<!-- wp:heading {"level":3} -->
<h3 class="wp-block-heading">Archives</h3>
<!-- /wp:heading -->

<!-- wp:archives /--></div>
<!-- /wp:group -->

This shows another issue the current solution has: all headings are hard coded into the sidebar. This might be OK for a single site, but since my blog is multilingual, and I want to create a theme that can be used by anyone in any language, we want to be able to translate those strings. How do we do that?

Transforming the synced pattern into a template/pattern

The first step of this is to take the last code snippet and move it into a file. We could use an HTML file here, but if we want to translate it, we have to use a PHP file. Since the sidebar is only a part of a template, like the “Index” template, it makes sense to store it in a different directory. The best one here is the patterns directory, which is also quite logical, since it was a pattern before.

Creating the pattern

So let’s create a file patterns/sidebar.php and copy the synced pattern from the Site Editor (stored in the database):

<?php
/**
 * Title: Sidebar
 * Slug: kauri/sidebar
 * Inserter: no
 */
?>
<!-- wp:group {"style":{"spacing":{"padding":{"top":"20px","bottom":"20px","left":"20px","right":"20px"}}},"backgroundColor":"background-secondary","layout":{"type":"constrained"}} -->
<div class="wp-block-group has-background-secondary-background-color has-background" style="padding-top:20px;padding-right:20px;padding-bottom:20px;padding-left:20px"><!-- wp:search {"label":"Search","showLabel":false,"buttonText":"Search","buttonPosition":"button-inside","buttonUseIcon":true} /-->

	<!-- wp:heading {"level":3} -->
	<h3 class="wp-block-heading"><?php esc_html_e( 'Recent Posts', 'kauri' ); ?></h3>
	<!-- /wp:heading -->

	<!-- wp:latest-posts /-->

	<!-- wp:heading {"level":3} -->
	<h3 class="wp-block-heading"><?php esc_html_e( 'Recent Comments', 'kauri' ); ?></h3>
	<!-- /wp:heading -->

	<!-- wp:latest-comments {"displayAvatar":false,"displayDate":false,"displayExcerpt":false} /-->

	<!-- wp:heading {"level":3} -->
	<h3 class="wp-block-heading"><?php esc_html_e( 'Categories', 'kauri' ); ?></h3>
	<!-- /wp:heading -->

	<!-- wp:categories /-->

	<!-- wp:heading {"level":3} -->
	<h3 class="wp-block-heading"><?php esc_html_e( 'Archives', 'kauri' ); ?></h3>
	<!-- /wp:heading -->

	<!-- wp:archives /--></div>
<!-- /wp:group -->

Every pattern should get a header comment properties, like Title, Slug and other things. As we don’t need this pattern to show up in the patterns list in the Site Editor, we set Inserter: no in the header comment.

You can also see that our headings are now wrapped in translation functions. Now we are ready to use this new pattern in a template.

Using the pattern

Since we’ve used the “Create Block Theme” plugin, we have already overwritten our templates/index.html file, when we saved changes from the Site Editor to the theme files. As shown in the first snippets, this contains the following line:

<!-- wp:block {"ref":1842} /-->

In order to use the pattern file from the theme instead, we replace it with a line like this:

<!-- wp:pattern {"slug":"kauri/sidebar"} /-->

We could go ahead and use this in our templates/index.html file directly, but we will add another step in between. Instead, we create a new file called parts/sidebar.html and save this single line in here.

Why do we do that? Besides pattern, we have a second type of “reusable templates”. The other type is “templates parts”, which are considered “areas” in your templates. The two parts we already have are “header” and “footer”. Our “sidebar” is nothing different, so it makes sense to use a template part here as well. We should therefore also add it to the theme.json in the templateParts section:

{
	"templateParts": [
		{
			"area": "header",
			"name": "header",
			"title": "Header"
		},
		{
			"area": "footer",
			"name": "footer",
			"title": "Footer"
		},
		{
			"area": "uncategorized",
			"name": "sidebar",
			"title": "Sidebar"
		}
	]
}

Now, when finally adding this template part to the index.html template, you will see the other benefit. This is how we do it:

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

With the tagName attribute, which is not available for the wp:pattern block, we can wrap the sidebar in an <aside> tag for better accessibility.

Cleanup

Since we’ve moved the sidebar into a pattern in the theme, you can now safely navigate to “Appearance > Editor > Patterns” and delete the synced pattern (stored in the database).

Conclusion

While building a theme/layout, it’s great to quickly do this inside the Site Editor. But once you are done, you should save all changes into your theme files. While many changes can be saved automatically using the “Create Block Theme” plugin, some tasks need to be done manually.

You can find all the changes in the current commit to the Git repository for this theme. I’m positive that we can now move on to work on the header of the theme.