Block based template parts in “legacy” style themes

written by: Jeff McNear

Block based template parts in “legacy” style themes

As of WordPress 6.1 there is a wonderful compromise between Full Site Editing and “Legacy” theming which allows for the use of block based template parts with some small modifications to your theme.

First in the functions file add this snippet to enable theme support for template parts:

function add_block_template_part_support() {
    add_theme_support( 'block-template-parts' );
}
 
add_action( 'after_setup_theme', 'add_block_template_part_support' );

Then you will need to add a “parts” folder to the theme structure … and within that folder add an HTML file for each template part you want to include.

(see the slides from this presentation: wordpress-full-site-editing for the process of using the editor to populate the files).

In order to display the template part, it must be referenced within the theme’s files in the appropriate place(s). For instance the snippet to add the contents of the footer.html file would be:

<?php block_template_part( 'footer' ); ?>

Once the snippet is added to the functions file, the editor will now see this option:

Which will show only the template parts section of the full site editor:

… each part can be freely edited and their changes will be saved in the database.

Templates, and the changing of template parts within them remains a “code based” process in a legacy theme.

For anyone who saw my FSE presentation you already know I still prefer the old menu module … in this scenario you can use the old menu module while still constructing with blocks!

For more information go here: https://make.wordpress.org/core/2022/10/04/block-based-template-parts-in-traditional-themes/

11/17/22 NOTE:

as of WordPress 6.1.1 there is an issue which prevents editing the template parts unless some kind of theme.json file exists (see: https://github.com/WordPress/gutenberg/issues/45862#issuecomment-1319044884 ). This file can be dead simple, but must be there for the edit function to work … at least until the next update to WordPress core. Here is the coding for the simplest of theme.json files:

{
    "version": 2,
    "settings": {}
}