Reusable blocks are a powerful way to manage frequently used content on your WordPress site from the block editor. In this workshop learn to create and insert blocks into your content that can be edited from a central location allowing changes to be made across the site, anywhere the reusable block has been placed. This workshop shows reusable block features as they exist in WordPress 5.7.
Learning outcomes
- Learn what a reusable block is and how they are useful
- Learn how to save a block or group of blocks as a reusable block.
- Learn how to manage existing reusable blocks from the block editor.
- Learn how to access and use the reusable block list view.
- Learn how to convert a reusable block back to regular blocks in the block editor.
- Learn how to insert an existing reusable block into block editor content
Comprehension questions
- How does a reusable block differ from a group of blocks?
- After adding a reusable block to your content, can it be changed back to a regular block?
- Can a reusable block be created without any coding knowledge?
- How can you include multiple blocks in a reusable block?
Transcript
0:00
Welcome to this workshop, the topic will be how to create and use reusable blocks for the WordPress Block Editor. So we’ll start by defining what reusable blocks actually are. reusable block is a block or group of multiple blocks that are saved in a way that they can be managed from a central location. So you create it once. And should you ever need to change it, you can update it from one place, and anywhere that reusable block was used across your entire website will automatically update to the new content. There are some really great benefits of this for your site. So let’s talk about that. When should you use reusable blocks. One option, which is a really great one, I think is if you have social link buttons, if you have multiple authors on your site that might like to use their own social linking icons in their posts, for contacting them or finding out more information about them. By using a social links block, and saving an S is a reusable block, you can use it in lots of places. And if anything needs to be changed, adding or removing a social media outlet, for example, it’s very easy to do from the reusable blocks. So if you have two or more authors, and you’d like to have allowed them to have their own links, this would be a great way to do that. Another is an author biography. So again, if you’re multiple authors on your site, and you want to include biographical information, maybe an image in a way that that can easily be updated. That is something else that you can do with reusable blocks. Now the both of these features can easily be done with many plugins. But by using this method, you can do it with only WordPress core and no plugins are necessary. And you also have the added benefit of picking and choosing very easily when this information is actually shared out to the content. Another option would be if you have a sponsor message for certain posts, you can include that content with a reusable block only when you need it and where you need it. Which could vary from one sponsor to the next perhaps. And should you need to remove that sponsored message from your content across your entire site that’s very easy to do by just removing the blocks from that reusable block. And it would basically collapse down to an empty space. If you have sales pages calls to action are a great way to maybe feature a specific promotion on your site, or an opt in of some kind that you want to promote across your site.
That could not be a limited time thing. Maybe you only want it to be available for a short time. Another thing you could do also for sales pages or other pages is pricing table. So you might build multiple landing pages for your sales process. And for different purposes, but you’d like to use same pricing table across multiples. If you use reusable blocks for this, then you would then be able to go ahead and update your offering. Change the pricing change to features change the levels all from one convenient place. Another way you can use reusable blocks would be for frequently used blocks of text. So if you have text that you use over and over again on your site, you can use a reusable block to add that in and then have the added benefit of being able to edit it easily. And forms if you have forms on your site, you might want to be able to swap them out, change them up. And you can use reusable blocks to do this as well. So let’s go ahead and jump over to what it takes to create and manage reusable blocks. Alright, so what we have here is just a basic WordPress site. And I’ve just gone ahead and added some dummy content here just for demonstration purposes. And what I’m going to do is I’m going to say that I’m going to edit this first post, and it’s already got some content in it. And what I want to do is at the end of this post, I’m going to go ahead and add what’s going to become my reusable block. So the first thing I’m going to do is add a group. In order to create a reusable block from a post or a page, you that contains multiple blocks. You need some kind of container block and a group block is a good option for this. And in this block, what I’m going to do is create an author bio area so I could actually maybe even apply a style to this right now. So it gives me some definition of what I’m looking at. And I’m going to start with a heading, I’m going to say, we’ll say this is Jane doe’s author information. And the next thing I’m going to do is add a media and text block. This is also a container block, it can contain multiple blocks. And I’m going to go ahead and use an image that’s already in my Media Library. And I’m going to add some BIOS stuff. Okay, so there I have the basics. And then the last thing I’m going to do is go ahead and add that social icons, block here and add a few things. We’ll just keep this simple and maybe add Twitter.
6:01
And maybe, let’s say LinkedIn. Okay, and we’re going to go ahead and add a link to each of these, I’m just going to make these blank links just to get them to show up just for demo purposes. And then I think what I’d like to do is make this to be wider. So I’m going to make this full width. And then I think what I’ll do is go ahead and center the text of the, the author. Okay, so there I have something I’m pretty happy with. Let’s see, is there anything else I want to do? We don’t need to do that. Okay, that looks pretty good, I think. Maybe we’ll align that to the top, make some spacing work a little bit better. Okay, so what we’re going to do now is take this group of blocks that we’ve just created, and convert it to be a reusable block right now, this is only on the single post wouldn’t be available to us anywhere else on WordPress. So all we have to do to change that is go over here to the outline on the top of the screen, and choose our group. So by choosing the group block, that’s going to basically select everything here. And the menu, or the little menu that pops up for that is going to be for the group. So we’re going to use the Options button here. And we’re going to use the Add to reusable blocks option. Once you’ve done that, it’s going to look different, but it will still display on the front end the same way. So we’re going to give this a title. Once you’ve converted it to a reusable block it calls it untitled reusable block. If we go to the sidebar here, we can give it a name. We can call that Jane Doe bio. And now if we click Update, it’s going to ask us what we want to update do we want to update the post or the reusable block. I’m going to actually do both in this case because I want this reusable block to stay. Alright.
Alright, so now once we have that done, if we go over to the primary inserter and select that and then we can click on the reuse new tab called reusable. Once the first reusable block has been saved to the site, this will appear. We can see the reusable blocks that have been saved to the site from here. And also we have a manage all reusable blocks link. There are a couple of other ways to access this link. You can select the reusable block here and go to Manage reusable blocks. You also have the option of using the main options for the poster page. And click on manage all reusable blocks are three ways to get to the same place. So we go to reusable, manage all reusable box. I’m going to go ahead and go out of that. And now we see here we have Jane Doe bio. Now if we go in hearing edit this, we can edit it just like a regular post. We can add more icons here. We can change the text we can change the image and that would update at any Where this is used. So let’s go ahead and look at what that looks like on another post. So we’ll go ahead and go out to posts again, we’ll add a different post. And let’s say in this case, we wanted our author bio to be at the top. So I’m going to go ahead and and insert it right here. Now if I start with a slash command, that’s one way to add blocks. And I know that it’s changing though bio, I can search for it by just starting to type in the title. And then inserter. Okay, and then if I update this post, I can preview it in a new tab. And here we have our bio, and then underneath it is the content for the post. Now, if I go back out and go to our post that we hit up, edited, you can see this file is down here at the bottom. That is how to work with reusable blocks. One other thing you can do is go ahead and go back to where you manage the reusable blocks. Go ahead and do that from over here this time.
11:28
And let’s go ahead and say we want to add a new social icon. We’re going to add GitHub. Okay, I’ll click on that. I’ll add that in. And let’s say we decided we didn’t really like the style of this. So we wanted to go with a grayscale, and maybe align it to the center. And now we can update this reusable block. And if we go back over to the posts that we have saved before, you can see this one here. If we reload that, then you can see that the icons changed. And everything has everything else stayed the same. And if we go back to the other posts that we had created that has this reusable block in it and a different location. As you can see, it’s also changed here.
Alright, let’s say you wanted to, you have a reusable block, and you don’t want it to be reusable anymore, you can actually convert from reusable blocks to regular blocks. So let’s go ahead and take a look at what that looks like. So let’s say if we have this post here, where the where the block is at the top, we can edit this post. Okay, we can select the reusable block. And we can use the options. Actually, this little icon here used to be in the options, it’s been moved here convert to regular blocks. And now you can see we still have this content, it went back to the full width. and here we can say new. And if we update this, we can go ahead and go back to the post again. And see that it says new here. Now if we go back to the other posts that we had this one here that was using the reusable block, this one has not changed. So now they’ve been decoupled from one another one post is still using the reusable block version. The other one is just using regular blocks that was based on the reusable block. So that is the basics of reusable blocks. And I hope that you find this content to be really useful. Thanks
