Areas and alternative template parts in block themes

Template parts are not new to block themes. In classic themes, there were partial templates, that do not include the entire page and are reusable.

However, block themes’ template parts are not limited to a set of predefined templates. To create a new one we just have to:

  1. Add a template file in the parts folder
  2. Include it in a template, post or page using the template-part block

We can also add them to our theme JSON, so it will appear as an option in the editor. To do this, we just need to give our template part a name, a slug — matching the file name —, and the area in which it will be displayed.

For example, adding a header to our theme’s JSON can look like this:

"templateParts": [
        {
            "name": "header",
            "title": "Header",
            "area": "header"
        }
    ]

The area attribute may not seem very useful, as it has only three possible values: header, footer, and uncategorized. But it allows our theme to have alternative template parts.

In the NewDev theme, used on this very site, the header has two columns, side by side. The first one contains the name of the site and the tagline. The second one contains the menu. It is a very simple layout tailored to this site because it uses only text — there are no graphics in the logo —, and the navigation has only three items.

I guess it would not be useful for sites with larger menus, so I created an alternative template part where both columns are full-width rows. And also, alternative parts with no navigation. And I included them in the theme’s JSON like this:

"templateParts": [
        {
            "name": "header-side-w-menu",
            "title": "Header side with menu",
            "area": "header"
        },
        {
            "name": "header-side",
            "title": "Header side",
            "area": "header"
        },
        {
            "name": "header-full-w-menu",
            "title": "Header full with menu",
            "area": "header"
        },
        {
            "name": "header-full",
            "title": "Header full",
            "area": "header"
        }
    ]

What is great about having these alternative template parts is that they can be easily changed as they are all assigned to the header area. When using this theme, in the editor, you can select the header and in the contextual menu, a new option will appear: Replace.

Contextual menu showing the name of the template part in use "Header side with menu", and the Replace button

If you click on Replace, it will show the alternate options included in the theme.

Modal titled "Choose a header", listing the options in a list called "Existing template parts"

In the NewDev theme, the alternative templates are not that different. And there is no option for having an image for the logo, yet. But it helps me illustrate how useful it is to create alternative template parts and assign them in our theme’s JSON.

I do not think WordPress is going to expand the possible values for area, but maybe they will add the option to customise them or add new ones.