Learning Gutenberg – post #2: template parts
This is part 2. Part 1 is here.
Today I have been exploring how template parts work in Gutenberg themes. I have used the default theme downloadable from fullsiteediting.com/block-theme-generator/ as a starter theme.
Themes have template parts. Template parts are modular, reusable components (like headers, footers, or sidebars) that can be included in multiple templates. They are stored as .html files in the /parts directory and referenced in templates using block markup (e.g., <!-- wp:template-part {"slug":"header"} /-->).
The code that should go in these template parts can be:
- generated by the Gutenberg editor, exported, and saved to a template part
- written from scratch, retaining only a few dynamic elements
A few points:
- Generating the exact layout you want in Gutenberg is not really user friendly, especially if you know how to code. I would never do that unless forced.
- Writing your template parts in html/css with a few dynamic elements (like the navigation would surely work of course, but the layout would not be reflected within the theme builder and the layout itself would not be editable, or not the way you expect. Might be a problem.
So, if I had to build a theme, I would go for option number 2 for my template parts.
Templates are different from patterns, which are pre-designed modifiable layouts a user can include in the posts or pages.
For example, a parts/header.html is a template and is included in each page template, while a patterns/two-columns-with-images-and-dancing-cat.php can be used when needed throughout the editor. I’ll write something about patterns in the future, as I get to explore them better.
In the next post, I want to write about theme.json, the central configuration file for block themes. It allows you to define global styles, block settings, and presets.