How to Create Custom Block Pattern in WordPress Gutenberg Editor
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-
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.
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.
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.
