Experimental: Templates & Template parts

Download the course material

Templates are your base files. In this example, we are working with front-page.html, and we create a single.html file.

Both files need to be inside the block-templates folder.

Template parts can represent your sections. In the video, we are making sure that our header.html template part can be loaded inside the front-page.html template.

There is one important remark that I forgot to include in the video: Just like blocks, templates and template parts are self containing. The opening tag and the closing tag, must be in the same template.

As in, you would not be able to place an opening tag for a group block in a header template, and close it in a footer template.

Theme exporter Github issue:

https://github.com/WordPress/gutenberg/issues/19260

https://github.com/WordPress/gutenberg/pull/21958

Transcript

This lesson will be another short video, because adding template parts is really not complicated.

We begin this lesson by having a look at our theme on the front.

[Screen: Our theme has a light grey body background color, with a centered column with a white background. It displays one posts, with the title “Hello world”. To the right of the post, there is a sidebar with a search form, a comment, a category listing ( uncategorized ) and a link to a date archive. at the bottom of the page there is a footer text saying “Proudly powered by WordPress”. ]

As you can see, it’s not much of a theme yet. It doesn’t even have a header, even though we have our header template part inside our folder.

So in this lesson, right now, we are going to add the header.

Please open the front-page.html file in your code editor.

[Screen: The view is set to the code editor]

Our front page is mainly built using group blocks.
This is because group blocks makes it easier to, well, align our blocks and group them together.

Our first element, is a group block that works as a wrapper. I have even added a custom class, called wrapper.

<!-- wp:group {"align":"wide","className":"wrapper has-style-rounded-corners", "style":{"color":{"background":"#ffffff"}}} --> <div class="wp-block-group alignwide wrapper has-style-rounded-corners has-background" style="background-color:#ffffff"> <div class="wp-block-group__inner-container">

Inside our group block, we have a second group block, that also includes a columns block.

This columns block is what is creating the content area and the sidebar.

And below that, I am adding our footer template.

Adding template parts is quiet easy.

We start by creating a comment, and then we add: wp:template-part, slug: meaning, our file name, and then, our theme name.

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

We can now scroll back up to the top of our file, and locate the inner group block where we will add the header code.

[Note: Refers to line 6 in front-page.html]

So, wp:template-part, slug, which is “header”, and our theme: “stanley”.

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

We can now save and preview on the front.

OK, this looks a little bit better.

[Screen: The link refers to the post title]

Let’s try to click on this link, and see what happens if we try to access a post.

[Screen: Text reads: No matching template found ]

No. This message just explains that we have not added a template file for posts yet.

[Screen: The view is returned to the code editor]

To create the new template, you can save a copy of front-page.html as single.html inside the block-templates folder.

We are now going to replace the latest posts block, that’s in the content column right here with a post title, post author, and post content.

[Note: Refers to line 10 in single.html]

So I am going to type out:
wp:post-title, wp:post-author, and wp:post-content.

<!-- wp:columns {"align":"wide"} --> <div class="wp-block-columns alignwide"> <!-- wp:column --> <div class="wp-block-column"> <!-- wp:post-title /--> <!-- wp:post-author /--> <!-- wp:post-content /--> </div> <!-- /wp:column --> <!-- wp:column {"width":25} --> <div class="wp-block-column" style="flex-basis:25%"> <!-- wp:search {"label":" "} /--> <!-- wp:latest-comments /--> <!-- wp:categories /--> <!-- wp:archives /--> </div> <!-- /wp:column --> </div> <!-- /wp:columns -->

Of course, most of the time, you will not be typing out the blocks by hand.
You would assemble your blocks in the editor, and then copy and paste the code into your HTML file.

But this is good basic knowledge when you need to make small edits.

There is an update planned for Gutenberg, where you will be able to export themes directly in the site editor.

If you want to follow along with the progress, I have added a link to the Github issue in the course material.