How to group and reuse blocks in the WordPress block editor | Block editor training

March 26, 2020

Hi, good to see you again! In this screencast, we’re going to explore
two functionalities of the block editor that prove to be very useful
if you use them together: grouping and reusing blocks. I will start by explaining why
and when these options are so very useful and, of course, I will also show you
how it works in practice. Because that’s why
you’re watching this screencast, right? Let’s take a look at the button in our post. There it is. It would be very well possible that I want
to use this button in various future posts. Wouldn’t it be nice if I can use
the same button everywhere, instead of creating a new one
over and over again? Luckily, in the block editor, you can use
the Reusable blocks option, to save a block when you want to reuse it. This is how it works. I click on the three vertical dots
at the end of the toolbar and select the Add to Reusable Blocks
option from the dropdown menu. This opens up an input field
above the block, which allows me
to give the block a name. Let’s name it “Yoast apply button”. And click save. Good. Now, where can I find this block
when I want to reuse it? Well, in the blocks list, of course. Let’s add a new block, scroll down,
and there it is at the bottom of the list. There is even a preview of it
when you hover over it. Super convenient! Now, this button is just one –
relatively simple – block. But what if I wanted to reuse
not only this button, but also this heading, this paragraph
and this list in future posts? Should I save all blocks
as reusable blocks separately or is there a more efficient way
to reuse this complete section? Yes, there is a more efficient way. You can group them. If you want to create a group block
from scratch, you just add a new block. Scroll down to the Layout Elements
and there you will find the Group block. Now you can select which block you want
to add first in your group block. For example, a heading. If you press Enter, you can add a new block,
which is also in this group block. So, I will add a paragraph. Etcetera, you get the idea. Now, these blocks are connected. And they stay connected,
even if you click somewhere else. Remember that we selected blocks to move
them all at once in the previous video? This is not the same, these blocks are now
really connected into a group block. Blocks in blocks, so to speak. However, the moving part works the same. You can move group blocks up and down
and all the nested blocks move along. Now, this is how you create
a group block from scratch. But what if you have already created a post
with individual blocks and THEN decide that you want
to group some of them? Can you do that? Yes, you can. Let’s go back to the four individual blocks
I’ve created earlier. Let’s click the first block, the heading, and transform it – you know how that works
– into a group block. Now, you can see that this heading
is part of a group. Another way to do this is click the three
dots and then click “Group”. OK, now we can drag the second block
into this group block. See? Now, the paragraph
is part of the group as well. Works the same
for the list and the button. If you’re not sure whether an individual
block is really included, just click over here
or between the dotted line and the solid line
to select the group block. And to select a block in a block, you just
click the block you want to edit or move. You can also ungroup by clicking
the three dots and then “Ungroup”. However, this all started with a question
about reusing blocks. The question was: “Should I save all blocks
as reusable blocks separately or is there a more efficient way
to reuse this complete section?” The answer is: “Yes, you can reuse
a complete section by grouping blocks and then save the group block
as a reusable block.” Let’s do that. Add to Reusable Blocks, then give it a name: “Apply for Yoast Diversity Fund”. Save. Awesome. In a way, it’s like creating a small template
that you can reuse for every new post. OK, is there anything else
you need to know? Yes, there is one last yet essential thing
you need to know about reusable blocks and that has to do with editing. Editing a reusable block in one place
will change this block everywhere. Let me show you what I mean. Here, let’s create a test post with the
reusable button block I’ve just made. Check out what happens
when I try to edit the reusable block here. I will click edit, and then I change
the color of the button. Click Save. Now, I go back
to our Diversity Fund post. And look what happened. The color of the button
changed here as well. Even if I had already published this post, and then edited
the reusable block in another post, the block would still change everywhere. In addition, the reusable block you can find
in the blocks list is also edited according to the latest version. So better keep this in mind if you want
to avoid any unwanted surprises. Now what if you don’t want
the block to change in all posts? Sometimes, you just want to make
a small edit for one specific post. If that’s what you want, then you should
convert your reusable block into a regular block – before you edit it. So, I select the reusable block,
click on the three dots in the toolbar, and select “convert to regular block.” Once it is regular,
you can make your changes. Now, the changes
will only apply to this block. OK, one last thing before we wrap this up. You can manage all your reusable blocks
in one place. Click the reusable tab
and then click this link here. In this overview,
you can edit or delete your blocks. AND… you can export them. If you have more than one WordPress site, you can use your reusable blocks
there as well. Simply import your export file
by clicking this button. You can now use your reusable block
on your other site as well. Really cool, right!

No Comments

Leave a Reply