Creating A Block Pattern with register_block_pattern

Creating block patterns with plugins, or with the pattern directory tool is great. It offers a quick clean method for site owners to build their patterns with a visual tool and not have to dig into the code. For some clients they may just want to grab something from a collection of premade blocks patterns. Using the built in WordPress function that registers block patterns, WordPress developers can rebuild a set of useful tools for their clients into their theme or functionality plugin.

register_block_pattern()

The function register_block_pattern has two required parameters of a pattern name string, and pattern properties array.

register_block_pattern( string $pattern_name, array $pattern_properties );

For our demo block I’m going to set my parameters to the following:

$pattern_name = 'my-plugin/landing-grid';
$pattern_properties = array(
    'title' => 'Landing Grid', //required
    'content' => '', //require, more details below,
    'description' => 'Grid that can be used to quickly describe, and link users to new page.'
    'categories => array( 'featured' ),
    'keywords' => array( 'cta', 'demo', 'example' )
);

Our pattern_name is a simple, namespaced string. The pattern properties array has a few required items, and a few optional, to see the full list of parameters you can view them on the register_block_documenation() page. You’ll notice I left the content blank, but it is required, so let’s dig into that.

Behind the scenes of the block editor, WordPress is saving a mixture of HTML and specially formatted comments. That block editor markup is what will need to go into the $pattern_properties[‘content’] param. The best way to do this when setting up a block pattern is to create a new post, layout your block pattern with the block editor itself. Once all of your blocks are setup the way you need for the pattern, in the top right you will need to click and open the options panel, scan down the list and click “Copy all blocks”.

Once all content is copied you should have some markup that looks similar to this, depending on your blocks of course.

<!-- wp:columns {"align":"wide"} -->
<div class="wp-block-columns alignwide"><!-- wp:column {"width":"66.66%"} -->
<div class="wp-block-column" style="flex-basis:66.66%"><!-- wp:cover {"url":"https://images.rawpixel.com/image_1300/czNmcy1wcml2YXRlL3Jhd3BpeGVsX2ltYWdlcy93ZWJzaXRlX2NvbnRlbnQvam9iNjY2LTA2NS12LWwxMDg0NWg2LmpwZw.jpg","hasParallax":true,"dimRatio":90,"minHeight":500,"minHeightUnit":"px","gradient":"vivid-cyan-blue-to-vivid-purple"} -->
<div class="wp-block-cover has-parallax" style="min-height:500px"><span aria-hidden="true" class="wp-block-cover__background has-background-dim-90 has-background-dim wp-block-cover__gradient-background has-background-gradient has-vivid-cyan-blue-to-vivid-purple-gradient-background"></span><div role="img" class="wp-block-cover__image-background has-parallax" style="background-position:50% 50%;background-image:url(https://images.rawpixel.com/image_1300/czNmcy1wcml2YXRlL3Jhd3BpeGVsX2ltYWdlcy93ZWJzaXRlX2NvbnRlbnQvam9iNjY2LTA2NS12LWwxMDg0NWg2LmpwZw.jpg)"></div><div class="wp-block-cover__inner-container"><!-- wp:heading {"textAlign":"left","style":{"spacing":{"padding":{"right":"var:preset|spacing|70"},"margin":{"top":"0","right":"0","bottom":"0","left":"0"}},"elements":{"link":{"color":{"text":"var:preset|color|white"}}}},"className":"wp-block-heading","fontSize":"x-large"} -->
<h2 class="has-text-align-left wp-block-heading has-link-color has-x-large-font-size" style="margin-top:0;margin-right:0;margin-bottom:0;margin-left:0;padding-right:var(--wp--preset--spacing--70)"><strong><a href="#">Lorem Ipsum Dolor Sit Amet</a></strong></h2>
<!-- /wp:heading -->

<!-- wp:paragraph {"style":{"elements":{"link":{"color":{"text":"var:preset|color|white"}}}},"fontSize":"small"} -->
<p class="has-link-color has-small-font-size"><a href="#">Consectetur Adipiscing Elit</a></p>
<!-- /wp:paragraph -->

<!-- wp:buttons {"style":{"spacing":{"blockGap":"0"}}} -->
<div class="wp-block-buttons"><!-- wp:button {"backgroundColor":"vivid-cyan-blue"} -->
<div class="wp-block-button"><a class="wp-block-button__link has-vivid-cyan-blue-background-color has-background wp-element-button">Read More</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons --></div></div>
<!-- /wp:cover --></div>
<!-- /wp:column -->

