Skip to main content
Easily create better & faster websites with the Total WordPress Theme Learn More
(opens a new tab)
Tips

Ultimate Guide to WordPress Block Patterns

What are WordPress Block Patterns?

Do you hear a lot about WordPress block patterns but you don’t know exactly what their purpose is? You are in the right place!

In this post, we will not only explain what WordPress block patterns are, but we will also teach you how to use them on your website, how to create your own custom patterns, and where to find ready-made WordPress block patterns online.

So, if you’re a WordPress site owner and want to make the most of your online presence, read on to learn everything you need to know about this cool feature WordPress has in store for you – aka block patterns.

What are Gutenberg Block Patterns?

WordPress block patterns (or Gutenberg Block Patterns) are template layouts made with Gutenberg blocks. You can create your own new patterns or use ones available in the Block Pattern Directory. They are a quick way to get started when designing new pages on your website.

WordPress block patterns have been available to users since the launch of the block editor. But WordPress 6.0 in particular released with a focus on patterns, which became one of the main tools for building designs and templates in WordPress. This WordPress version puts patterns in the spotlight rather than individual blocks.

With WordPress block patterns, you can build either full templates for your pages or just parts of a template that you can use as sections on your site. A complete design can be created from as many block patterns as you see fit for your needs.

Once you create or customize a WordPress pattern, you can save it to your library and reuse it any time you want in pages or blog posts.

Why Are Block Patterns Useful?

WordPress block patterns are useful for several reasons:

  • Any website owner who does not have the technical skills to build designs from scratch can now make their website look awesome via block patterns. With this feature, you can actually design your pages, sections, and posts by yourself without too much effort.
  • Block patterns are reusable and flexible. You can create and recreate lots of templates out of your saved block patterns. For example, you can save the same block pattern in many different variations (e.g. in different colors or typography). It’s up to you how you customize each block pattern.
  • You can also create many different block combinations that you can simply reuse in the future for different projects or campaigns. This is great in the long term because you save time and avoid repetitive work.

How to Use WordPress Block Patterns

Feeling enthusiastic about decorating your WordPress website with beautiful pages and templates? Let’s see how you can use the WordPress block patterns exactly.

Go to the page or post where you want to include a pattern. Once there, click on the + icon at the top left of the WordPress block editor.

Gutenberg + icon WP

When the menu drops down, select Patterns. You can also choose a category of patterns that would be more relevant to your needs. Click on the Explore button to open the patterns in a bigger window.

wp block patterns drop down

After browsing through the collection of patterns, click on the pattern that you like to insert in the post or page. Just be aware that some block patterns will require you to install additional free plugins (which you may or may not want to do), so read

Once it’s inserted in the block editor, you can start customizing it. To customize a block pattern, you have to actually customize each separate block that the pattern contains. So you just need to click on every block in that pattern and customize it individually.

If you don’t like a specific block, you can always replace it with another one – be it a custom block or one that’s already existing in the library.

customizing block patterns

And that’s it. When you’re done customizing each block, your pattern is ready to go live. It’s that easy!

Where to Find Ready Made WordPress Block Patterns

As you have probably already noticed from the previous section, WordPress does come with ready made block patterns for you to use freely on your website. If you don’t feel creative enough or you just need some inspiration for your future designs, you will find a lot of ready made block patterns in the official WordPress Block Pattern Directory.

Here, you’ll discover an impressive collection of patterns that fall under several categories: Buttons, Columns, Gallery, Header, Images, Text, and Featured. In total, the WordPress directory alone offers 1900+ cool block patterns for public use.

WordPress Block Pattern Library

Take your time to check out the available patterns so you can find the most beautiful designs for your website. So yes, it might take a while until you find the right ones for you since there are so many options to choose from.

How to Use Block Patterns

There are two ways to add a block pattern to your posts and pages. Either from Gutenberg or from WordPress.org. I will explain how to use both methods.

Insert Block Patterns within Gutenberg

Inserting WordPress Patterns with Gutenberg

The easiest way to utilize patterns is from the editor itself. When creating content with Gutenberg, just click the Plus + icon and then click on the Patterns tab. From here you can look through available block patterns. Then click to insert a pattern. That’s it!

Copy & Use Patterns from the Pattern Directory

Alternatively you can browse and copy patterns from the WordPress.org Pattern Directory. When you find a pattern that you would like to use, click on it to open it on a new page, then click Copy Pattern.

Copy Pattern from WordPress.org Pattern Directory

Next, go back to your initial post or page in your WordPress dashboard, where you wanted to add the pattern, right click in the block editor, and paste.

Again, pretty easy to add a WordPress block pattern to your WordPress website! It requires only a few clicks.

Note: If after adding a pattern to your page you see blocks that contain “unexpected or invalid content”, just click on the Attempt Block Recovery button to get it fixed.

