Hey everyone. I’m Daisy Olson. I’m a developer relations Wrangler with automatic. My primary focus is on supporting the WordPress open source community. I’m excited to be here to share about a really useful feature of the WordPress block editor. You may already know that the block editor sometimes referred to as Gutenberg can be used to really create advanced and interesting content layouts.
Today I will share about the block patterns feature that was added WordPress version 5.5 in August of 2020 with the release some WordPress version 5.5. The block patterns feature was implemented in the editor. The block pattern feature provides access to a catalog. A pre-made patterns made of blocks that allow users to create easily create and modify, engaging layouts for their content.
This feature is primarily available to allow theme and plugin developers to create predefined block configurations for their users and clients. Beyond those included in WordPress by default, additional block patterns can be registered to provide content creators with even more options for quickly creating highly customizable content.
Their WordPress site. Registered block patterns provide a very simple way to add template like groups of blocks to posts or pages ready for unique content to be added from adding block patterns, unique to a site’s brand to extending a plugin or themes functionality. The possibilities are endless.
I will take a moment to sidetrack to talk about another block editor feature that might cause a little confusion when talking about block patterns. This is the reusable block feature. A reusable block is a block or group of blocks that are saved to allow management from a central location. Changes made to a reusable block will apply to every instance of the block across an entire website.
When a reusable block is edited, those edits will affect any place on the site where the edited reusable block has been used. Block patterns, however, are used as a starting point and don’t have the same central management. Once a block pattern is added to a post or page its no longer connected with the registered block pattern and can be modified without affecting the block pattern that was used to insert the blocks.
Block patterns are registered for use from the block insert or panel by adding some fairly simple code to a WordPress themes functions dot PHP file or in a custom plugin. For this example, we’ll add the necessary code to a simple plugin. In order to keep the block pattern inserter organized the option to create block pattern categories can be registered along with the block pattern itself.
I recommend utilizing this option to keep things easy for content creators in the future. In this case, I have registered a block pattern category with a category name and the human readable label. The category name will be used by WordPress to identify the category. Note, that I have used all lower case characters, separated by dashes from my category name.
The second property contains an array with a label attribute. This assigns a human readable label for the category that will be listed in the category drop down menu in the block pattern inserter panel.
The code, the block pattern consists of two required and two optional properties. The title and content are required properties. The description and categories are optional, but recommended. The title will provide a label for your block pattern to be displayed in the list of available block patterns. The content contains the initial block content for the pattern.
This content will also be used to create a rendering of the block as it will appear with the active theme styling in the insert or panel. Depending on the content of your block pattern, it may be necessary to escape certain characters, such as double and single quote characters. There are many tools online available to help with this task, the URL for one option at onlinestringtools.com is shown here.
Here you see the completed code that can be added to a theme or plugin. In this case, I’ve added a simple paragraph block example for demonstration purposes. I’ve also wrapped my registration code in an if statement so that the registration code will only be used if the block pattern functionality is present on the site where the code is added, this will act as a safeguard should the code be added to a site that does not support this relatively new feature of WordPress?
Note that the strings I’ve included in my block pattern registration code, such as my awesome pattern, or this is my awesome block pattern are wrapped in localization functions to allow the strings to be translated into other languages.
This is a best practice when coding any user-facing strings. This example is extremely simple, but let’s look at the process for obtaining the content markup needed to register a somewhat more complex block-based layout for registering a block pattern.
Here we have a basic WordPress site that was created for this demonstration on the home page. I have added each of the core or included in WordPress block patterns. So You’ll see, we have things like a two button block pattern that includes two buttons just as it suggests, a three button block pattern.
And then if you go down the screen, you can see that we have a number of other options, things like two columns of text with images. We have three columns with buttons. We have some that will do images. Here we have something that’s intended for a large header with a, heading over the image.
And as we continue down, you can see more. And finally we have a quote block pattern which is a really good example of the type of thing you might use a block pattern for. To create a way to have a very consistent layout with content that you might use again and again, what would be a really common.
And what certain types of sites might use. So now I will create a new post. I’m going to go up here to new and then post. So in order to get started this. This post is really only included as a way to get, the markup you will need in order to create your block pattern. So just for, to give the post a name, I’ll say that this is a block pattern setup, and then I can start creating the block.
And Let’s say I wanted to Let’s give it a heading.
Okay, I will add another block here. And perhaps for this, we would be maybe creating some kind of a team page. So we might wish to have a an image. We might wish to have some kind of biographical content. So you could say that we’re going to have a name. We’re going to have a title. We could say we’re going to have some kind of biography.
We can apply some formatting to this content, so let’s say we want to make the name that will be replaced at a later time bolder. We can maybe say that we want to make the title.
Let’s say we make the title a small size and then the biography would just be the content we could say that we want to make this title have a smaller line height, perhaps.
So we can maybe say the line height is only going to be one. And then we can say that over here, what we would have is media. We would have some kind of an image. And depending on the theme that you have installed, you may have styles that have been created specifically for your theme. You can set text and background colors and a number of other things that may depend somewhat on your theme, or, and the blocks that you use in your block category.
One thing to watch for is to try to avoid having this extra paragraphs because when you, when we go to create the, get the content for this block pattern, we will find that we need to remove those if they’re present. Just so that we have something in this media area let’s go ahead and see what kind of images I’ve got in my media library.
So just so that we have an example, let’s say that this, in this case, we’re going to create a directory with seemed far our team mascot. Now we’ve added this image. I’m going to go ahead and try to make this a thumbnail. And let’s say I wanted to have the image on this, on the right side and let’s see what else we can do here.
Perhaps we want to make it smaller so that it doesn’t take up so much space on the on the page. And we consider that this is just a very, simple group of blocks. It’s not very complex. But you could add extremely complex, full page layouts using this option. It could be used to starting points for things like landing pages, for example.
All right. So here I have my book. I’m going to call this complete and I am going to go ahead and save my draft so that I don’t lose my work. Now, the content here is, not visible. So if we can see the way that it’s look, the way that it’s designed to look, but we can’t see the mark up, that’s actually creating this.
So what we need to do is reveal that and to do that, we’re going to go up here to the options, which is the three little dots in the upper right-hand corner of your screen. And then we’re going to change from the, visual editor to the code editor. And this will change the screen. We will still see our top, our title here, block pattern set up.
This can be edited. I would not recommend editing your content in this view, unless you’re very familiar with HTML and block mark up because it would be quite easy to break your content. WordPress is very specific about the format that it needs this information to be in. If we look at what the makeup of this block, what will become our block pattern, you can see, we start with this commented out HTML that says WP colon heading.
This is, will not be displayed for end-users, but WordPress will see it. It will be in the markup of the, front facing content. But it’s only intent intention is to let WordPress know that this is actually a petty block. So we opened that with the com a commented out block and HTML, and we close it with a commented out block of HTML.
And in between those two comments is the actual content of that block. So slightly more complex example is the media dash text. For our media content block. And in this case we have we have blocks in the side of blocks. So we open the block. So let me go ahead and select this so you can see all the opening content.
There’s a number of, attributes and properties set here. So actually the true opening is this much. So it tells WordPress something about this, how it’s going to work with this content is up to WordPress. And in this case, we are only using core blocks, no plugin blocks, but in some cases you might have additional blocks that are added by your plugin or in some cases blocks could be registered in themes as well.
So after this, we have the content of the block. And then inside of this block, we had a second block, a paragraph block and actually two paragraph blocks and then a third. And then once all of those inner blocks are done, then the blocks, the outer blocks HTML is closed and then the outer blocks comment is present.
So what we have are nested blocks in this case. So as you can see, it’s possible to have very customizable and advanced block layouts here. And this is one of the reasons why a block pattern can be so useful if you have very complex content that you’re going to use again and again.
So in order to create a. The registration code. All we’re going to do is take this code and we’re going to put it into the content section of the registration code that I showed you before. And let me go ahead and I will go my plugin. This is not something that I would recommend doing but just, for a simplified way of getting to the code, we’re going to go into the plugin editor. Many hosts have actually disabled this.
This is my simple block patterns plugin, and here I registered some block patterns. I have one example here that I did previously. That’s called my pet details. And if I scroll down, then I have a second, a block pattern that I’ve registered that has a more simplified version. And what I can do is just take that code that I copied out of the post and paste it into here.
That is basically what you can do here to register your block pattern. One that no, of to be aware of is that especially if you have things like apostrophes or quote, quotation marks, either single or double quotation lives in your content or any other character that would need to be escaped for PHP to not change the way that it understands the code you’ve added anything that’s in between the single quotation marks around your, the content property of your registered block pattern.
You would want to escape this content. And there are a lot of different options for escaping content. The one that I’ve used is onlinescreentools.com forward slash escaped dash string. And if you just search online for a string escaper, you would be able to find a tool that you could copy your markup into it, and then it would get the escape strength.
I will tell you that if you do that, you’ll want to remove all of your line breaks and extra Spaces in here so that what you get out is a very clean version of your, of your HTML markup. So that when you paste it in here, it won’t have any extra like Line break characters or, empty spaces or those kinds of things.
So in some cases in this case, actually I can look through the code and I can see that I won’t have any characters that would interfere with the rendering of this block. I do have some double quotation marks in the markup, but because I’m wrapping the wrapping this in single quotes it won’t, cause a problem.
So it all depends on what kind of content you have apostrophes or a contraction in your content would potentially a problem. So once you have added this block pattern, you can then. Go back to a post. And let me show you demonstrate the way that you would add a block pattern. First of all, we’re going to change back to the visual editor.
So that’s the options. Three dots in the upper right-hand corner, switch back to visual editor. You can see now we have our regular WordPress block editor view. In order to add a block pattern to some content you would open up this primary inserter. This is where all blocks available would be available to you.
And you will see that there are patterns. And in some cases, if you have saved previously reusable blocks, that can be accessed from here. So patterns can be accessed by clicking on the patterns tab. There’s a dropdown that will show you the categories.
And all of your block patterns that are registered for their site will be available here. So let me just check here. I believe that I may have actually deactivated my block patterns plugin. So let me go ahead and get that activated. And then let’s try this again to see the block patterns that I created.
So now you can see here that now with that plugin activated, I can see the category of my custom patterns. And when I open that up, I can seem two block patterns. So these are two that I created previously. One of them has quite a lot in it. The other one is more simple. If I just click on it, then it adds it into the, to the end of the Document that I have open.
And then what I can do from here is go ahead and start editing it. But it’s, so once I’ve inserted this block pattern into my post or page, that’s no longer connected with that block pattern. The block pattern is there again to use again in the future, but I can go ahead and make any changes I need to this group of blocks.
No, let’s take a look, look at some block patterns that have been created for specifically for the 2021 theme. Just to give a bit of a rundown of some of the ways that the theme development team for the core theme have tapped into this feature. What we’re going to do, I have a brand new post here.
I am going to just go ahead and use that this main inserter I’m going to select patterns. And then you’ll see that the dropdown will have my custom patterns, which was the category that I created for the patterns of my plugin. The text headers gallery columns and buttons are the categories for the, block patterns that are included in WordPress by default.
And the one that comes up first with the theme that I have active is 2021. And these. These are the block patterns that are included in the 2021 theme. They would not be available if you had a different theme activated. But as I have this theme activated, I can go ahead and access these.
A couple of things, if you have a block pattern and you can use it in your site and it was a block pattern that was part of a plugin or a theme that you no longer have installed. As long as the blocks used in that block pattern still exists on your site that should not affect the change of the theme or the lack of the plugin that registered the block pattern should not affect any of the content you’ve already created because of that disconnect that happens when you When you add a block pattern or add content using a block pattern to a poster page, that connection is no longer there.
It will not relate in any way back to the pattern that you use to create that content. You will no longer be able to add new content with that block pattern. The block pattern will not display in this panel any longer, but any content that you created previously will remain. So let’s just take a moment to look at some of the ways that the 2021 theme has taken advantage of this feature to allow different types of content to be created with patterns.
The first one in the list is called large text. If click that you can see that it has just a paragraph or a, heading block with a gigantic font size of 144 pixels and a line height of 1.1. And that is the block pattern, that is all it does. It’s an example of a very simple way to create a block pattern.
If you always wanted to have the option to create this large text here’s another one. This is the failed to get those title of it links area. So this could be used for some kind of social linking, which is an example here. Once this is added to your content, you’d be able to go ahead and change this content to suit your needs.
But it’s a basic group of blocks. So in the outer block we have. Let’s see what, exactly this block is made up of. It’s a cover block. It’s got a spacer and then paragraph another spacer, and then we have some columns and it’s a two column area. Each one has a paragraph and then ended up that we have get another spacer.
The cover is designed so you could create or you could change it. So you have a different color background, for example or you can just keep it the way it is. It looks like it’s got some kind of a border applied to it, which is a style for this block probably added by the theme. And once that’s added to your content and you can continue working with it.
So let’s just quickly go through a few more of these. We have a media and text article title. It looks like it’s got it’s like a median text block with some styling and content already applied to allow you to create this layout with an image on the left title, the dots, like a separator, and then some kind of a tagline or attribution in this case.
If you continue scrolling down, you can see, there are things like contact information a portfolio list, which looks like it would bring in, perhaps let’s see what this does. This brings in paragraphs with images so that you could create almost like a. A PO a list of content linked out potentially to other places on your website.
And that one of my favorites is the overlapping images block pattern. So if we add this, you can see that what we have here is a column. There are two columns. One of the columns has two images in it and the spacer, the other one has an image and a spacer and the theme adds a style that allows the images to overlap.
So it’s a combination of a block pattern along with some customization that’s been created by the theme to create this overlapping effect. And once this is here, you can not take this and replace the images within just of your choosing, but it’s a really interesting usage of this block pattern functionality.
So that is a bit of an overview of some of the ways that the block pattern functionality in WordPress from 5.5 forward is being used, but in the current core theme, this concludes my presentation. I’d love to hear about how you use block patterns in the future. Thank you so much for joining me today.