<!-- wp:column {"width":"33.33%"} -->
<div class="wp-block-column" style="flex-basis:33.33%"><!-- wp:cover {"url":"https://images.rawpixel.com/image_1300/cHJpdmF0ZS9sci9pbWFnZXMvd2Vic2l0ZS8yMDIyLTA0L2pvYjY3NC0wNDUtcC5wbmc.png","dimRatio":90,"focalPoint":{"x":0.58,"y":0},"minHeight":237,"minHeightUnit":"px","gradient":"midnight"} -->
<div class="wp-block-cover" style="min-height:237px"><span aria-hidden="true" class="wp-block-cover__background has-background-dim-90 has-background-dim wp-block-cover__gradient-background has-background-gradient has-midnight-gradient-background"></span><img class="wp-block-cover__image-background" alt="" src="https://images.rawpixel.com/image_1300/cHJpdmF0ZS9sci9pbWFnZXMvd2Vic2l0ZS8yMDIyLTA0L2pvYjY3NC0wNDUtcC5wbmc.png" style="object-position:58% 0%" data-object-fit="cover" data-object-position="58% 0%"/><div class="wp-block-cover__inner-container"><!-- wp:heading {"textAlign":"left","level":3,"style":{"spacing":{"padding":{"right":"0"},"margin":{"top":"0","right":"0","bottom":"0","left":"0"}},"elements":{"link":{"color":{"text":"var:preset|color|white"}}}},"textColor":"white","className":"wp-block-heading","fontSize":"medium"} -->
<h3 class="has-text-align-left wp-block-heading has-white-color has-text-color has-link-color has-medium-font-size" style="margin-top:0;margin-right:0;margin-bottom:0;margin-left:0;padding-right:0"><strong><a href="#">Lorem Ipsum Dolor Sit Amet</a></strong></h3>
<!-- /wp:heading -->

<!-- wp:paragraph {"style":{"elements":{"link":{"color":{"text":"var:preset|color|white"}}}},"fontSize":"small"} -->
<p class="has-link-color has-small-font-size"><a href="#">Consectetur Adipiscing Elit</a></p>
<!-- /wp:paragraph -->

<!-- wp:buttons {"style":{"spacing":{"blockGap":"0"}}} -->
<div class="wp-block-buttons"><!-- wp:button {"backgroundColor":"vivid-cyan-blue"} -->
<div class="wp-block-button"><a class="wp-block-button__link has-vivid-cyan-blue-background-color has-background wp-element-button">Read More</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons --></div></div>
<!-- /wp:cover -->

<!-- wp:cover {"url":"https://images.rawpixel.com/image_1300/cHJpdmF0ZS9sci9pbWFnZXMvd2Vic2l0ZS8yMDIyLTA0L2pvYjY4Ni0yOTAteC5qcGc.jpg","dimRatio":90,"focalPoint":{"x":0.56,"y":0.43},"minHeight":237,"minHeightUnit":"px","gradient":"electric-grass"} -->
<div class="wp-block-cover" style="min-height:237px"><span aria-hidden="true" class="wp-block-cover__background has-background-dim-90 has-background-dim wp-block-cover__gradient-background has-background-gradient has-electric-grass-gradient-background"></span><img class="wp-block-cover__image-background" alt="" src="https://images.rawpixel.com/image_1300/cHJpdmF0ZS9sci9pbWFnZXMvd2Vic2l0ZS8yMDIyLTA0L2pvYjY4Ni0yOTAteC5qcGc.jpg" style="object-position:56% 43%" data-object-fit="cover" data-object-position="56% 43%"/><div class="wp-block-cover__inner-container"><!-- wp:heading {"textAlign":"left","level":3,"style":{"spacing":{"padding":{"right":"0"},"margin":{"top":"0","right":"0","bottom":"0","left":"0"}},"elements":{"link":{"color":{"text":"var:preset|color|black"}}}},"className":"wp-block-heading","fontSize":"medium"} -->
<h3 class="has-text-align-left wp-block-heading has-link-color has-medium-font-size" style="margin-top:0;margin-right:0;margin-bottom:0;margin-left:0;padding-right:0"><strong><a href="#">Lorem Ipsum Dolor Sit Amet</a></strong></h3>
<!-- /wp:heading -->

<!-- wp:paragraph {"style":{"elements":{"link":{"color":{"text":"var:preset|color|black"}}}},"fontSize":"small"} -->
<p class="has-link-color has-small-font-size"><a href="#">Consectetur Adipiscing Elit</a></p>
<!-- /wp:paragraph -->

<!-- wp:buttons {"style":{"spacing":{"blockGap":"0"}}} -->
<div class="wp-block-buttons"><!-- wp:button {"backgroundColor":"vivid-cyan-blue"} -->
<div class="wp-block-button"><a class="wp-block-button__link has-vivid-cyan-blue-background-color has-background wp-element-button">Read More</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons --></div></div>
<!-- /wp:cover --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->

We can now add that to our content parameter and place it together in the functions file. With that in place and saved, our block pattern is now available for use.