Unknown: Welcome to this workshop, thetopic will be how to create and use
reusable blocks for the WordPress BlockEditor. So we'll start by defining what
reusable blocks actually are. reusableblock is a block or group of multiple
blocks that are saved in a way that theycan be managed from a central location.
So you create it once. And should youever need to change it, you can update
it from one place, and anywhere thatreusable block was used across your
entire website will automatically updateto the new content. There are some
really great benefits of this for yoursite. So let's talk about that. When
should you use reusable blocks. Oneoption, which is a really great one, I
think is if you have social linkbuttons, if you have multiple authors on
your site that might like to use theirown social linking icons in their posts,
for contacting them or finding out moreinformation about them. By using a
social links block, and saving an S is areusable block, you can use it in lots
of places. And if anything needs to bechanged, adding or removing a social
media outlet, for example, it's veryeasy to do from the reusable blocks. So
if you have two or more authors, andyou'd like to have allowed them to have
their own links, this would be a greatway to do that. Another is an author
biography. So again, if you're multipleauthors on your site, and you want to
include biographical information, maybean image in a way that that can easily
be updated. That is something else thatyou can do with reusable blocks. Now the
both of these features can easily bedone with many plugins. But by using
this method, you can do it with onlyWordPress core and no plugins are
necessary. And you also have the addedbenefit of picking and choosing very
easily when this information is actuallyshared out to the content. Another
option would be if you have a sponsormessage for certain posts, you can
include that content with a reusableblock only when you need it and where
you need it. Which could vary from onesponsor to the next perhaps. And should
you need to remove that sponsoredmessage from your content across your
entire site that's very easy to do byjust removing the blocks from that
reusable block. And it would basicallycollapse down to an empty space. If you
have sales pages calls to action are agreat way to maybe feature a specific
promotion on your site, or an opt in ofsome kind that you want to promote
across your site. That could not be alimited 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 pricingtable. So you might build multiple
landing pages for your sales process.And for different purposes, but you'd
like to use same pricing table acrossmultiples. If you use reusable blocks
for this, then you would then be able togo ahead and update your offering.
Change the pricing change to featureschange the levels all from one
convenient place. Another way you canuse reusable blocks would be for
frequently used blocks of text. So ifyou have text that you use over and over
again on your site, you can use areusable block to add that in and then
have the added benefit of being able toedit it easily. And forms if you have
forms on your site, you might want to beable to swap them out, change them up.
And you can use reusable blocks to dothis as well. So let's go ahead and jump
over to what it takes to create andmanage reusable blocks. Alright, so what
we have here is just a basic WordPresssite. And I've just gone ahead and added
some dummy content here just fordemonstration purposes. And what I'm
going to do is I'm going to say that I'mgoing to edit this first post, and it's
already got some content in it. And whatI want to do is at the end of this post,
I'm going to go ahead and add what'sgoing to become my reusable block. So
the first thing I'm going to do is add agroup. In order to create a reusable
block from a post or a page, you thatcontains multiple blocks. You need some
kind of container block and a groupblock is a good option for this. And in
this block, what I'm going to do iscreate an author bio area so I could
actually maybe even apply a style tothis right now. So it gives me some
definition of what I'm looking at. AndI'm going to start with a heading, I'm
going to say, we'll say this is Janedoe's author information. And the next
thing I'm going to do is add a media andtext 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 MediaLibrary. 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.
And maybe, let's say LinkedIn. Okay, andwe're going to go ahead and add a link
to each of these, I'm just going to makethese blank links just to get them to
show up just for demo purposes. And thenI think what I'd like to do is make this
to be wider. So I'm going to make thisfull width. And then I think what I'll
do is go ahead and center the text ofthe, the author. Okay, so there I have
something I'm pretty happy with. Let'ssee, is there anything else I want to
do? We don't need to do that. Okay, thatlooks pretty good, I think. Maybe we'll
align that to the top, make some spacingwork a little bit better. Okay, so what
we're going to do now is take this groupof blocks that we've just created, and
convert it to be a reusable block rightnow, this is only on the single post
wouldn't be available to us anywhereelse on WordPress. So all we have to do
to change that is go over here to theoutline on the top of the screen, and
choose our group. So by choosing thegroup block, that's going to basically
select everything here. And the menu, orthe little menu that pops up for that is
going to be for the group. So we'regoing to use the Options button here.
And we're going to use the Add toreusable blocks option. Once you've done
that, it's going to look different, butit will still display on the front end
the same way. So we're going to givethis a title. Once you've converted it
to a reusable block it calls it untitledreusable block. If we go to the sidebar
here, we can give it a name. We can callthat Jane Doe bio. And now if we click
Update, it's going to ask us what wewant to update do we want to update the
post or the reusable block. I'm going toactually 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 onthe reuse new tab called reusable. Once
the first reusable block has been savedto the site, this will appear. We can
see the reusable blocks that have beensaved 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 thereusable block here and go to Manage
reusable blocks. You also have theoption of using the main options for the
poster page. And click on manage allreusable 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 seehere we have Jane Doe bio. Now if we go
in hearing edit this, we can edit itjust like a regular post. We can add
more icons here. We can change the textwe can change the image and that would
update at any Where this is used. Solet's go ahead and look at what that
looks like on another post. So we'll goahead and go out to posts again, we'll
add a different post. And let's say inthis case, we wanted our author bio to
be at the top. So I'm going to go aheadand and insert it right here. Now if I
start with a slash command, that's oneway to add blocks. And I know that it's
changing though bio, I can search for itby just starting to type in the title.
And then inserter. Okay, and then if Iupdate this post, I can preview it in a
new tab. And here we have our bio, andthen underneath it is the content for
the post. Now, if I go back out and goto our post that we hit up, edited, you
can see this file is down here at thebottom. That is how to work with
reusable blocks. One other thing you cando is go ahead and go back to where you
manage the reusable blocks. Go ahead anddo that from over here this time.
edit this.
And let's go ahead and say we want toadd 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 styleof this. So we wanted to go with a
grayscale, and maybe align it to thecenter. And now we can update this
reusable block. And if we go back overto the posts that we have saved before,
you can see this one here. If we reloadthat, then you can see that the icons
changed. And everything has everythingelse stayed the same. And if we go back
to the other posts that we had createdthat has this reusable block in it and a
different location. As you can see, it'salso changed here.
Alright, let's say you wanted to, youhave a reusable block, and you don't
want it to be reusable anymore, you canactually convert from reusable blocks to
regular blocks. So let's go ahead andtake 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 canselect the reusable block. And we can
use the options. Actually, this littleicon here used to be in the options,
it's been moved here convert to regularblocks. And now you can see we still
have this content, it went back to thefull width. and here we can say new. And
if we update this, we can go ahead andgo back to the post again. And see that
it says new here. Now if we go back tothe 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 postis still using the reusable block
version. The other one is just usingregular blocks that was based on the
reusable block. So that is the basics ofreusable blocks. And I hope that you
find this content to be really useful.Thanks