by Adam Preiser updated April 7, 2020

How To Create Block Patterns To Speed Up Website Building

Share:

Share on facebook
Share on twitter
Share on linkedin

Block patterns are going to be a big deal for all WordPress users and in this post, I will show you exactly how to create your own block patterns.

add_action( 'init', function() {

	register_pattern( 'NAME', [
		'title'   => __( 'TITLE' ),
		'content' =>
			'PATTERN'
	] );
} );

Two days ago, I came out with a video and I introduced this concept that's coming right around the corner to WordPress called blog patterns. It's kind of experimental right now, and it's something that I'm really excited about it. And I think if you wrap your mind around the potential of what block patterns are, then you can see the potential for it to, to help you do deliver websites faster if you have clients, to be able to enable them to do more with their website.

So I'm going to show you. Exactly how to create a block pattern in this video. Now we're going to do some things that are a little on the techie side, and I know this is the WordPress channel for non-techies, so I'm going to try to make it as simple as possible, but you're going to actually see by the end how simple it is to create one of these block patterns.

So let's just go ahead and take a look at it. So here's the page where it talks about the new release of this feature in making it. Able for just the average folks to create a block pattern. So when I scroll down, it gives the kind of template for it. So all that's involved in it is creating something called a custom function.

But don't worry, I'm going to make it super easy for everyone to do, but this is where that little snippet of code is. Now I'll have a link in the video description down below. It'll take you to my website. You'll get written instructions on how to do this as well as. This little snippet of code that you can copy and paste onto your own website.

Okay, here's what we're going to need. This is a new feature to Gutenberg and you will need the Gutenberg plugin installed an activated, so you're going to need a minimum version of 7.8 and this is what recently came out. Now, what will end up happening is maybe in four to six months, maybe by the end of summer 2020 this will be included in WordPress by default, but for now, you're going to need to, if you want to try this out, you're going to need to install the Gutenberg plugin.

The next thing you can do, and this is optional, if you don't know how to add a custom function to a child theme, and I don't even use a child theme anymore, you might want to use this free plugin, and this is one of the best free plugins. That I've ever come across, and it's called code snippets. And this is going to allow us to add this custom function and a very easy to use manner, easy to manage manner.

Okay? So you're going to need that. And this is optional. This is a free plugin called cadence blocks. And what this does is it adds a lot of page builder functionality to Gutenberg. It is pretty neat in what it allows you to do. You can drag and resize columns. There's a lot of elements to it that add a lot of that page builder functionality, but to Gutenberg, and it's a completely free plugin.

Okay. Now let's jump on over to my website. So here's a website. It's all set up right now. And if you don't know how to install a plugin, someone got really mad at me the other day for not showing how to install a plugin and a video. You go to plugins, you click on add new, and then right here you do a search for the name of that plugin, and then you click.

Download, or I'm sorry, you click install now and then you activate it. It's a very simple process. So I'm going to click on my installed plugins, and you can see I have Gutenberg installed and this was optional cadence blocks, and here is code snippets. So I'm going to go ahead and activate code snippets and you can see it's now activated right here.

So then go ahead and click on code snippets and you're going to see some that it comes with. And here's this toggle switch and it's toggled. They're all toggled to off and you actually don't need to keep these ones that it comes with by default. You can just click right here and you could delete them all, but I've already gone ahead and added one right here called block pattern template.

So what you would do. Is click on add new, and you can name this block pattern template in that little snippet of code that I showed you that's right here, but I'm going to give you a modified version of this on my website. You're just going to copy and paste that right here, and then you're going to click on save changes.

You're not going to click on save and activate, you're going to click on to save changes, and I'm going to show you why in just a moment. Okay. So now what you're going to want to do is create this block pattern. And a block pattern is simply just a saved section. So if you use a page builder, now you know that you could save sections and some of them come with predesigned sections, but the user experience, I think is much better in Gutenberg.

So what you're going to want to do is go to pages. And click on add new, and you'll want to name this. Um, actually let me get rid of this tour. You're going to want to name this block pattern, and this is just where we're going to create this block pattern. Now, I'm not going to go through creating a block pattern right now.

I'm going to show you the one that I've already created, and it's . Right here. So here's a block pattern that I created. You could see it's this section. It has this colorful background. I have a heading, some subheadings and a couple buttons here, and I put a video in. So I'm going to make this my block pattern so I can just with two mouse clicks, add this to anywhere on my website.

So what I'm going to do is click on the top right, there's these three dots. They're kind of hard to see, and when you click on that, there's this option right here that says code editor. So you're going to want to click on code editor, and then it shows you all the code that is involved with making that blog a block pattern blog pattern.

Okay? So you're going to click here and then you're going to click control a or command a on your computer to highlight it all. And they're new year. Put it in your clipboard. So I'm going to do it control C. so now it's in my clipboard. So now what I'm gonna do is I'm going to get out of here. Actually, if you want to get out of this view, there's a little X right here that says exit code editor, and now it's going to show me it the way that it normally is right here.

Okay. So you could save this as a draft if you want, but you're not going to need this. This is just for you to create this block pattern, and you could create a block pattern that's anything, and it doesn't have to be one block of stuff. It could be an entire template for a blog post, for example. Okay, so now I'm going to click where there's the w it gets me out of the block editor.

