WordPress Block Patterns: What They Are & How to Use Them

It was about a year ago that a client asked me to build a website with a ton of complex components and features, and I spent hours trying to create something that would wow them. Many cups of coffee and frustrated rants later, I did wow them, but I also wished that theme authors had an easier deal – a better way in which to build complex combinations of components without all of this frustration. In August 2020, the introduction of WordPress block patterns with release 5.5 made a world of difference to, I’m sure, the lives of all WordPress theme developers out there.

Block patterns, or block templates as they are also known, simplified the development of websites dramatically. They added a high level of intelligence to how a theme was built. And from a user’s perspective, a theme demo was no longer merely an unattainable design sample. Better yet, block patterns removed most of the major hurdles that were tied up with earlier options such as Widgets, Shortcodes, Page Templates, and Theme Options. Put simply, the path to better and easier website design was paved.

What Are WordPress Block Patterns?

Imagine a world where you had predefined, ready-to-insert WordPress block layouts. In this world, there’d be very little effort involved – perhaps just a few button clicks – to create complex layouts. And if you wanted to unleash your designing skills, you could go to the core of these layouts and do your own thing. Sounds like WordPress heaven? Well, this is what WordPress block patterns are all about! They are a way of grouping WordPress blocks together to form page elements with predefined settings.

At the heart of this concept is the idea that plugins and themes will be able to tap into pre-built blocks and sections with ease. So, rather than adding blocks individually to a page, you’d have access to an existing block library with a set of patterns or layouts that you can add to your posts and pages with just a few button clicks. This makes it possible to pre-set entire pages and themes, making even complex designs simple.

You will need to install and activate the Gutenberg plugin to start using block patterns. Since they are not as complex or advanced as custom blocks, they are way easier to use. You might find the existing WordPress block patterns a bit limited if you’re a WordPress pro, but the good news is that they are customizable.

What Are The Benefits Of Using WordPress Block Patterns?

The rave about WordPress block patterns has not yet subsided, so let’s cut to the chase by talking about the most pertinent benefits from a theme developer’s perspective.

You save a lot of time and frustration

If you’ve had the bitter experience of trying to replicate a stunning theme or create complex layouts on a site, block patterns will save you time and frustration. Their absolute ease of use lets you get the job done in a matter of minutes, rather than the several hours you would have otherwise spent.

Flexible and customizable

You no longer have to dive into actual code and hunt for sections to edit when structuring posts and pages. When you use block patterns, it becomes simple to delete or swap selected blocks within a pattern to get the layout you prefer. Positioning your layout is also simple and isn’t exactly rocket science.

Match theme demos easily

You get to easily build websites that look exactly like those stunning theme demos that you so desperately wanted to replicate. Every WordPress theme developer knows the heartache of finding what seemed to be the perfect theme, only to have it look like an absolute disaster after installation. Block patterns, on the other hand, make it possible for you to re-create a theme’s pages, just the way it looked in the theme demo. And all of this can easily be done from right within the WordPress block editor.

Custom block combinations simplify your life

You no longer need to custom-code anything to have a stunning site with complex components. Plugins and themes get to offer their own block patterns that can be applied throughout a website with absolute ease.

Layouts get retained

Remember the days when you lost your site’s entire layout on switching themes? Not anymore! WordPress block patterns save you a lot of time redoing your layouts when you switch themes because they stay intact even if the new theme doesn’t include the same patterns as the old one did.

Create your own block patterns

You get to create your own block patterns if you’re pro enough to go there. That’s the great part of block patterns – they are perfect for novices who want to get the job done easily, and they are also perfect for pros who like to get their fingers dirty and create their own custom block patterns. All that you need to do is use the editor to create your own patterns, copy the code and paste it into your theme or plugin code. It will then be replicated wherever you’d like to show those complex layouts.

Having gotten a glimpse of how they can benefit you, are you now eager to get started with WordPress block patterns? Well, let’s delve into how they actually work.

How WordPress Block Patterns Work

WordPress 5.5 came with a few block patterns already installed and ready to be used and can be styled using the Gutenberg controls. The sheer flexibility of block patterns makes them even better than a customizer. For example, the e-commerce block is perfect if you’d like to define sections for a store, while column blocks make creating service sections a breeze.

Block patterns work by bringing together a pre-arranged set of blocks to form a template. So you could say that they are templates that can be customized. If you’ve already been using blocks, you’ll find using patterns simple. The cool part about WordPress block patterns is that, although they are templates, they function as regular blocks once you insert them into your editor. Editing them is simple, and there’s no limit to the number of patterns or copies of the same pattern that you can place within a page or a post. 

Once you’ve added a pattern to the editor, WordPress views it as an individual block that you can then move around and position wherever you wish it to be. If you’re a WordPress design pro, you can combine block patterns with additional CSS classes, custom block styles, and variations to create several sections that can be used throughout your theme.

While there is still a long way to go for WordPress block patterns to be perfected, it will eventually be a fully integrated interface that lets you insert a pattern into your post or page with just a click or two. This will be the ultimate end to having to deal with shortcodes and complicated theme options.

WordPress Block Patterns vs Page Builders

If you’ve been a frequent user of page builders (and there are tons out there), you might be wondering how block patterns differ from page builders. Admittedly, page builders also have pre-set design templates for specific website theme applications. However, WordPress block patterns address some serious drawbacks that come with using page builders.

Compatibility

While page builders might be useful, there is no guarantee that they will always be forward-compatible with future WordPress versions. Additionally, if the author of the page builder stops supporting the plugin you’re using, you may end up with a bunch of shortcodes on your site, which doesn’t work. WordPress block patterns, on the other hand, work seamlessly with the existing editor and will always be compatible with future releases.

Speed

