Gutenberg Block Patterns


Frequently, you’ll find yourself using similar designs and layouts on multiple pages—but with enough differences that you can’t easily set up a theme sidebar or page layout to address all of the unique combinations.


Enter Gutenberg Block patterns: They’re easy enough that you can set one up over a cup a coffee–but require a bit coding knowledge, so webmasters may need a Dev to do the work. One day, I believe Core will make this easy to accomplish from the admin panel.

Step 1: Pattern Creation

In the Block editor, create the pattern that you intend to reuse. Customize you blocks as much or as little as you want to–authors, editors, and admins will be able to tweak and tune these each time they drop them into a post.

Step 2: Copy Pattern Code

Switch-over to the Code Editor and copy the HTML code for your Block pattern.

Step 3: Add Code to functions.phpor somewhere that you’ve got setup for custom code

Create a custom function to register your pattern. When pasting in your pattern’s HTML code, I recommend Heredoc syntax, to prevent weird things from escaping.


Call WordPress’s register_block_pattern function.

function cwpdev_block_pattern() {
 	$code = <<<GUTEN
<!-- wp:columns -->
<div class="wp-block-columns"><!-- wp:column -->
<div class="wp-block-column"><!-- wp:woocommerce/product-new {"columns":1,"rows":1} /--></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:woocommerce/featured-product {"editMode":false,"productId":1693} -->
<!-- wp:button {"align":"center"} -->
<div class="wp-block-button aligncenter"><a class="wp-block-button__link" href="https://localhost/wordpress/product/i-am-a-demo-product/">Shop now</a></div>
<!-- /wp:button -->
<!-- /wp:woocommerce/featured-product --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:woocommerce/product-on-sale {"columns":1,"rows":1} /--></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->

 	['title'=>'CWPDEV Store Quick Highlights',
 	'description'=> 'Whip out a three column set important products',

Step 4: Register and Hook in

add_action('init', 'cwpdev_block_pattern');

* Optional: register a custom category for your pattern
* (only is that's what you registered your pattern with)

add_action('init', 'cwpdev_block_pattern_category');
function cwpdev_block_pattern_category(){
     array( 'label' => 'CWPDEV Store Hacks' )

Finally, hook your function into the init action.

If you used a customFor either branding or vanity 😉 category for your pattern, you’ll need to register that too.


You just created a block pattern. Pretty straightforward, right?

But what about when the existing blocks don’t cut it anymore? That when we need to start building our custom blocks.

But first, let’s make sure we understand patterns.

Knowledge Check



Keyboard shortcuts

CTRL+Shift+F Search slideshow
F Fullscreen view
CTRL+Click Zoom in
Esc Topic overview
Right arrow,
Down arrow
Next slide
Left arrow,
Up arrow
Previous slide

Color codes

Hover over text more additional info
Link to an external resource
Link to an internal slide
If buttons aren't working, click in the screen to "focus" your browser