Easier Block Patterns using Template Parts

WordPress introduced Block Patterns in version 5.5, which primarily allow Theme developers to provide pre-defined groups of blocks to inspire and help editors create attractive content.

In the subsequent release of the Twenty Twenty One Theme, we saw the first widely-publicised set of Block Patterns which were provided as part of the Theme.

Block pattern example from the WordPress Twenty Twenty One Theme
Block pattern example from the WordPress Twenty Twenty One Theme

However, I’ve seen a few developers on social media drawing attention to the fact that it’s tricky to code these Block Patterns. The official documentation indicates that you click the set of blocks in the editor, then copy the HTML out and go through a palaver of “escaping” the quotes, so that the PHP syntax doesn’t break.

That, frankly, is a pain in the arse.

It’s much simpler to achieve without having to escape the content quotes by using the WordPress function get_template_part. This function uses the PHP include function to get a PHP file; the inclusion outputs the included file at the point in the code.

Using get_template_part directly would break the output: what we want to do is load the content of the template part into a variable, which we can then pass to register_block_pattern as the content.

Enter the ob_start() function. This opens what’s called an output buffer: essentially a wrapper which doesn’t output anything to the page immediately, but instead hangs on to the output until you choose what to do with it.

After opening the buffer using ob_start, you then load the template part, save this output to a variable, then close and tidy up the output buffer. Don’t forget to close the output buffer in your code, or nothing after the opening function call will go to the browser.

Once this is done, then you have the value of the buffer in a variable.

ob_start();
get_template_part('template-parts/block-patterns/cards-4');
$block_pattern_content = ob_get_contents();
ob_end_clean();

Now you can integrate this into the function you’re using to register your block pattern.

add_action('init', 'sht_register_block_pattern');

function sht_register_block_pattern(){
   if (function_exists('register_block_pattern')) {
               ob_start();
               get_template_part('template-parts/block-patterns/cards-4');
               $block_pattern_content = ob_get_contents();
               ob_end_clean();

               register_block_pattern(
                   'sht/cards-4',
                   [
                       'title'   => _x('Four cards in columns', 'Block pattern title', 'sht'),
                       'categories' => [
                           'columns'
                       ],
                       'keywords' => [
                           _x('Columns', 'Block pattern keyword', 'sht'),
                           _x('Cards', 'Block pattern keyword', 'sht'),
                       ],
                       'content' => $block_pattern_content
                   ]
               );
        }
}

Once you have this part integrated to your code, you can copy and paste the HTML from the editor into the template part file. No need to escape it or mess with it at all.

For reference, the HTML for the following four-column layout is in this Gist, which you can use within the cards4.php file.


Lorem Ipsum

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Read more

Lorem Ipsum

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Read more

Lorem Ipsum

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Read more

Lorem Ipsum

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Read more


Leave a comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.