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.
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.
Switch-over to the Code Editor and copy the HTML code for your Block pattern.
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 -->
GUTEN;
register_block_pattern(
'cwpdev-store/quick-highlights',
['title'=>'CWPDEV Store Quick Highlights',
'description'=> 'Whip out a three column set important products',
'content'=>$code,
'categories'=>['cwpdev-store']
]);
}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(){
register_block_pattern_category(
'cwpdev-store',
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.
Keyboard shortcuts
Down arrow Next slide
Up arrow Previous slide
Color codes
Hover over text more additional info