How to add blocks in the WordPress block editor | Block editor training

How to add blocks in the WordPress block editor | Block editor training


In this lesson, we will explore
how the block editor works in practice. “In practice”, means
that we are going to write a post. And we are going
to use blocks to build it. Some blocks are essential for every kind of
post, like paragraphs, headings and images. Others are more specific,
like a list or a pullquote. We won’t tackle all available blocks
in the video, because that would take ages. If you are looking for information
on a specific block, we advise you to check
the reading materials. One more thing before we start. In these screencasts, we are using
the latest version of WordPress, and the default TwentyTwenty theme. If you are using another theme, what you see on this screen may be
different than what you see on yours. Still, the blocks and their settings generally
work in the same way, so no worries. Let’s begin. In this post-editing screen, the first block,
which is there by default, is the title block. That’s where I will start, and I will add my title here –
“Yoast Diversity Fund”. Right under the title, I have the option
to start typing or add a block. If I start typing
(or paste a text in this case), that means that I will automatically use
the paragraph block. Naturally, you use the paragraph block
when you want to add text. That is exactly what I need right now. I have my text right here,
and I will copy it and paste it. To continue building this post,
I will need to keep adding new blocks. Each paragraph of the text
will be in a new block. And that is also true
for any new images, videos, or anything I want to add to this post. It will all need to go in its own block. So that’s what I’ll do – l’ll add my second
paragraph in a separate block. Now, I would like to add an image
between these two paragraph blocks. So far, I was just adding text without
choosing which block I wanted to use, because the paragraph block
was there by default. If I want to do something
other than writing some text, I will need to find and add
the appropriate block. In this case, I need the image block. Because I want to add the image
between the two paragraph-blocks, I need to hover my mouse
over the middle spot in one of the blocks until I see the plus sign appear. When I click on it, I get the list
of all the available blocks. Under the “Most Used” blocks heading,
I see that there is an Image block. If I want to add it,
I just need to click on it. But, right now, I want to show you
an even quicker way to add a block. I will click on the first paragraph,
put my cursor at the end of the text, and then press enter. To find the image block, all I need to do is type in a forward slash
followed by the block name. Like this – forward slash image. I see different options
appear in a drop down box. I need the image block
and so I select that one. The image block is now in my post,
but I still have some decisions to make. That is, I need to determine
how to add the image. I can upload it; add it from the media
library, or insert an image from URL. In this case, I want to add
an image from my computer, so I am going to go
with the upload option. I click the Upload button; I find and select
the image from my computer, and I click open to add it to the post. As you can see, the image block
automatically comes with a caption field below the image. Let’s see, I’ll write something
like “Yoast cares for diversity”. Now, the next thing I want to add
is a subheading. Again, I will need a block for that:
the heading block. So, I will type a forward slash and then
“heading” to find the right block. And now I can add my text:
“Learn more from Joost de Valk!” Now there is a video on YouTube with Joost, our CPO (Chief Product Officer) and founder, where he tells more
about the diversity fund. So let’s add it to the post. You probably know what’s coming,
yep, the forward-slash – and then video. As you can see,
there’s more than one option. I can pick Video,
but I can also pick YouTube. Both options work fine. Let’s check them both out
to see whether things work differently. Let’s start with the video block. Just like with the image block,
there’s three ways of adding your video: you can upload a video file
from your computer; select one from the media library; or insert from the URL. Since I want to add a video from YouTube,
I will need to “insert from URL” which means that I will paste
the URL of the video in this input field. Let’s try
the YouTube block now. I will click on the plus icon
and look for the embeds heading. Here they are. If you want to add content
from any of these platforms, you can use one of the blocks
available here. There are quite a lot, right? Right now I need YouTube. So I select it. And now that it’s in my post,
I can paste the link to embed the video. The result is the same as the other video. The only difference between these blocks
is the way I added them. Other than that, they are exactly the same. But hey, now I have two identical blocks
and I don’t want that. How can I delete one of them? No problem.
Just select the block you want to get rid of. Click the three dots in the toolbar
and click “Remove Block”. So what’s next? Yes, I need to inform my readers
about eligibility and how to apply. So let’s do that. I add a new heading block,
and add the title (“Who can apply?”). There is a list of criteria
people need to fulfill to apply and I want to show them in a list format. So I need a list block. Let’s add that with forward slash
and type in “list”. And add the text here. And I’ll now repeat
this same thing for once more. To round it up, I could add a nice quote. Maybe it will inspire people to apply. But how do I do that? Our friend the forward-slash
has been very useful so far. But there is also another way
to add blocks. So let’s see. I will click on the plus within the post. You will notice the plus
is also in the toolbar. The difference between these two is that,
if you use the toolbar plus, you can also see a preview of the blocks. So let’s go with that. Look, there are so many blocks
to choose from. And they are divided
into different tabs or headings. So far, we’ve used many of the common blocks
and I showed you the embeds. Let’s see what the formatting tab holds. There is a pullquote block here. If I hover over it, I can also see a preview. What do you know,
that’s exactly what I need. I select the block,
and it now is in my post. I add my text here… and add Joost’s name in the citation. Of course, I want to let people
easily apply for this fund. So I need a button. Let’s go to the layout elements,
where the button block lives. Click it, to add it to the post. And now I can add the text I want to have
displayed on the button, something like – Apply now. Let’s also get the link to the application
and paste it here in the input field. In WordPress you can also add
some widgets to your posts. You can see which ones under the Widgets
heading of the blocks list. Right now, I don’t need any of these,
so I will not add anything. But, it’s good to know
that you have those options as well. So now you know that there are
many blocks you can use, depending on what you need. And the best part is
that it’s super easy and super quick. I have to admit this post
doesn’t look perfect yet. But, that’s alright. Because there are plenty of ways
I can edit it and make it even better, which you will see
in the following videos.


3 thoughts on “How to add blocks in the WordPress block editor | Block editor training

  1. I see you inserted your SJW narrative. Brainwashing the masses. I would hope most are onto your ways. Other than that, good tutorial.

  2. You say it’s super easy and super quick. Yes, it’s easy but not super quick. Before blocks on could’ve inserted your entire text…all paragraphs and lists as you had them in your word doc, then, with the tool bar formatted in a few seconds. Blocks makes you do it one paragraph at a time. That is not super quick.

Leave a Reply

Your email address will not be published. Required fields are marked *