Easier Block Patterns using Template Parts

Update May 2023: Block Patterns are now primarily self-registering when placed in the /patterns folder of a Block Theme. The following explanation is still relevant if you choose to register them using register_block_pattern in PHP.

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



Discover more from Permanent Tourist

Subscribe to get the latest posts sent to your email.

2 responses to “Easier Block Patterns using Template Parts”

  1. Rima Gerhard avatar
    Rima Gerhard

    Mark, I wonder if you still use this setup? I think V60 changed how block patterns are registered so I am curious if you have any update on this.

    1. Mark Howells-Mead avatar

      Block Patterns are now primarily self-registering when placed in the /patterns folder of a Block Theme. The method in this article is still relevant if you choose to register them using register_block_pattern in PHP.

Leave a Reply

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

For security, use of Google’s reCAPTCHA service is required which is subject to the Google Privacy Policy and Terms of Use.

I agree to these terms.

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