WordPress block patterns were introduced with the release of WordPress 5.5, and they can be used to quickly create gorgeous pages and WordPress websites. You can browse the pattern directory to see all of the Gutenberg block layouts that will be included with WordPress 5.8. This blog will show you how to make your own Gutenberg block patterns and reuse them.
With the latest version of Gutenberg, you can now develop your WordPress block pattern to make building website pages easier. A Gutenberg block layout is a set of blocks arranged in a specific pattern. It can take a long time to build an entire page or WordPress website from scratch, but if you can create a block pattern once and use it multiple times, it will be much easier and faster to build any web page.
How Block Patterns Can Level Up Your Page Building Experience
With the WordPress 5.8 version, you can create and register custom block patterns to reuse them in multiple WordPress websites. Before you get started, let’s explore all the best use cases for Gutenberg block layouts that you might need.
👉 More Design Flexibility While Customizing
As mentioned earlier, WordPress block patterns are just a collection of blocks in a certain layout or design. You can edit or alter the pre-defined block layout because all the blocks will work just as regular Gutenberg blocks. Because of block layout, you will have access to multiple block layouts that you need to insert. As you have chosen a certain WordPress block pattern, you can change the appearance of the block from the Gutenberg editor and change the entire look.
👉 Faster Way To Design Web Pages In Gutenberg
WordPress block pattern has made it easier for web designers to insert a certain Gutenberg block layout. You can add blocks to each of WordPress website themes and save them for later. For example, if you are using any simple and lightweight WordPress theme for your WordPress website, you can create a block library for it. Every time you use Flexia on your WordPress website, you will have access to all the prebuilt Gutenberg block layouts that you have created for Flexia. Thus your web page building will become faster and smoother.
👉 Reuse Block Pattern In Different WordPress Websites
The most amazing part of creating block patterns is that you can reuse Gutenberg block layouts as much as you want. If you already have Gutenberg block layouts, you don’t need to start from scratch when creating a page or a WordPress site.
For instance, you need to use a ‘Call To Action’ button on every page. If you already have a saved WordPress block pattern, you can simply insert it and adjust it as desired. As a result, you won’t have to develop a new block layout every time because Gutenberg block layouts are reusable.
👉 Custom Block Styles For Different Themes
WordPress allows you to choose from a variety of themes for your WordPress website. It is now possible to create several sorts of Gutenberg block layouts for each of the themes. For instance, suppose you wish to make a WordPress website with the Twenty-Twenty One theme. You can make a custom block pattern that will only work with this theme. This simple yet useful facility will inspire you to become more creative.
How To Build WordPress Block Patterns In Gutenberg : Step By Step Guideline
Custom block patterns can help you reapply a custom section or block in different themes when creating a WordPress website. By creating a Gutenberg block layout, you can create a template but WordPress views it as a collection of blocks. Let’s find out all the easy steps of creating custom WordPress block patterns in Gutenberg and how you can reuse them.
Step 1: Create A Post Or Page In Gutenberg
First, you need to create a post using different blocks in a certain Gutenberg block layout. As it’s really hard to read a text without any visual content, you can picture a gallery if you want. Besides media content, you can also embed other social media accounts too. We have inserted ‘Header’, ‘Paragraph’ and ‘Gallery’ blocks to create a simple Gutenberg block layout for this blog.
Step 2: Copy Block Content In Theme’s Function.php File
In this step, you must first retrieve the content code and then use it in the theme’s file by following certain basic steps. Flexia is a lightweight and basic theme that we used for this post. Click on the three dots from the right side and select the ‘Code Editor’ option.
The code for your content page will show once you click on the code editor. We’ll need this code to make our WordPress block pattern. By hitting the Ctrl+C keys, you can now copy the code.
Next, you need to format the file from JSON Encoder. Go to this link and paste your code. Simply click on the ‘Escape’ button to encode it. Copy the encoded single-lined code from the right side.
Step 3: Register The WordPress Block Pattern
You may now register your Gutenberg block layout in the functions.php file of your theme. Go to your WordPress dashboard and click on Appearance → Theme Editor and paste this code. Next, you can go to the ‘Theme Functions’ option and find the theme PHP file.
Step 4: Change WordPress Blog Pattern Code Information
You can scroll down and paste the below code. You can give any function name, slug, title, text domain, etc as you like. You need to use the same function name to successfully run the code.
function function_name() {
register_block_pattern(
'slug',
array(
'title' => __( 'Your Title', 'text-domain' ),
'description' => _x( 'Your Description.', 'Block pattern description', 'text-domain' ),
'content' => "",
)
);
}
add_action( 'init', 'function_name' );
In the ‘content’ section, paste the encoded code of your content and click on ‘Update File’.
Step 5: Insert New WordPress Block Pattern
Then, on the Gutenberg page, look for a new pattern. The ‘Uncategorized‘ option can be found by clicking on the ‘Pattern’ tab. Your newly designed Gutenberg block layout will be stored successfully.
Click on the new WordPress block pattern and simply insert it in your Gutenberg editor.
Bonus: How To Use WordPress Pattern Directory In Gutenberg
Now you know how to create your WordPress block patterns. But if you want to use existing patterns by others you can do that as well in Gutenberg. When you head over to the pattern directory in the WordPress repository, you can click on any pattern you like and simply copy the pattern as shown below.
Afterward, all you have to do is paste the pattern in your Gutenberg editor. If you want you can make some changes to it according to your preferences as well.
Create Your Own WordPress Block Pattern Today
As you have seen, WordPress block patterns are simple to create. You can easily manage blocks for your WordPress website. This simple yet highly useful feature by Gutenberg has introduced us to become more creative in terms of WordPress website or page building.
Did you enjoy reading this blog? To find more tutorial blogs like this, subscribe to our blog and share your experience with us. Join our Facebook group to learn more about web design and development.