Now I'm going to go back down to code snippets. So right here is where I created that block pattern template. I'm going to click on clone, and now it's created a clone of it, and I'm going to then click into the title to start editing it. So for the title, I'm going to change this to a title that makes sense for managing it.

So for me, I'm just gonna name it. A hero with video. So now I know what this is when I'm looking at the list in the future. Okay, so there's a couple things here that you're going to need to edit. Three things. It's super simple. The first one is name. So this can be any name it's going to be, it needs to be all lowercase, no spaces or funky characters.

So I'll go ahead and put a name in right now. You can see I named it hero with video. Next, right here you need to put in a title. So we're replacing this word title, and this is what's going to show in. You're looking at a list of blog patterns, block, not blog block patterns. And if you notice, you can, this is the friendly name, so it can have spaces.

Uh, I wouldn't put any funky characters in there just. Spaces is fine. So that's what's going to show in this list a and next right here where it says pattern a. You're going to just paste in what you just copied in your clipboard. Now I want you to make note of one thing. For each of these. I left the little apostrophe on the front and the back.

You see that there's the apostrophe that must be there. If you accidentally remove that, put it right back. Okay. We're just changing. We're just replacing the text placeholder. So for here, I don't want to replace everything. I just want to replace the word pattern, so I'm going to highlight it and then I'm going to paste in what I copied.

And there it is. So now I'm going to scroll down and this time I'm going to click on save changes and activate. And so now it should say snippet updated and activated. And when I click on all snippets, you could see now this one hero with video is turned on. So in the future for additional block patterns, I want to go to where it says block pattern template and click on clone and make that block pattern template that way.

That way I always have the template in there. Now, if you already know and you have your own way of adding custom functions, you don't need code snippets and, and all of this kind of stuff, you could put it where you want to put it. This is just a much easier way to manage it if you ask me. Okay, so now I'm going to go to pages on my click on add new, and if you want to see the.

Block patterns. Uh, right here is the icon for it. And when you hover over it, it says block patterns. And when I click on it, you see some of the block patterns that are being experimented with right now. But when you scroll down, you're going to see that block pattern that I created. And what's really neat is it generates a thumbnail preview.

And it does this dynamically. You've got page building tools that don't even do this. Uh, and it makes it so much easier to manage your block patterns. So, and you can see right here it says hero with template. Now if I want to use this anywhere on my website, it's one mouse click. And then there it is. And all I would have to do at that point to start changing out some texts, changed the links out to the buttons.

I can click right here and I can change the video. So. That's how you create a block pattern. Now this is a big deal, I think because what's going to happen is a theme. Developers and plugin creators, they're going to be able to create these block patterns for you, so it's going to be so much quicker, faster, and easier to build a website using the native block building tool that WordPress already includes.

There's nothing to buy, there's no code bloat. There's none of these things, and. What takes it even further. You can see how easy it is for you to create your own block patterns, and it's really easy to see it in a list. Click on a button and it gets put in there. So now you could think about how much easier it can be to build a website when you have your own library of block patterns.

So if you create websites for clients and you don't want to use a page builder. You just want to use the builtin block builder. You could create your own library of patterns. You saw how easy it is. I can do it. You could do it. Uh, you could create your own library of block patterns that you can move from site to site, and you can show your client how they can build this out.

Now, this isn't just for pages, this is for posts, and it's not limited to just that one section that you saw. Basically anything you can create on a page. You can make a block pattern. So if you're using the the block builder just for blog posts, and there are certain elements that you want to use over and over in a blog post to enhance the layout of the blog posts, well, you can create a block pattern for it.

And it's really easy. One click, and you're able to use it. In fact, the entire blog post templates. So if there's a formula that you follow for the sections of a blog post, you can make that entire blog post a block template. That one click gets applied and then all you have to do is point, click and edit.

So the last thing before we wrap up here, this is a new concept and it's something to think about over the next few months. Experiment with now. It's not quite Yeti, Yeti. It's not quite ready for prime time because if you noticed, um, the only negative I saw is when you are looking at the blog. See there I go again.

If you're looking at the block patterns, it's just a higher article list where you have to scroll through, so they need to improve the process of categorizing and organizing. Maybe they have some kind of interface for it to make it more visual and easy to work with. If you're going to have 50 different block.

Patterns. So they just need to improve that. And some of the syntax on the code might change a little bit. Who knows when this finally comes out. But the whole point of this video is just to show you what is going to be possible very, very soon so that you can start. Thinking how it can apply to your workflow and what you're doing as a website builder.

Anyways, that's all that I have for you in this post. I hope you will appreciate advanced looks into the future of WordPress like this, and if you did appreciate this video or find some value, consider giving it a thumbs up and share this video so people can see what is coming around the corner.

Video Transcript

Adam
Adam
My passion is making the best quality video tutorial online, for non-techies. When I am not behind the camera, I am usually helping out one of my YouTube subscribers.

Join The Conversation

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

Stay Up To Date

Enter your name and email for the latest news, updates, and tutorials.