WordPress Block Patterns: Complete Beginner's Guide

Wondering what WordPress block patterns are and why they matter?

With the WordPress block editor (AKA Gutenberg), you can build complex designs and layouts without needing to know how to code.

However, if you're not a designer, it can be tough to take advantage of that functionality because you just might not be sure how to put together a complete design.

Or, even if you do have excellent design skills, you might not want to take the time to design everything from scratch.

WordPress block patterns provide a solution to that pain point by letting you easily import premade designs into the editor. Once you import a pattern, you can customise everything about it, including editing the content and tweaking the colours and typography to match your site.

In this post, you're going to learn everything you need to know about WordPress block patterns:

• A more detailed look at what WordPress block patterns are. This includes details on the difference between block patterns vs reusable blocks, as that can be a bit confusing.
• Where to find WordPress block patterns and how to use them in your content.
• How to create your own WordPress block patterns without code.

What are WordPress Block Patterns? A more detailed look

A WordPress block pattern is a pre-made collection of one or more blocks. You can also think of "block patterns" as "importable templates".

You can find block patterns for complete page designs. Or, you can find block patterns for sections of a page.

For example, if you want to display your company's team members, you might find a block pattern for a team member listing section. Here's an example:

Once you insert a block pattern in the editor, it works just as if you'd created the design from scratch yourself.

You can edit each block, change the colour, swap the styles, and more. For example, if you imported the example block pattern above, you'd see that it's just a bunch of normal blocks in the editor:

Learning how to use block patterns has two main benefits:

1. You can save time while working in the editor because you don't need to create every design from scratch.
2. You can access new, high-quality designs from professional designers, which is great if you're not a designer yourself.

Newer block-enabled WordPress themes can also use block patterns as an alternative to theme demo content to help you set up your site.

WordPress Block Patterns vs Reusable Blocks

If you've been using the block editor for a while now, you might be familiar with one of its other features called reusable blocks.

Reusable blocks also let you save one or more blocks as a cohesive design that you can use later, which sounds a lot like block patterns.

So - what's the difference between WordPress block patterns vs reusable blocks? And when should you use each type of layout?

The key difference between block patterns and reusable blocks is what happens after you add them to your content.

With a block pattern, you typically use the design as a starting point. Once you import it, you'll customise it with the unique details for that post/page. If you import the block pattern in a different piece of content, it would end up having completely different content.

For example, if you post a regular interview series, you might create a block pattern for the basic layout of the interview. Then, you can edit the block pattern to add the unique content for each interview.

With a reusable block, it's totally different. Every single instance of that reusable block will be exactly the same. What's more, if you update the reusable block in one spot, those changes will automatically apply to every instance of the reusable block.

For example, you might have a call to action (CTA) that you display at the bottom of your blog posts. With a reusable block, you could make sure that CTA is the same for every blog post. You could also easily update the CTA in the future without needing to edit every single blog post.

Where to find WordPress Block Patterns (and how to use them)

There are three main ways to find WordPress block patterns:

1. You can use the official WordPress.org pattern library. Just like WordPress.org has directories for free plugins and themes, there's also now an official directory for free block patterns.
2. You can install a plugin that adds new block patterns. Many block plugins include their own template libraries, which can be a great way to access new and interesting block patterns.
3. Your theme might include its own block patterns. This won't be the case for many older themes, but new block-based themes will include lots of their own patterns to help you set up your site.

Let's go through how each method works…

1. Use Block Patterns from the WordPress.org Library

The easiest way to get started with block patterns is to use the official WordPress.org block pattern library.

When you go to the WordPress.org block pattern library, you'll be able to search by keyword or filter by various use cases:

Once you find a block pattern that you're interested in, you can click on it to view a larger preview and access the option to import it.

If you want to add the block pattern to your site, click on the Copy Pattern button to copy its code to your clipboard:

Then, go to your WordPress dashboard and open the editor for the post or page where you want to use the pattern.

Position your cursor where you want to add the block pattern then just paste it in like you would paste regular text. That is, you can either use Ctrl/Cmd + V or right-click and choose Paste.

You should then see the block pattern appear just like it looked in the preview:

Now, you can edit all of the content and styles just as if you'd created the design from scratch.