Page builders can make your site notoriously slow because of the many scripts, style sheets, and fonts that come packaged with them. They try to be an all-in-one solution, but in reality, inject many scripts (bloat) that may never be used into your site. A slow site can impact SEO and drive away traffic. On the contrary, block patterns are light, reuse code, and don’t use unnecessary scripts.

Theme Upgrades

When you use page builders, it can be quite hard to move to another theme because all your earlier settings will eventually be lost. Taking a backup of your page builder code and moving it to a fresh theme can be tough work. Block patterns retain your content and layout even if you switch themes, although they may look slightly different from your new theme.

End-User Flexibility

While page builders may give you a nice-looking website, they can be quite tough for end-users to figure out. Not everyone can find them easy to use and many would not want to learn or use any type of code to work with their site. WordPress block patterns remove this hassle for end-users with a clickable interface ease of use.

To summarize, while page builders are great if you’re looking for pre-set templates and components, they can slow down your site and are not all that flexible. Block patterns make up for where page builders fall short.  

How To Use WordPress Block Patterns 

Are you ready to start using block patterns? In this section, I’ll explain how you can insert a simple block pattern, edit it and create your own patterns once you become more comfortable with it. 

While you don’t have to be great at code to use block patterns, you do need to have a basic idea of the WordPress editor. And of course, you will need to have WordPress 5.5 or higher installed. 

Inserting Block Patterns

Navigate to your WordPress editor, click the plus (+) icon at the top left corner.

Choose the Patterns tab to browse through the patterns that are already part of your site, which will vary based on the theme you’re using and any active plugins.

Available patterns are divided into sections by type. You’ll be able to see a small preview of each pattern before clicking on it to insert it into the editor.

In the example below, I’ve chosen the Two columns of text with images pattern.

 

Editing WordPress Block Patterns

Click on a WordPress block pattern to edit it.

You may edit the text within a pattern, typography, color settings, the image or add any advanced CSS classes that you may want to apply to it.

Creating Your Own Block Patterns

Usually, creating your own block patterns requires knowledge of code (HTML and PHP). You can create your own patterns by using the WordPress Block Pattern API. The next step would be to use the register_block_pattern function to register the new pattern with your functions.php file or a custom plugin.

To create your own block pattern, you need these to set these properties:

1. title (mandatory) – A readable title for the pattern.
2. content (mandatory) – The raw HTML code that makes up the pattern.
3. description – Describes what the patterns do. The description is usually visually hidden.
4. categories – Used to group block patterns. A single pattern may be included in more than one category.
5. keywords – Aliases that help users find the pattern with a simple search.
6. viewportwidth – The width of the pattern in the inserter.

Now that we have the basics in place, let’s start creating a custom WordPress pattern plugin.

1. Create a Draft post

 

2. Add blocks that you’d need for your pattern.

For this example, I’ve added a cover, a quote, and some text.

3. Select and copy all the blocks that you’d like to add to your new pattern.

Hint: Click the three vertical dots to get to the Copy option.

 

4. Use a JSON Escape/Unescape tool such as CodeBeautify to escape the HTML output of the blocks you’ve just copied.

Paste what you have copied into the Enter the String box and hit the Escape button.

5. Copy the code that appears in The Result String box.

You can now choose where you’d like to register your block pattern – as a custom plugin or in your theme’s functions.php file. I’d suggest that you register your pattern as a custom plugin so that it is accessible irrespective of your theme.

6. Go to your website’s File Manager (either via cPanel or FTP) and navigate to your site/wp-content/plugins.

Create a new folder with the name of your custom plugin. I’ve named my plugin “pattern-to-follow”. I created a new file, plugin.php within this folder.

 

7. Edit your plugin.php file and register your new block pattern code.

Here’s how I did it:

 

The content property contains the escaped HTML code I had copied earlier from the JSON Escape/Unescape tool.

Save the plugin.php file.

8. Return to your WordPress dashboard, navigate to Plugins and you’ll find your newly-created plugin among Inactive plugins.

9. Activate your plugin.
10.  Create a new post, go to the Patterns tab and you’ll find your plugin listed in the category you’ve earlier specified. In my case, I didn’t specify a category and my plugin was obviously Uncategorized. Here it is:

 

Clicking the pattern added it to my post!

I can now use my pattern across any theme of my choice since I registered it with a custom plugin.

Adding More Block Patterns Using Plugins

If you don’t want the hassle of dealing with code to create your own WordPress block patterns, you can always use plugins to add more.

You’ll find several such plugins when you search at WordPress.org. A few great plugins for block patterns include Guteblock, Ultimate Blocks, Qubely, Stackable, Toolset Blocks, Getwid, and Advanced Gutenberg Blocks.

More WordPress Block Patterns Resources

You can find more block patterns at the Gutenberg Hub Patterns Library if you’re not ready to start creating your own patterns yet. There are some cool templates and pre-made layouts that you’ll still need to register before using, but it definitely beats coming up with something entirely on your own.

Justin Tadlock’s Block Pattern Builder Plugin is another cool resource I’d definitely recommend. This plugin lets you create your own block patterns without coding, directly from the editor. Select the blocks you’d like to create a pattern out of, and choose the Add to Block Patterns option to create a custom block. It’s that simple!

Get Started With WordPress Block Patterns Today

Personally, I’m excited about what WordPress block patterns bring to the world of site design. Patterns are absolutely simple and easy to manage. And in the near future, agencies and freelancers will be able to make hi-fidelity mockups a breeze with pre-made patterns.

As you can see, block patterns save a lot of time and frustration. You don’t have to create everything from scratch and you can make your own templates that can be used whenever you need them. Using those takes just a few button clicks and you have an awesome, professional, modern-looking site super fast.

If coding isn’t your cup of tea, you can use a plugin to access a whole world of block patterns to create a stunning site!