How to Create Custom Gutenberg Block Pattern

Gutenberg Block Pattern is a new feature in WordPress Gutenberg Block Editor that makes content creation easier. No doubt, it is a great exciting addition for the WordPress theme designers. As a result, designers can easily design a page within a short time.

Gutenberg Block Pattern is a pre-built layout of blocks. It may contain any design elements like columns, images, videos, text, buttons, etc. However, once you create a Gutenberg block pattern, you can use that again and again throughout your website. Consequently, it will save time.

Today, I am going to show how to create a custom Gutenberg Block Pattern easily.

Necessary Steps

I will share the step by step guideline to create a Gutenberg block pattern easily. So, I will follow the following steps to create a custom block pattern. 

  • Add Some Blocks
  • Copy Blocks
  • Register Custom Block Pattern
  • Use the Block Pattern

Add Some Blocks

First of all, you have to create a test page or post where you will need to design your expected pattern. Suppose, I want to create a pattern with the following blocks- 

  • Cover Image Block
  • Button Block

So, at first, I need to add the Cover Image Block and finish all necessary customizations like setting up a cover image, text on the image, overlay color and opacity, etc. I have customized the block with a gradient overlay and got the following result- 

Cover Image Block

Secondly, I have added a Button Block and customized it as per needs. So, the final output of our test pattern is like the following shot-

Cover Image Block and Button Block

Copy Blocks

As we have successfully created the visual look of our custom block pattern using the Cover Image and Button Block, the next step is to copy the codes of the pattern. The JSON code structure is recommended. 

Moreover, simply select the blocks ( cover image and button ) and click on the vertical ellipse icons. Once you Right Click on the icons, you will find a pop-up screen that allows you to copy the blocks JSON codes. Simply copy the codes.

block pattern
Copy the Blocks

Register Custom Block Pattern

Now, we have to register a custom block pattern with our copied codes. WordPress provides the register_block_pattern function to register a new block pattern. The function is to be wrapped using an init Action hook. 

register_block_pattern function includes two parameters one is the name of the pattern and another is an array that includes the following keys- 

  • Title
  • Description 
  • Content
  • Category
  • Keywords
  • viewportWidth

To register our new block pattern, simply paste the following codes on your theme’s functions.php file.

<?php
function gbp_wp_block_patterns() {
register_block_pattern(
'block-pattern/custom-pattern',
array(
'title' => __( 'Gutenberg Block Patter', 'block-pattern' ),
'description' => _x( 'Pattern Description', 'block-pattern' ),
'content' => "<!-- wp:cover {\"url\":\"http://gutendev.local/wp-content/uploads/2020/12/ber-01-scaled.jpg\",\"id\":116,\"gradient\":\"midnight\"} --><div class=\"wp-block-cover has-background-dim has-background-gradient\" style=\"background-image:url(http://gutendev.local/wp-content/uploads/2020/12/ber-01-scaled.jpg)\"><span aria-hidden=\"true\" class=\"wp-block-cover__gradient-background has-midnight-gradient-background\"></span><div class=\"wp-block-cover__inner-container\"><!-- wp:paragraph {\"align\":\"center\",\"placeholder\":\"Write title…\",\"textColor\":\"background\",\"fontSize\":\"larger\"} --><p class=\"has-text-align-center has-background-color has-text-color has-larger-font-size\">Block Patter</p><!-- /wp:paragraph --></div></div><!-- /wp:cover --><!-- wp:buttons {\"align\":\"center\"} --><div class=\"wp-block-buttons aligncenter\"><!-- wp:button --><div class=\"wp-block-button\"><a class=\"wp-block-button__link\">Learn MORE</a></div><!-- /wp:button --></div><!-- /wp:buttons -->",
'categories' => array('header'),
)
);
}
add_action( 'init', 'gbp_wp_block_patterns' );

Important Note: the value of the Content key will be the JSON codes (that we have already copied) from the included blocks (Step 2). I have used the header category, you can also create a new category for your custom block pattern. 

Use the Block Pattern

Now your custom Gutenberg Block Pattern is completely ready to use. So, go to page or post and move to pattern area, you will find a new pattern named Gutenberg Block Pattern under the header category. 

Use Custom Block Pattern

You can read the official documentation on this topic from the official site.

Leave a Reply

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