Photo of a desk with a notebook and a notepad

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.

Inserting a block pattern in the WordPress editor
Search for a block pattern in the WordPress editor.

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.

Editing one of the blocks that form a pattern
Editing one of the blocks that form a pattern.

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.

WordPress Team social cards directory pattern
WordPress Directory pattern: Team social cards

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:

By replacing photos, texts and links, you quickly build a section of blocks that perfectly fits what you need on a page.

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…

Imagen de un perfil de mujer

⭐️⭐️⭐️⭐️⭐️
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

Imagen de un perfil de mujer

⭐️⭐️⭐️⭐️⭐️
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

Imagen de un perfil de mujer

⭐️⭐️⭐️⭐️⭐️
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).
Sending a new pattern to the WordPress pattern directory
Editing the submission of a new pattern to the WordPress pattern directory.

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.

Pattern view sent to WordPress pattern directory
View of the pattern sent to the WordPress pattern directory.

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.

Proposal for a new pattern creation page
Mockup for a new pattern creation page (source: Block Pattern Directory).

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.

Pattern editor welcome popup mockup
Pattern editor welcome popup mockup (source: WordPress.org Pattern Directory.

On the other hand, the editing sidebar of a pattern will also include information about it, such as the title, description and categories.

Pattern editor sidebar mockup
Pattern editor sidebar mockup (source: WordPress.org Pattern Directory).

Finally, you will have the option of submit the pattern to be reviewed and share it with the rest of the world.

Mockup of the submission of a pattern to review and publication in the pattern directory
Mockup of a pattern submission for review and publication in the pattern directory (source: WordPress.org Pattern Directory).

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

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

I have read and agree to the Nelio Software Privacy Policy

Your personal data will be located on SiteGround and will be treated by Nelio Software with the sole purpose of publishing this comment here. The legitimation is carried out through your express consent. Contact us to access, rectify, limit, or delete your data.