The Complete Guide of Gutenberg Block Patterns (III)

This is the third and final part of the complete guide on block patterns that includes the following topics:

1. Introduction to block patterns
2. Insert a pattern on a page
3. Pre-defined patterns and others available in directories
4. Add patterns available in directories to your site
5. How to create a pattern from scratch
6. How to create a pattern if you are not a developer
7. How to turn reusable blocks into block patterns
8. Themes using block patterns
9. Official documentation.

In the first part we saw the first 4 points of all the topics covered in the guide: what is a block pattern, how to insert pre-defined patterns in your pages and where to find and how to copy patterns that are available in some directories. In the second part we saw point 5 in detail: how we can create a pattern from scratch using code. And in this last post, we’ll look at the last 4 points: how we can create a pattern without being a developer, how we can convert reusable blocks into block patterns, what themes use block patterns and, finally, where you can find official documentation about patterns.

6. How To Create a Pattern If You Are Not a Developer

Although we already saw in the previous post the steps you had to follow to create a pattern with code, at this point we will see that you can create patterns without being a developer. And yes, we will do it with a plugin. In fact, there is more than one plugin for creating patterns:

• Block Patter Builder by Justin Tadlock,
• BlockMeister – Block Patter Builder by BlockMeister,
• Page Builder Gutenberg Blocks – CoBlocks by GoDaddy

All three work in a similar fashion, with some minor differences. After installing any of them, new options appear in the WordPress administration menu so that you can create a new pattern and manage the list of patterns created.

In the case of the Block Patterns Builder plugin (i.e. the image on the left), the Block Patterns menu appears has two options: one to create a new pattern and another one to list and edit existing patterns. In the case of the BlockMeister plugin (depicted in the middle image), it also adds a third option to manage the categories of the patterns. And in the case of CoBlock (shown in the last image), its menu appears under Appearance.

In all three plugins, creating a new pattern opens the same editor you use to edit any page or post. Just give the pattern a name and define the blocks you want it to have. When your pattern is ready, just save it.

The previous screenshot shows the block pattern editor as provided by the BlockMeister plugin. As you can see, it offers a bunch of additional properties in the right sidebar: name, slug, description, width of the pattern and categories. The Justin Tadlock plugin, on the other hand, does not allow you to add the category. And CoBlocks also allows you to add the additional properties of patterns.

With any of the three plugins, after saving your pattern, it will become available by clicking the + button in the post and page editor so that you can insert it when you need it.

As you can see, it is very easy to create the patterns you want to have available in your page designs, provided that you’re using the right plugin for it.

Nelio A/B Testing

I was very impressed by the quality of this plugin, how easy it was to set up, and the outstanding support Nelio provides. I highly recommend Nelio A/B Testing.

Josette Millar

WordPress.org

View Plans

7. How To Turn Reusable Blocks Into Block Patterns

If you have been using Gutenberg for some time and you’ve been designing pages with it, I bet you’ve also created some reusable blocks to replicate a certain design on multiple pages. At least I did! I remember that the first time I heard about patterns, I thought they were pretty much the same as reusable blocks… but they aren’t: there are some relevant differences between the two concepts.

A reusable block is a block (or group of blocks) that can be inserted on different pages, its content being the same on all of them. That is, if you modify it later, all its instances should be updated. Therefore, if you want a reusable block to be different from the rest, you must convert it to a normal block first.

A block pattern, on the other hand, is designed to be customized – it serves as a basic design that you’re supposed to tweak after inserting it. The options are unlimited, of course. The idea of the pattern is to provide a starting point on how you can combine blocks to make them look attractive.

If you had created reusable blocks with the idea of converting them to normal blocks and then customizing them conveniently, it makes more sense to convert these blocks into block patterns. How can we do this?

The Reusable Block Extended plugin from JB Audras provides us with this functionality. Let’s see how we do it.

After installing the plugin, a menu option will appear to manage the reusable blocks. If you click on All Reusable Blocks you’ll see the list of the blocks you have defined.

As you can see in the image above, the list of reusable blocks shows two blocks and, for each one of them, it tells you where they are being used, the shortcode and the PHP function so you can use them, and a button so you can convert it to a block pattern.

After clicking the Convert to block pattern button, the pattern will have been created for you and will be available in your editor in the Converted from reusable blocks category.

8. Themes Using Block Patterns

At the time of this writing, there are already 14 themes with custom block patterns in the WordPress.org theme directory, and the list is growing fast.

• Twenty Twenty-One Version 1.0 by WordPress.org
• C9 Starter Version 2.4.4 by covertnine
• C9 Work Version 2.3.1 by covertnine
• Seedlet Version 1.1.2 by Automattic
• ExS Version 0.9.0 by exstheme
• Cordero Version 1.2.2 by uxl
• Bigwigs Version 0.7.1 by Dinev Dmitry
• emulsion Version 1.6.9 by nobita
• Twenty Twenty Version 1.6 by WordPress.org
• VW Health Coaching Version 0.6.5 by VW THEMES
• Twenty Nineteen Version 4.9.6 by WordPress.org
• Writings Version 1.3.0 by Dinev Dmitry
• Twenty Seventeen Version 2.5 by WordPress.org
• Twenty Sixteen Version 2.3 by WordPress.org

I take this opportunity to mention that if you are a theme developer and you want to eliminate the pre-defined blocks (core-block patterns) that come in WordPress 5.5, you can do it with the following code:

remove_theme_support( 'core-block-patterns' );

9. Official Documentation

Finally, here you have some useful links about block patterns:

• For the End User – Introductory video to block patterns to understand what patterns are, how to access them, how to add them in posts and pages and understand how to customize them for your content. This video is a workshop published by the WordPress Training Team.
• For the End User – Block Pattern Documentation created by the Documentation Team.
• For Developers – Block Patterns page in the documentation for the Block API, published by the Gutenberg Team and that I already told you in the previous post.

And that’s it! I hope you found this guide useful. If you think any information is missing, feel free to tell me in the comments section below.

Featured image by Patrick Hendry on Unsplash.