With the introduction of Full-Site Editing (FSE) in WordPress 5.9, the landscape of theme development is undergoing a significant transformation. As plugin developers, adapting to these changes is crucial to ensure compatibility with the future of WordPress. In this quick tutorial, I’ll guide you through making your plugin’s custom templates work seamlessly with WordPress 5.9 and beyond, particularly with block themes that are integral to FSE.
The Problem at Hand
Imagine you’ve developed a plugin with a custom post type (CPT) and custom front-end templates, much like WooCommerce. Typically, these templates would use get_header() and get_footer() functions. However, with block themes in FSE, these functions are becoming obsolete, leading to deprecation notices like:
Deprecated: Theme without header.php is deprecated since version 3.0.0 with no alternative available. Please include a header.php template in your theme. in ... on line 5516
The Solution: Adapting to Block Themes
To ensure compatibility with block themes, follow these steps:
- Check for Block Theme: Use
wp_is_block_theme()to determine if the active theme is a block theme. - Implement Skeleton HTML Template: Add the basic HTML structure, including head and body tags.
- Incorporate Block Editor Styles: Ensure the block editor styles are loaded in your document head.
Step-by-Step Guide to Modifying Your Templates
Before the Change:
<?php get_header(); ?>
<div class="container">...</div>
<?php get_footer(); ?>
After Adapting for Block Themes:
<?php if ( wp_is_block_theme() ) : ?>
<?php $template_html = get_the_block_template_html(); ?>
<!doctype html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<?php wp_body_open(); ?>
<div class="wp-site-blocks">
<header class="wp-block-template-part">
<?php block_header_area(); ?>
</header>
<?php else : ?>
<?php get_header(); ?>
<?php endif; ?>
<main class="wp-block-group">
<?php //echo $template_html; // phpcs:ignore WordPress.Security.EscapeOutput ?>
</main>
<?php if ( wp_is_block_theme() ) : ?>
<footer class="wp-block-template-part">
<?php block_footer_area(); ?>
</footer>
<?php wp_footer(); ?>
</div>
</body>
</html>
<?php else : ?>
<?php get_footer(); ?>
<?php endif; ?>With these changes, your templates will be compatible with FSE themes. You can even add and render blocks using the do_blocks() function.
Bonus Tip: Exploring get_block_theme_folders()
Consider using get_block_theme_folders() to identify templates and part directories in block themes. If the theme is not a block theme, this function returns null.
As WordPress continues to evolve with Full-Site Editing, ensuring your plugins and themes are compatible is more important than ever. By adapting your templates to work with block themes, you not only future-proof your work but also embrace the new possibilities that FSE brings to WordPress.
I hope this tutorial proves helpful in your development journey. Feel free to share your thoughts and questions in the comments below.
Until next time, happy coding!