Skip to main content

What They Are & How to Use Them

If you’re using the WordPress block editor (AKA Gutenberg), WordPress 5.5 brought a flexible new feature – WordPress block patterns.

In a nutshell, block patterns are basically pre-arranged collections of blocks that help you create more attractive designs and save time while doing so. All in all, they’re a pretty useful feature.

However, since WordPress block patterns are brand new in WordPress 5.5, you might not be sure how they work or how to benefit from them.

To help, we’re going to dig into everything related to block patterns. We’ll start by explaining what they are and some situations in which they can be useful. Then, we’ll show you step-by-step how to use WordPress block patterns on your site.

WordPress Block Patterns Explained in More Detail

As we mentioned above, block patterns are a pre-set arrangement of multiple blocks. You can think of them kind of like a section template.

Once you import a block pattern, you’ll be able to edit them just like you would any other block(s). For example, you could import a two-column block pattern layout for text. Then, all you need to do is add your own text and you’re finished.

The neat thing is that theme and plugin developers can add their own block patterns, which can be super useful.

For example, if you’re using a WordPress donation plugin, your donation plugin might add its own block patterns to help you create your fundraising pages. All you would need to do is import the block pattern for your base. Then, you could easily customize everything to fit your needs.

What’s the Difference Between Block Patterns and Reusable Blocks?

If you’re familiar with the block editor, you might be saying, “Hey, that sounds a lot like reusable blocks”.

Reusable blocks are a core feature that was already around before WordPress 5.5. So – what’s the difference between WordPress block patterns vs reusable blocks?

Reusable blocks are best used for global templates. The reusable block will be exactly the same in every instance where that reusable block appears. What’s more, if you edit the reusable block once, that change will propagate to every instance of the reusable block.

For example, you could create a reusable block for the opt-in that you add at the end of blog posts. Then, if you ever wanted to change the opt-in on all of your blog posts, you only need to edit the reusable block one time and that change would update on every single blog post where you included the reusable block.

Block patterns are not like that. Once you insert a block pattern in a post, they function just like regular blocks. Any changes that you make will only apply to that specific post – there’s no way to globally update them like you can with reusable blocks.

You can think of block patterns as just a jumping-off point for your customizations, rather than a “finished” template like a reusable block.

Summary:

  • Use reusable blocks if you want to reuse the exact same design on multiple pages (and be able to easily update that design in one spot and propagate those changes to all pages).
  • Use block patterns if you want to save some time while creating content that’s unique to the specific piece of content you’re working on.

Example Use Cases for WordPress Block Patterns

Now that you know what WordPress block patterns are, let’s talk about some of the ways in which you might want to use block patterns on your site.

Here are some examples:

  • Your “featured” section at the top of a blog post. For example, you could create a block pattern for your cover image, title, excerpt, etc.
  • A review summary box. You could create a block pattern for all the important elements and to include in your review posts.
  • Guest post credits. If you accept guest posts, you could use a block pattern to add those bylines.
  • …lots more! Come up with your own ideas.

How to Use WordPress Block Patterns

Now that you have the theory, let’s get into the “how-to” and we’ll show you how to start using block patterns on your site (and adding new ones).

Remember, block patterns are a new feature in WordPress 5.5, so you’ll only see block patterns if you’re using WordPress 5.5 or higher.

How to Insert Block Patterns

Block patterns are now part of the regular WordPress inserter interface. To open them, you’ll need to click the “plus” icon in the top-left corner. Then, go to the Patterns tab:

How to insert WordPress block patterns

Here, you can browse all of the available block patterns on your site. In the beginning, you’ll only have a few default options. However, depending on the plugins and theme that you’re using, you might see some extra options. Later on, I’ll also share how you can add new patterns.

The patterns are divided into different sections such as:

For each pattern, you’ll see a live preview, though it might look a little “off” since the pattern is compressed into a sidebar with a small width.

To insert a pattern, all you do is click on it. Then, it will appear in the editor. Below, you can see the “two columns of text” pattern:

Editing a pattern

How to Edit WordPress Block Patterns

Again, a block pattern is just a pre-set collection of individual blocks. So once you insert a block pattern, you can edit the individual blocks inside that pattern just as if you’d manually created the design from scratch:

Example of WordPress block pattern

How to Create Your Own Block Patterns

By default, you need to create block patterns using code (at least as of the initial WordPress 5.5 release). However, as is always the case with WordPress, you can find plugin solutions that let you save your own WordPress block patterns directly from the WordPress editor – no code required.

While I’m sure there will be multiple options here, I like the free Block Pattern Builder plugin from Justin Tadlock.

Once you install and activate the free plugin, you’ll get a new Add to Block Patterns option when you expand the menu for a block (or group of blocks):

Then, you’ll be able to give your custom block pattern a name and save it for easy reuse.

I think the most efficient way to do this is to create your custom block pattern inside of a Group block. Then, all you need to do is save that group block as a block pattern.

Once you save your block pattern, it will show up in the Uncategorized section of your block patterns:

If you want to edit it, you can go to the new Block Patterns area in your WordPress dashboard. You can also create a new block pattern directly from this area:

Managing your own WordPress block patterns

How to Add More Block Patterns Using Plugins

Another alternative to creating your own block patterns is to add to your collection of block patterns using third-party plugins. Some themes will also create their own block patterns, but I’m going to focus mostly on plugins here.

Many existing themes and plugins might eventually start adding their own block patterns. Remember those examples from earlier – if you use a WordPress donation plugin, the plugin might create a block pattern for a donation page. Or, if you’re using a WordPress online course plugin, you might get block patterns to help you create course content.

However, you can also find standalone plugins that add their own block patterns for more general purposes.

You can find these plugins by searching at WordPress.org. Or, you can check out our collection of block plugins for some good ideas to get started.

Get Started With WordPress Block Patterns Today

To sum up, WordPress block patterns are a useful new feature that gives you a pre-set jumping off point for your designs.

You can insert them right from the WordPress block editor. And, with a plugin like the free Block Pattern Builder plugin, you can also easily create your own block patterns using the block editor.

Do you have any questions about how block patterns work or how you can use them? Ask away in the comments!

Wp-dd.com

WordPress Design, WordPress Development, cPanel Hosting, Web Design, Web Development, Graphic Design, Mobile Development, Search Engine Optimization (SEO) and more.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.