How to Create Low-Code Block Patterns

Are you ready to create your own WordPress Block Pattern and use it in several places throughout your site? Would you like to do this without creating a plugin or theme?

Learning outcomes

1. Create a group of blocks to use in a block pattern
2. Add the block markup to a plugin that will enable block patterns to display via the block inserter

Comprehension questions

1. Would you like to use a block pattern several times throughout your site?
2. Do you prefer a low-code method for web design?

Transcript

If you would like to add a block pattern to your website, but to do so without writing a lot of code, we’ve got a solution for you.

To do that, you’ll want to see that if you’re at the block inserter, and you select patterns, you have choices available to you. But let’s say that you want to either add a block pattern there that comes from the block pattern directory. Or you would like to create your own block pattern and add that to your site. How should we go about doing that?

You could add the code to a theme a child theme or write your own plugin. But if you’re not comfortable with those options, there’s another solution.

We will go into the dashboard of our site, go to plugins, add new, and search for custom block pattern. And you’ll see a plugin displays. Now I have already installed this, but you will be able to hit Install and activate at this location or to be able to work on your site.

The next thing you’ll need to do is go to the Block Patterns where it says add new in the admin dashboard navigation, and the post will load.

Now this is a Custom Post Type. This means it’s not going to actually show up anywhere on the front of your site unless you do some work to make that happen. We’re just interested in having a place to store our Block Patterns information.

So I have all of this code that I made in a regular post previously, and you’ll see on the left that I’ve got my list view. I want to get that information over to our plugin.

So we have a couple choices, I can either highlight and select all, although I find doing that to be a little complicated sometimes to select a big group of blocks.

So I will switch over to this code editor mode. In the top corner of our site, we have the options kebab. And when you select it, you have a choice to show code editor.

So you’ll see the code is displayed on my screen and I will select all and hit Copy. Then I will go back to my custom block plugin interface. And let me turn full screen off so you can see where that is.

And I will switch here again to code editor, paste the information in and at the top, I could add a title that might be about my custom block pattern. So I might call this one cover with transparent column. Hit publish.

And now if I go to make a new post, switch this back over to Visual Editor. Go to the plus patterns. And you’ll see that a new option shows up it says Custom Block Patterns. And now that custom block pattern that I just saved over in the Block Patterns posts, basically I can get to that through the block inserter patterns area and use it throughout my site. So that is a low code way that you can create a block pattern and have that accessible throughout the navigation on your site without touching a whole lot of code.