Using The New WordPress Pattern Directory

In July 2021, WordPress 5.8 was released with a powerful new feature – the block pattern directory. It’s an addition to WordPress’s existing library of themes and plugins and is sure to be a huge asset for web developers. I must admit, I didn’t see the potential for block patterns until I took a look at the directory and tried it out for myself. But between this and reusable blocks, block patterns can replace a plugin or two on your site!

Here’s why it’s so useful.

Replacing the Button Designer Plugin

A while back, I’d written a post on using a certain plugin for button designs. I wanted to create a nice CTA button for something and didn’t find a good way to do it without a plugin. Even with the Gutenberg editor giving me the tools to style my stuff, I’m not a web designer. I need a bit of guidance – or better yet, a template. Something that I can copy/paste, and then customize for my users.

Now with the WordPress pattern directory, I can delete the plugin and just use that instead.

What is the WordPress Pattern Directory?

The idea is simplicity itself. People can create their arrangements and styles of blocks, to form a “pattern”. They share this pattern on the WordPress pattern directory, and others can simply copy those patterns to their own sites. Whether it’s a particularly well-styled table, or a complex layout of columns, background pictures, CTAs, and more, all you have to do is copy-paste.

For example, I had started off this article talking about the need for a good Call to Action (CTA). Luckily, even though the WordPress pattern directory is in its formative period, it comes with a set of pre-built patterns by the WordPress team to get us started. Under the “Buttons” section, we have a wide variety of patterns to choose from.

I just choose the most basic one, because I can easily customize it later:

I just click “Copy” and the blocks go into my clipboard. You need to paste them into WordPress Gutenberg. If you haven’t switched over to Gutenberg, I suggest you do so now. I hated it when I first started using it, but it’s gotten much better, the bugs have been ironed out, and it’s now a definite improvement over the older clunky editor.

So once you’ve opened up your post in the Gutenberg editor, simply paste whatever you copied from the WordPress pattern directory like this:

Everything is transferred automatically. The formatting, the text, the placement – exactly as you saw it in the preview. And now you can go into each item in the block and start customizing it to fit your purposes. In the above example, you can change the text, the font, the button text, background color, the button style – whatever you want. In short, just because you copy a pattern, doesn’t mean you’re stuck with it. You keep what you like, and simply discard the rest.

Save your changes, and you can preview the post as shown here:

The best part of using patterns like this is that they don’t increase your site load. No need to add plugins, and nothing to update. You can use dozens of patterns, or none – your site speed will not be impacted. It’s a perfect solution for something looking for inspiration on a particular element on their site but doesn’t’ want to come up with it from scratch. If you’re looking for ideas, the new place to look will be the WordPress pattern directory.

I’m sure you’re already thinking of ways you can integrate some of these patterns into your site. I know I am. Happy designing!