Gutenberg Block Patterns can revolutionize the way you use Block Editor, it can make site-building and designing much less tedious. If you are not using it till now I am pretty sure you’ll gonna use it regularly after reading this article so let’s begin.
If you are a WordPress user I am pretty sure by now you’re familiar with Gutenberg Block Editor and know about the concept of Blocks. But are you familiar with Block Patterns? It is often being ignored by many users but it’s one of the key reasons why Gutenberg is so great. With the help of Block Patterns, you have a superpower to design something once and use it across the site or better on any website made on WordPress.
In this article we are going to know all about Gutenberg Block Patterns, what are they? How to use them? How do they work? and some additional resources to use it at fullest.
Table of Contents
What are Gutenberg Block Patterns?
So the first thing first What is exactly are these Block Patterns? It may sound new to you but actually, I am pretty sure you are already familiar with its base concept. If you have used page builders like Elementor you have used their templates feature, patterns are basically the same.
Plainly Gutenberg Block Patterns are premade, ready-to-use layouts for WordPress made out of Gutenberg Blocks. Basically, multiple blocks are saved together and you can use them anywhere across the website. Once you save a pattern it will be used anywhere in few simple clicks.
Let’s understand it with an example:
The image you are seeing above with a heading, paragraph, an action button, and a background considers it as a section of your site that you occasionally use on some of your posts for donation. Now to add this into your post traditionally you have to add a column block then heading, paragraph, button then style them. But with Block Patterns, you can add that section anywhere on your website without having to add individual content one by one.
Now if any of you are familiar with the Reusable Blocks then this concept may sound similar to you because they are somewhat similar but there is a big difference between both of them and later in this article, we will understand in detail how these two are different.
How to Use Gutenberg Block Patterns?
Now let’s take a look at how we can use Gutenberg Block Patterns on our website. There are a couple of different ways how you can use Block Patterns on your website. Let’s know about them one by one.
1. From Block Editor
The first way to use them is to browse for your desired pattern in Block Editor.
- Just open your Block Editor for page/post.
- Click on the plus icon from the top left.
- Then select the patterns from the left side menu.
- Now select the pattern type from the drop-down.
- Select the pattern you want to add.
- The pattern will be added to your page and you can edit individual blocks of that pattern.
- Now edit the rest of the page as you do normally and publish it.
In WordPress Block Editor very few patterns are served, you need to add plugins to have more patterns in your library.
2. Via Copy & Paste
Another way of adding Gutenberg Block Patterns is by straight-up pasting the code in Block Editor.
- First copy the pattern from WordPress pattern library or any other third-party website.
- Go to your Block Editor click on the place you want to add that pattern.
- Now hit Ctrl+V on the keyboard or right-click on mouse and select paste.
- Your pattern will be added to the page automatically.
- And you can edit patterns and blocks like normal.
Note: While copying patterns from other websites always cross-check all the links in the button. Also, if the patterns have any media replace it with your own media file from the library else media will be loaded from their website or might not even load.
How Gutenberg Block Patterns Works?
Now let’s try to understand how Gutenberg Block Patterns actually works. When you convert a group of blocks into a pattern WordPress creates some text in a sort of HTML format as you can see below. These texts contents all the data and styling of a pattern and when you paste this in Block Editor it converts these texts into a pattern just like HTML.
These codes are for the pattern we have shown you above in the example.
</pre>
<!-- wp:group {"align":"full","style":{"spacing":{"padding":{"top":"4em","right":"3em","bottom":"3em","left":"3em"}}},"backgroundColor":"black","textColor":"white"} -->
<div class="wp-block-group alignfull has-white-color has-black-background-color has-text-color has-background" style="padding-top:4em;padding-right:3em;padding-bottom:3em;padding-left:3em"><!-- wp:columns {"align":"full"} -->
<div class="wp-block-columns alignfull"><!-- wp:column {"width":"66.66%"} -->
<div class="wp-block-column" style="flex-basis:66.66%"><!-- wp:heading {"textAlign":"left","style":{"typography":{"lineHeight":"1"}}} -->
<h2 class="has-text-align-left" style="line-height:1">Become A Monthly Patron</h2>
<!-- /wp:heading -->
<!-- wp:paragraph {"style":{"typography":{"lineHeight":"1.5"}},"textColor":"white"} -->
<p class="has-white-color has-text-color" style="line-height:1.5">Our organization relies on regular donations to continue our support of the artistic community in the form of grants, classes, and special events.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->
<!-- wp:column {"verticalAlignment":"center","width":"33.33%"} -->
<div class="wp-block-column is-vertically-aligned-center" style="flex-basis:33.33%"><!-- wp:buttons {"contentJustification":"center"} -->
<div class="wp-block-buttons is-content-justification-center"><!-- wp:button {"backgroundColor":"white","textColor":"black"} -->
<div class="wp-block-button"><a class="wp-block-button__link has-black-color has-white-background-color has-text-color has-background">Join now →</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons --></div>
<!-- /wp:column --></div>
<!-- /wp:columns --></div>
<!-- /wp:group -->
<pre>
If you are familiar with coding then you can edit the text and get the desired output as you want. To edit the text you need to paste the text in some text editor you can’t directly edit the code in Block Editor.
Gutenberg Block Patterns vs Reusable Blocks
One thing you may have noticed is a lot of functionality of Block Patterns are the same as Reusable Blocks. But they are fundamentally a lot different from each other. They may give the same results but core functionality is a lot more different.
One of the major differences between both is editing. When you add Block Pattern in your post/page and edit that pattern, only that pattern will be affected and if you re-use that pattern again in some post/page it will be the same as before. On the other hand, if you add a reusable block in your post/page and edit it, that edit will affect all the other posts/pages where you have used that reusable block.
Another difference in them is you can export block patterns and use them on other websites but the reusable blocks can only be used in a website it is created.
How to Create Block Patterns?
It’s good we can use block patterns from the WordPress library and from other third-party libraries but what if you want to make your own block patterns? So let’s see how we can create our own block patterns.
If you are a developer and want to code block patterns you should visit this official documentation for Block Patterns. We are going to focus on the non-code way.
There are three different major plugins that you can use to make block patterns, all three of them have different types of features and different ways of working so let’s look at them one by one.
1. Block Pattern Builder
With Block Pattern Builder you can create a new Block Pattern without using any code. You can make a new pattern like you create a new post or page.
- To add a new pattern go to plugin store search for Block Pattern Builder install and activate it.
- After installation, you’ll see a new Block Patterns menu in your dashboard, click on it.
- Then click on add new block.
- Edit it using Block Editor, it will look the same as any page of your site.
- Hit publish to save it and now you should be able to use it in your posts/pages.
2. Reusable Blocks Extended
Reusable Blocks Extended is also a very good plugin, however, it uses a different approach to make block patterns. With this plugin, you can convert your reusable blocks into block patterns.
- Install and Activate this plugin.
- In your dashboard, you’ll see a new Blocks tab click on it.
- You’ll see the list of reusable blocks just click on convert to block patterns to convert it.
3. CoBlocks
CoBlocks is a fairly new plugin and very useful too, to make a pattern using this plugin follow the following steps.
- Go to your Block Editor and make create a Block Design and group it.
- Now click on the three-dot menu and select Add design pattern.
- Now add a name for your pattern, add a description, choose a category, and hit Save pattern.
- Now you should be able to use your design as a pattern.
Resources
Here are some resources that can be helpful for you.
- WordPress official Pattern Directory: This is an official WordPress website where you can get free block patterns.
- Gutenberg Hub: On this website, you can get free block patterns and blocks.
- ShareAblock: On this website, you can share your patterns and also download patterns of other users too.
- Gutenberg Template Library Plugin: This plugin offers a wide variety of patterns and is one of the most popular plugins for templates.
- Otter Plugin: Otter is another popular plugin for getting block patterns.
Common Questions
Now let’s look at some common questions which you might have.
- Can themes affect Block Patterns?
No, block patterns are theme independent they won’t get affected by theme change. - Can we use patterns as Reusable Blocks?
Yes, you can save patterns as reusable blocks. - How to use Block Patterns in other websites?
It’s very easy just copy your block pattern and directly paste it in your block editor, no extra steps are required.
Conclusion
Now you should be able to use and create new amazing block patterns and can save a lot of your time. Do share your thoughts and suggestions about Gutenberg Block Patterns in the comments below. If you are new to Gutenberg I highly recommend you to check out our Definitive Guide on Gutenberg and other articles on this topic.