There's one important detail to note, though. If you imported a block pattern with an image, that image will load from an external server by default, which isn't ideal for performance and reliability.

To fix that, we recommend doing one of these two things:

1. Replace the image with one of your own images.
2. If you want to use the same image, download it to your computer and then upload it to your Media Library and use that version of the image in your design.

You can easily replace the image by selecting it and clicking the Replace option on the toolbar:

2. Install a plugin that adds new block patterns

If you want even more options for finding block patterns, you can also install a WordPress block plugin that includes its own pattern/template library.

The most popular example is the freemium Redux plugin, which includes its own library of 1,000+ patterns. Many of these patterns are 100% free, though some are only available to premium users.

You can also find other plugins that include their own patterns, so you might want to explore WordPress.org to see what's out there.

Here's how it works with Redux:

First, make sure to install and activate the free Redux plugin from WordPress.org.

Once you activate the plugin, you'll see a new Library option when working in the editor:

Clicking that button will open the Redux pattern library. You can use the options in the sidebar to filter the designs and then click on a pattern you like to see a larger preview:

To import a pattern, all you need to do is click on it. Then, you can edit it just as if you'd created it yourself:

As with importing patterns from the WordPress.org library, it's important to note that any images in your patterns will load from external sources. To fix that, you'll want to replace them with different images or upload the image file to your own Media Library.

3. Use your theme's block patterns

This last method won't apply to all WordPress themes. Most of the popular WordPress themes have not started offering their own block patterns yet, including Astra, GeneratePress, Neve, and others.

However, if you're using one of the newer block-enabled themes, your theme will likely include a lot of its own patterns to help you set up your site.

To access these patterns, open the editor and click the plus icon on the top toolbar to open the full block inserter.

Then, select the Patterns tab. You can use the drop-down to filter different patterns from your theme and insert a pattern by clicking on it:

You can also open the full pattern library by clicking the Explore button. This gives you an easier way to browse all of the patterns from your theme:

Once you insert the pattern, you can customise it just as if you'd created the design yourself.

Unlike the other methods, any images in your patterns will already load from your own server, so there's no need to re-upload them unless you want to change the image.

How to create WordPress Block Patterns without code

By default, there's no way to save your designs as your own block patterns. You can save your own designs as reusable blocks but, as we discussed above, reusable blocks and block patterns aren't quite the same thing.

Instead, the default way to create block patterns is using code. If you're a developer, you can check out the documentation to learn how to do that.

However, most regular WordPress users won't be able to go that route. Thankfully, there's a simpler solution!

With the free Blockmeister plugin, you can create your own designs using the block editor and then save them as block patterns just like you'd save them as reusable blocks. You can also use categories and tags to organise your block patterns.

To begin, install and activate the free Blockmeister plugin from WordPress.org. Then, follow these instructions to start creating your own patterns.

1. Save a design as a block pattern (or create one from scratch)

If you've already created a design that you want to save as a block pattern, you can get started by opening the editor for the page that contains that design.

Select all of the blocks that you want to include in the pattern. Then, click the "three dot" icon on the toolbar and choose Add to Block patterns:

This will open a popup where you can give the pattern a name. Click Create Pattern to save it:

You can also create new patterns from scratch by going to Block Patterns → Add New in your dashboard. This will open the same editor, but it's 100% dedicated to just the pattern:

2. Organise your block patterns

To organise your patterns, Blockmeister gives you two options:

• Categories
• Tags (called "keywords")

To organise a pattern, go to Block Patterns → All Patterns and edit the pattern that you want to organise:

Then, use the sidebar to add categories and keywords, just like you'd add categories and tags to a blog post:

Make sure to click Update to save your changes when you're done.

3. Insert block patterns in the editor

To use one of your custom block patterns, open the editor where you want to insert it and click the "plus" icon to open the full block inserter.

Then, go to the Patterns tab and use the drop-down to select the category that you created in Blockmeister.

You can then insert the pattern just by clicking on it:

Try out WordPress Block Patterns today

WordPress block patterns are a very useful tool to help you work more efficiently and access high-quality premade designs from professional designers.

Going forward, block patterns will continue to become an even larger part of WordPress, so it's important to understand how they work and how you can use them most effectively.

Give them a try today and you'll be a block pattern expert in no time!