Here you go! You have just copied a WordPress block pattern to your WordPress website. You can go ahead and customize it to your liking!

How to Create Your Own Block Patterns

So far, you’ve learned how to use the WordPress block patterns that are available by default. Still, you can create your own patterns if you need something very specific or special that is not available in the library. In this section, we are going to show you how to create your own block patterns without code.

Create Block Patterns with Gutenberg

If you want to create your own patterns with Gutenberg it’s surprisingly easy. In fact, you can create your own patterns right in the WordPress editor as you build your content.

To get started, create your new post or page and build a layout with Gutenberg. Then select the block(s) you want to save as a pattern. In our example below, we’ve created a Group that we want to save.

Create a Pattern from Group

Click on the three dots icon and then on the Create Pattern option.

Modal Window options when creating a new pattern

You should see a pop-up window where you can name your pattern, add it to a pattern category and enable/disable the Synced option. When a pattern is synched all the instances where you insert the pattern will be connected, so if you update the pattern in the future all of the instances will be updates.

After you click Create your pattern will be published.

You’ll see all your custom patterns in Patterns > My Patterns.

The next step is to go back to the post or page where you want to insert the block pattern, click on the + icon > Patterns, and search for your pattern (aka the name you gave your pattern when you built it). Your pattern should show up there, in the library.

Editor Patterns section

If you ever need or want to update your pattern, you can from your main WordPress Dashboard > Appearance > Editor > Patterns > My Patterns. From here select the pattern to edit, make your changes and save.

If your pattern is Synched then every place on your website you’ve inserted the pattern will be updated. If your pattern is not synched, then the changes you’ve made to your pattern will only be seen going forward.

Create WordPress Block Patterns via the WordPress Directory

Want to create or share a block pattern with other WordPress users? Submit it to the main directory! Go to WordPress.org > Extend > Patterns > Create a new pattern. You need to be logged in in order to create a pattern. So make sure to create an account if you don’t have one.

Add a New Pattern to the Pattern Directory

Next, you’ll see a blank page of the block editor where you can add new blocks and create patterns just as you would do via your WordPress dashboard.

Here, you can type the name of the blocks you want to insert. E.g. Paragraph, Verse, Image, Cover, Heading, Columns, Media & Text, etc. You can also add blocks using the + icon in the top left corner (just like via your WordPress dashboard).

If you want to use images, you can either select them from the default gallery or upload your own images. Once you’ve inserted all the blocks, customized them, and created the final version of the pattern, you can do either of these two things:

  • Submit your pattern to the WordPress.org directory.
  • Save your custom pattern for personal use.

Submit the Pattern to the WP Directory

Submitting your pattern to the WordPress directory will allow for users to use your pattern. I think everyone should be doing this so that the directory can grow and become better. To submit your pattern simply click on the submit button on the top right after creating it.

submit pattern

Give your pattern a name, a description, pick a category for it, and click Finish. Keep in mind that your pattern will be reviewed by the WordPress core team and published to the directory. This means that other people will be able to use it on their websites.

Save Your Pattern as a Draft

If you want to keep the pattern just for yourself (without making it public), just save it as a draft. Every time you want to use your drafter patterns simply log into WordPress.org and go to My Patterns. On this page you will be able to view all your drafted patterns.

my patterns

Conclusion

This wraps up our tutorial on WordPress block patterns. As you probably noticed while reading this article, using and customizing block patterns is not complicated at all. Even creating your own patterns requires only a few dead simple steps.

Apart from being easy to manage, WordPress block patterns are particularly useful because, even if you are a beginner, you have the opportunity to create your own templates, customize them how many times you want, and reuse them anywhere on your site.

What do you think about WordPress block patterns? Do you find them useful for your website? Let us know via the comments section.

2 Comments
  1. David Innes · 2 years ago

    Wait! Are you saying the only way users can create their own block patterns without code is through the shared WP repository or else through a 3rd-party plugin? That can’t be right. Even incredibly old-school page builders like WPBakery and Divi, let alone modern ones like Beaver Builder or Elementor let you save (and export and import) rows, columns, and individual modules for reuse. Since the general idea of saving pre-build “chunks” of complex content has been around long before the Gutenberg project why would core WP make it easier to do likewise?

    • Kyla · 2 years ago

      I believe Automattic’s long term goal is to have Gutenberg on par with Elementor/WPBakery/Divi eventually – but it’s just not there yet. To my knowledge you have to use their pattern builder or a third party plugin (or register patterns if you can code) which I agree is not very convenient, but hey at least it’s possible to reuse patterns now!

Leave a Reply

Your email address will not be published. Required fields are marked *

Learn how your comment data is processed by viewing our privacy policy here.