At the end of last year I wrote a comprehensive guide on what WordPress patterns were, what they were for, and how to create and use them in the WordPress block editor. In just over half a year, thanks to the work behind the entire WordPress community, there have been great advances in the development of block patterns. We see how after the publication of the WordPress 5.8 version, its availability and usage is growing rapidly. For this reason, I think it is interesting to be up to date on the WordPress Pattern Directory, as it will affect how we redesign our pages and themes in the future.
As we had already commented previously, a block pattern is a set of predefined sections or fragments made up of a group of blocks that you can use in creating pages and posts. These designs can be something as simple as a section showing two buttons or a price section with flashy and complex designs.
Insert and Edit block patterns
Inserting a block pattern from the block editor is just as easy as adding any block. After clicking on the + icon in the upper left corner of the editor, a pop-up dialog appears with which you can add blocks, patterns, or other reusable elements.
In the Patterns tab, you will find a drop-down where you can select by category the patterns to search for. Some of the patterns you’ll find come by default with WordPress, others are specific to the theme you have installed, and some will come from your plugins. In fact, there’s a lot of plugins that will add a whole new set of beautiful patterns!
Once you select any pattern, the set of blocks that make it up is automatically added to your post or page. All you have to do now is tweak it so that they contain the content you want.
Copy and Paste from the WordPress Pattern Directory
In late April 2021, WordPress published the Pattern Directory on WordPress.org. At the time of writing this post, there (August 23, 2021), there isn’t a menu item in WordPress.org to navigate to this page directly. At least, there’s none in English, because there’s one in Spanish.
Although at first glance this directory may appear to be the same as the theme or plugin directory, it has the functionality to add any pattern very easily to any post or page.
Searching for block patterns in the WordPress.org Pattern Directory is very similar to what you have available on your WordPress dashboard. You can search by keyword or you also have a set of categories to narrow your search. Additionally, if you are logged into WordPress.org, you can bookmark any pattern.
When you double-click on the pattern, it shows it in detail and you can select between different screen dimensions to see what it looks like in each of them.
As you can see in the image above, you have a button with which you can copy the pattern and after pasting on any page or post, you already have the whole set of blocks so that you can then make the necessary modifications to adapt them to your website as you like:
Marie Martín
Editor-in-chief
Elizabeth Linden
Style Editor
Janet Smith
Fashion Editor
By replacing photos, texts and links, you quickly build a section of blocks that perfectly fits what you need on a page.
Ruth Raventós
CEO
Antonio Villegas
Chief Technology Officer
David Aguilera
Chief Product & Quality Officer
Easy, right?
Add Patterns to the WordPress Pattern Directory
Although work is still being done on what the final environment for creating and submitting patterns to the WordPress Pattern Directory should look like, the call is now open for you to upload your own patterns to be published in the directory. Let’s see how we do it with a simple example.
First you must create your own pattern. You can create it directly in the block editor, as can be the case with the testimonial pattern that I just created below from the one we have on our home page. Remember that if you include images, they must have a free license for commercial use.
What Our Customers Say About Us
Our customers love us because…
⭐️⭐️⭐️⭐️⭐️
WOW This really works
By far this plugin is the best tool that we have used. All of our clients are delighted working with this plugin. Easy to use and nice UI.
Name Surname – Position
⭐️⭐️⭐️⭐️⭐️
WOW This really works
By far this plugin is the best tool that we have used. All of our clients are delighted working with this plugin. Easy to use and nice UI.
Name Surname – Position
⭐️⭐️⭐️⭐️⭐️
WOW This really works
By far this plugin is the best tool that we have used. All of our clients are delighted working with this plugin. Easy to use and nice UI.
Name Surname – Position
Then you need to have a Github account and fill in a predefined form in which you must include:
- a description of the pattern,
- a title,
- a category of those available in the directory,
- a screenshot of the pattern,
- image credits you have included, and
- the Block Markup. To do this, you just have to position the mouse in the group that forms the pattern, click on the button with the three dots icon, and click on Copy (so that you can paste it into Github).
And that’s it. You can go to the Preview tab to see how it turned out and finally click on the Submit new issue button.
Now, you just have to wait for someone to review it so that it becomes available in the WordPress pattern directory.
Nelio A/B Testing
Native Tests for WordPress
Use your WordPress page editor to create variants and run powerful tests with just a few clicks. No coding skills required.
Directory News
As I mentioned before, the process for submitting patterns is still under development. Work is being done so that you don’t need to submit from GitHub and you only need to be logged into WordPress.org.
The idea being worked on is that from https://wordpress.org/patterns/new-pattern/ (currently the page is blank), you will see a page similar to the following image in which, once logged into WordPress.org, you will have a Create pattern button.
To create a pattern, you will be able to use a WordPress hosted instance of the block editor. This editor will work (for the most part) like the normal block editor, but with a few tweaks. The first change is that you will have a custom version of the editor’s welcome popup focused on creating and submitting patterns.
On the other hand, the editing sidebar of a pattern will also include information about it, such as the title, description and categories.
Finally, you will have the option of submit the pattern to be reviewed and share it with the rest of the world.
Summarizing
WordPress block patterns will likely end up being the most used elements for page and post design. They are useful enough to add sections that make perfect sense as a unit and that allow you to build pages much faster than if you have to add each of the blocks that make up that section one by one. And searching for patterns in the directory will become standardized in a similar fashion to that of plugins and themes.
Personally, when I now look at the available patterns in the directory, I still find it hard to find the ones that I would directly use on my website. But I know this will change in a matter of days. When great designers start adding their proposals, we will have a huge explosion of designs at our fingertips that will allow us to update our pages much faster.
Photo by Nick Morrison on Unsplash.
Leave a Reply