Full Site Editing (FSE for short) is scheduled to be included in WordPress 5.6 in a few months. In case you are not aware of what FSE is, it’s an effort to bring the Block Block is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience. Editor to all areas of a site, including the site header The header of your site is typically the first thing people will experience. The masthead or header art located across the top of your page is part of the look and feel of your website. It can influence a visitor’s opinion about your content and you/ your organization’s brand. It may also look different on different screen sizes., footer, sidebars and everything in between.
Reusable Blocks are a pretty neat and relatively underestimated feature of the Block Editor that can allow you to implement these things in your theme now, easing the transition to a full-fledged editing experience.
The idea is this: You can create a reusable block for your site’s header or footer, and inject that where your normal theme’s header or footer would be. Reusable blocks are a separate post-type called wp_block and can be queried like any other post-type, so you can do pretty much anything you want with them.
Below I’m going to share some example code snippets that you can use & modify to suit your needs. The examples will be for a header, but you can duplicate the same logic for footers, sidebars and so on.
First, we’ll need a function that will check if a reusable-block with that title exists. If it does exist we’re going to print its content, and if it doesn’t exist we’re going to return false to make things easier down the road:
/**
* Prints the header reusable block.
* If a "site-header" reusable-block doesn't exist, return false.
*
* @return bool
*/
function my_theme_the_header_reusable_block() {
// Run the query.
$posts = get_posts( [
'post_type' => 'wp_block',
'title' => 'site-header',
] );
// If a block was located print it and return true.
if ( $posts && isset( $posts[0] ) ) {
echo do_blocks( $posts[0]->post_content );
return true;
}
// If we got this far the header block doesn't exist.
// Return false.
return false;
}
Next, we’re going to add a function to print the contents of that 1st function. If a block doesn’t exist, we’re going to print a fallback header by calling get_template_part( 'fallback-header' ), and then we’ll add a message urging the site-admin to create a new header. This way users won’t start wondering “why is there no header”, they can just click a link and create one:
/**
* Print the header content.
*
* If a "site-header" reusable block exists we print its contents here
* otherwise add a link so admins can create a new header.
*/
function my_theme_the_header() {
?>
<header>
<?php // Print the header. If one doesn't exist, print custom content. ?>
<?php if ( ! my_theme_the_header_reusable_block() ) : ?>
<?php get_template_part( 'fallback-header' ); ?>
<?php if ( current_user_can( 'edit_theme_options' ) ) : ?>
<p>
<?php esc_html_e( 'It looks like you have not yet created a header for your site.', 'textdomain' ); ?>
</p>
<p>
<a href="<?php echo esc_url( admin_url( 'post-new.php?post_type=wp_block&post_title=site-header' ) ); ?>">
<?php esc_html_e( 'Create a new header', 'textdomain' ); ?>
</a>
</p>
<?php endif; ?>
<?php endif; ?>
</header>
<?php
}
When they click on the link generated from this function, users will be redirected to a page where they can add the contents of their header, and to make things easier the site-header title is already filled-in for them.
The above 2 functions can be included in our theme’s functions.php file, or anywhere else we want them depending on the theme’s structure.
To print this user-created header in our theme we’ll just have to go in our header.php file and call the my_theme_the_header() function.That’s all there is to it!
We can further improve the my_theme_the_header() function by adding a permission check to make sure the user can create a block before we add the link (EDIT: Permission check added to the code snippet above), and we can even add an edit link so site-owners can go to the header’s edit screen, but for the sake of this post we’re keeping things simple and open to your improvements.
Why this is important:
Using the technique above, existing themes can leverage the block editor for all things instead of being limited to the content area.
Using reusable blocks is a good way to get ready for Full-Site Editing and will be easier to transition to a new block structure. You can start exploring options, you can even start transitioning your existing headers to a block structure and use them as a fallback, combining them with the “Create a new header” link from the above example.
When FSE gets released, a theme that was previously using a reusable-block for its header will be a lot easier to transition to the new structure since the header will already be there in a proper blocks format.
