Making Gutenberg Block Patterns With No Code!

 

Block patterns in the WordPress editor are simply collections of block. I’ll show you how to build, save, and use them in your own website, without writing a single line of code!

Many thanks to Justin Tadlock for the plugin.
https://wordpress.org/plugins/block-pattern-builder/

Transcript

Hey folks, welcome to another hero press Tip of the Week. I’m Topher and this week we’re going to take a look at how to make block patterns, super quick and easy. No coding required.

First, let’s take a look at what block patterns are. They are literally a collection of Gutenberg blocks or editor blocks in WordPress. This is the repository wordpress.org, of public patterns. And to use them, you just click on one where you could have clicked copyright there. There’s the pattern, and you click Copy pattern. Now you can go into any post or page. And paste. And there you have that pattern just like that. This can be really useful if you have something that you do repeatedly. So we’re going to take a look at how to do that, how to make your own.

On this site, I have on the homepage, here, I’ll show you. Each post has an image at the top. And then this block of information. The image at the top is just the featured image, we’re going to look at this block of information, we have a header tag, a description, another header tag, this is a WordPress embed, I just put a URL there and it made this thing. Then I have a row here with 50/50 with the categories and the terms. And I have three posts so far. And each time I’ve just copied from the previous post, which is good, but it’s different every time when I have to deal with that. So what I want to do is make a pattern. And here’s how you do it.

We’re going to install a plugin called Block Pattern Builder. Now there are a whole bunch of them here. And I’ll bet they’ll work great. But I know Justin Tadlock, and I like his work. So I’m going to use this one. Click Install Now. And Activate. And now in the left nav, we have a block patterns section. So I’m going to if you just click patterns, right now, you’ll see none but I’m going to click new pattern. And this is just a regular Gutenberg interface, just like a poster page. So I’m going to make mine be image information. And then I’m gonna go back to one of these, I’m going to do one last copy.

So I want this whole row, everything inside it. So you can see it’s divided in half here, there’s another row here, this divided in half. So right now, I can go copy block. And it says copy row layout to clipboard. So now we will come back over here and paste. And there it is. Now you’ll note that it says no categories, no tags, because this template, this block right here actually gets information from current posts. And we’re not looking at a real post right now. So it’s going to be empty. I’m going to leave this year at this year, even though it’s content for a specific one, simply because it’s it’s a reminder of what’s supposed to be there. And then I’m going to click publish. And now let’s come and make a new image.

And right here, I’m going to click this plus at the top block inserter go to patterns. And I need to find my pattern, the one I made. I didn’t give it a category I should have. But that means that I can go to Uncategorized and there’s mine right at the top. That’s it. I’ve built a whole new post just like that. I change the description, I change the link and I put in a new image featured image, give it some tags, categories, etc. And it’s ready to go. That’s all there is to making a block pattern. And in this block editor, I’m actually not going to keep this one. So leave this
With block patterns, you can create literally anything. It’s just Gutenberg. If you can make it you can make a pattern out of it. That’s all there is to know hope you find this useful.