How to Create Custom Block Pattern in WordPress Gutenberg Editor

Gutenbergkits
4 min readJun 10, 2021

--

Gutenberg Block Development

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 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-

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-

Gutenberg Block Pattern
Gutenberg Block Pattern

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-

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 block's JSON codes. Simply copy the codes.

Copy Blocks Content

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-

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

Sample Code

Codes will be different for you, so simply follow the steps and paste your own code.

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 the page or post and move to the pattern area, you will find a new pattern named Gutenberg Block Pattern under the header category.

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

Originally published at https://makegutenblock.com on June 10, 2021.

--

--

Gutenbergkits
Gutenbergkits

Written by Gutenbergkits

An excellent team of WordPress, Gutenberg and Shopify experts in development. Gutenbergkits offer Ultimate WordPress Solution and custom services. Hire Us

No responses yet