7 days of unlimited WordPress themes, plugins & graphics - for free!* Unlimited asset downloads! Start 7-Day Free Trial
FREELessons: 6Length: 37 minutes

Next lesson playing in 5 seconds

Cancel
  • Overview
  • Transcript

3.2 Creating and Using Shared Blocks

In this post, I'll show you how to duplicate content in an easy-to-maintain way with shared blocks.

1.Introduction
1 lesson, 00:41

1.1
Introduction
00:41

2.Working With Gutenberg Blocks
2 lessons, 16:23

2.1
Adding Text Blocks
06:29

2.2
Adding Image Blocks
09:54

3.Going Further With Blocks
2 lessons, 17:53

3.1
Advanced Block Editing
10:07

3.2
Creating and Using Shared Blocks
07:46

4.Conclusion
1 lesson, 02:29

4.1
Conclusion
02:29


3.2 Creating and Using Shared Blocks

Hello, and welcome back to this Tuts+ course on WordPress Gutenberg. In this part of the course, I'm gonna show you how to create duplicate and shared blocks. And you can use these to create content that you can use wherever you want in your site without having to create it more than once. So first let's have a look at the simpler one, which is the duplicate block. So here's my paragraph block that I already added. And if I wanted to duplicate that, all I would do is click on the More Options ellipsis over here, and then click Duplicate. Now you might be thinking, why on earth would I want two paragraphs that are exactly the same? But sometimes, you might have two paragraphs or two lists that are quite similar, but you can just edit. So if I wanted to create something similar to some content I had already added, I could duplicate it and then edit it. So I'm gonna edit that. This is my second paragraph. So that's how you create a duplicate block in Gutenberg. And you can also do it with any other block. So for example, if you've gone to quite a bit of trouble with the settings for a block, you could duplicate it and then add a new one with different content. So here's my gallery. I can duplicate that if I want, go into the second one, edit it, and change the images. So I could take out these images, and I can add alternative ones. So here you can see there's some new images. So that gallery will work in just the same way as the first gallery. You can see it's taking a moment to load all those images in. So that's a way of creating another block that is set up in the same way as your first block, but maybe not with the same content. But what about shared blocks? Now shared blocks are one of my favorite features of Gutenberg. So I'm gonna create a new block after this paragraph by hitting Return. And I'm gonna use this as a call to action, so I'll make my text bold. I could, if I wanted to, add a CSS class, and I will. I'll add cta as a CSS class. Now the theme I'm using, which is the default theme, doesn't have that in its stylesheet. So you would have to add that in your theme or in a child theme of your theme if you're using a third-party theme. And you could very easily add that, and it means that every block that you create with that class will use the styling that you add. So now let's take a look at the HTML for that. So you can see that it sets up . So it's added that as well as the tag. So let's go back to the visual editor. And what I can do now is instead of duplicating this, I'll convert it to a shared block. And then what I need to do is give it a name, Making sure I type it correctly. So I'll call that, Mailing list CTA. I'll save it, and then I can add that anywhere I want in my post. So let's add it right down at the bottom. Instead of just hitting Return and adding a new paragraph, I click the Add block button up here And then I select Shared. So I've got one shared block at the moment. I click on that, and it simply adds it in. So if I want to edit that block now, I would click the Edit button. And I can change its name if I want, or I can change the content. And then I click Save to save my changes. And that changes the shared block everywhere it appears. So you can see up here, I've got fab new mailing list instead of mailing list. So if you want to create a version of your shared block and make it different, what you would do instead is you'd add your shared block in the same way as we already have. And then you convert it to a regular block. And that means, if you edit it, It just changes that instance, it doesn't change this one up here. So that is no longer the shared block. It's a standalone regular block that you've created using the shared block as a template, if you will. So that's another way of creating content where there will be a core to that content that is gonna be consistent across lots of posts, but where the specifics of that block in an individual post might be different. So you can use this to create content that will be exactly the same across your site and that will be edited everywhere if you edit it once, or to create that's based on existing blocks that you already created. Now I think this is really powerful when it comes to creating links, calls to action, advertising marketing messages, that sort of thing, because you can create as many shared blocks as you want. And then you can just pop them into your post wherever you want them to be without having to go to the trouble of either opening another post and copying and pasting or remembering what it was you'd normally type into that. In my case, I often do this by using a hook in my post. For example, in my themes that I use that I write for myself, I've got a hook at the end of my content. And I tend to add a call to action there, which I hook to that action hook and then displays on every single post. Now the disadvantage of that, if you're not a coder, is that you've got to write the code. And also it means that it can only be displayed at the bottom of the content. But with this shared block, you can add it wherever you want in your content. Now for me, that is my single favorite feature of Gutenberg. And I think it could be really powerful and save you a whole load of time. So you can convert any block that you want into a shared block. You simply click on the ellipsis over the right-hand side, and you click on Convert to Shared Block. And to access your shared blocks, you simply go down here into Shared, and then you can find them here. Now to add a shared block, you would do it in a post. So another option you have is creating all your shared blocks in a post that you don't actually publish, that you just keep as a draft. And then adding those shared blocks into your content once you've done it. So that gives you a post that you can go to to edit any of your shared blocks if you want to, and then know that that will be distributed throughout your entire site. So now we've created that shared block and added it to this post. Let's update the post and add a new post. So I'll add in a post title. And I'm gonna add a shared block here by clicking Add block and then Shared, and then selecting my mailing list CTA block. And then I can add whatever I want to underneath. So you can see that I've added that at the top of my post, and I can do that in all my posts if I wanted to. So that gives you a really simple way of creating content that you can use across your site. So that's how you create duplicate and shared blocks in Gutenberg. In the next and the final part of the course, we'll wrap up and recap on what you've learned during the course. See you next time, and thanks for watching

Back to the top