Last week, Matt Mullenweg, as is tradition every year, gave his presentation (in this case, virtual), State of The Word, in which he presented a brief summary of the current state and new features of WordPress.
Matt is more than ever focused on making us falling in love with the experience that the Gutenberg block editor provides. One of the new features that Matt highlighted, which came with WordPress version 5.5, is block patterns. I thought it would be interesting to make this complete guide on them.
The guide is divided into three posts and we will look at the following topics:
- Introduction to block patterns
- Insert a pattern on a page
- Pre-defined patterns and others available in directories
- Add patterns available in directories to your site
- How to create a pattern from scratch
- How to create a pattern if you are not a developer
- How to convert reusable blocks to block patterns
- Topics using block patterns
- Official documentation.
So, without further delay, let’s get started!
1. Introduction to Block Patterns
When Gutenberg arrived, the big change with respect to the classic editor we used to have in WordPress was the introduction of the “block” concept. Everything was supposed to be a block: the post title, its paragraphs, lists, images… each of them was a block, with its own customization properties to set up its font size, title, alignment, and so on.
The blocks quickly became more sophisticated and now we have image galleries, media/text blocks or even blocks containing other blocks.
Simultaneously, many developers have also provided a large set of blocks with unique features so that you can improve the design of your pages. For example, at Nelio we developed the Nelio Compare Images to compare two images with a simple slider:
Not only has there been an explosion of blocks that can be found in plugins and themes, their capabilities have also evolved with the different versions of WordPress. Thus, you can currently create reusable blocks and, with them, even create a page or post template.
Continuing with the idea of having pre-defined designs that can be reused quickly and easily, with WordPress version 5.5 the block patterns have arrived. The idea of a block pattern is very simple: they are predefined sections or fragments formed by a group of blocks that you can use in the creation of pages and posts. These patterns can be something as simple as a section showing two buttons or a price section with eye-catching and complex designs.
2. Insert a Pattern on a Page
Let’s start with the basics, how do you insert a new pattern on a page? Very easy! As with the blocks, to insert a pattern you just have to click the + button at the top left of your editor and, instead of adding a block, select the Patterns tab. There you’ll see that a small drop-down with the types of patterns you can select, the predefined ones of WordPress, those of the theme you have installed and any other that you have installed with a plugin.
Select the pattern you like the best and see how the set of blocks that make it up are inserted into your page:
After inserting the pattern, you can modify each of the blocks as you have been doing up to now. Also if the blocks of that pattern are grouped, you can also modify the properties of the group as a whole. Simple, right?
Nelio Forms
A fantastic contact plugin using the block editor. In its simplicity lies the true power of this plugin. I love it, very versatile and it worked perfectly for me.
Wajari Velasquez
3. Default Patterns and More Patterns from Third-Party Directories
The version WordPress 5.5 has come with a set of pre-defined block patterns that you can now use to create your pages. You just have to click on the + button that I mentioned above to see the patterns available on your site.
Also, your active theme might also define its own block patterns. For instance, the Twenty Seventeen or the Twenty Twenty-One WordPress theme includes some block patterns, and so do GoDaddy‘s and Genesis Blocks‘, to mention a couple of examples.
After the release of WordPress 5.0 we had an explosion of blocks, and we’re now seeing the same result if block patterns: you can download and install blocks and patterns on your website very easily, as I will explain later. Here you have two webs of blocks and patterns that are at your disposal, although I’m sure that soon there will be more:
- Shareablock Patterns by Jeffrey Carandang – A fantastic website where you can share and get loads of blocks, templates, and patterns to download and install on your site.
- Munir Kamal’s Gutenberg Hub – where you’ll also find a bunch of blocks, templates, and patterns.
There’s also the Redux Framework plugin, which offers a library with over 1000 third-party blocks, templates, and patterns (including those available in the directories above) to insert into your pages. The plugin allows you to download up to 5 free patterns and then you can upgrade to the paid version.
4. Add Patterns Available in Directories to Your Site
As I have already mentioned, you can use the Redux Framework plugin to add patterns from Shareablock and GutenbergHub easily. If you are a professional WordPress website designer, surely it is a good option to always find as many patterns as you want very quickly. But you can also use new block patterns without requiring a premium plugin. Let’s see how.
Add a Shareablock Pattern
In the case of Shareablock, to install a pattern (and of course, a block or template), you just have to select it from the web and click the Download Now button.
The first time you will be asked for an email address so that you can get a username and password.
In the email there is a link to log into their website; log in and you’ll now be able to download the pattern you’re interested in. Just select it and click on Download Now again, so that you receive the block pattern in your email.
After clicking on the link provided in the email, you can access the web to download the.json file of the pattern. Once downloaded, just drag it to the WordPress block editor and you will automatically see all the blocks that make up the pattern.
It’s a cumbersome process, but it gets the job done. Unfortunately, you’ll notice the block pattern doesn’t show up in your library…
Add a Gutenberg Hub Pattern
Adding a pattern from Gutenberg Hub is easier. As before, first select the pattern you want to copy.
To the right of the pattern, you will see the Copy Code button. Click the button to copy it to your clipboard and then paste it in your Gutenberg editor. This will paste the block in your editor, but will skip the library.
But wait! Not so fast. If you want to fully customize the resulting block(s), Munir Kamal recommends you install their free plugin, EditorPlus, which adds new blocks to the editor and extends Gutenberg with advanced design controls, fonts, icons, dividers, animations, and many more features.
If you do, you’ll see in the right sidebar of the editor you have advanced controls to modify the design of the copied pattern.
Now you know what are block patterns, where to find them, and how to insert them into your website to create great designs. Don’t miss the next post where you will learn how to create your own patterns!
Featured image by Raul Cacho Oses on Unsplash.
Leave a Reply