If you are struggling to understand how to
use blocks in the new editor of WordPress,
you are in the right place.
Today I'll explain to you how it works step
by step, and I will illustrate the editor’s
key features by walking you through what it’s
like to create a basic WordPress post, but
you can use the same approach no matter what
type of content you’re creating.
The WordPress theme I use in this video is
Neve, a super fast and featherweight theme
which works perfectly with WordPress blocks.
And even more, I will introduce you Otter,
a WordPress plugin that comes with new feature-rich
blocks to enhance your content creation experience.
First of all, I'll explain what blocks are.
Blocks are the new way in which WordPress
organizes the content inside your blog posts
and pages.
If you create a new post, for example, you’ll
see this content editing panel that’s block-based
instead of what was previously there.
Compared to its predecessor, this new block
editor is a huge upgrade.
The editing experience is distraction-free
and much more streamlined.
This is because you only see the main canvas
and no other unnecessary elements.
The first thing you’ll want to do is give
your post a title, using the dedicated field
at the top of the editor.
This works exactly the same way as it did
in the classic editor.
After that, however, things start to change.
If you hover over the area directly below
your post’s title, you’ll see a few icons.
The Plus icon lets you select WordPress blocks
and add them to your post.
On the right, there are also options to quickly
add the most commonly-used blocks – the
text, image, and gallery options.
For now, click on the Plus icon, and you’ll
see a new menu.
This menu lists out all the blocks that the
editor currently includes.
There’s a section at the top with your own
Most Used options, a number of organized categories
underneath, and even a search bar to help
you find what you need quickly.
If you have installed the Otter plugin, you
can see even more blocks here.
I'll show you more details later in this video,
so keep watching.
To add a block to your post, you just have
to find and click on it.
Let’s start simple, with a Paragraph block.
Place the block in your post, then move to
the next step.
You can also create a paragraph block by simply
typing in the editor, which is the default
block actually.
When you add a paragraph block, it doesn’t
look like much right away.
However, once you begin to start typing into
the field, new options will appear.
You’ll see some basic formatting settings,
such as alignment, bold, and italics.
In addition, check out the right-hand sidebar
of the editor screen.
There, you’ll find more block-specific options.
In this case, you can change the text’s
font size and color, add a drop cap, and even
include some custom CSS in the Advanced menu.
Any changes you make, either here or on the
block itself, will be immediately visible.
What I like about the new block editor is
that it lets you set a different background
color for each block.
This can be useful if you want to highlight
specific sections, for example.
Each one of the WordPress blocks on offer
comes with its own unique settings.
Furthermore, if you hit Enter, you’ll add
a new block below your paragraph block.
However, this time you can try adding an image
block by using that same plus sign.
As you can see, you’re able to upload an
image or add one that’s already in your
Media Library.
You can edit the image, alter its alignment,
and so on.
As an alternative to hitting the Plus sign,
you can type a “/” in an empty block followed
by the name of the block that you want to
insert.
Once you learn which blocks are available,
this is a much faster way to add new blocks.
There’s no doubt that you’ll use plenty
of paragraph and image blocks.
However, the blocks editor has more to offer.
There are also a number of WordPress blocks
offering new options not available in the
classic editor.
For instance, you can add a Button block to
your post.
This creates a clickable button for visitors
to interact with.
You can edit the text of the button itself,
and include the URL it will link to right below.
By selecting the icon in the top-left corner
of the block, you can change the style of
your button, and if you want to change its
position, click these icons here.
In addition, you can alter both the background
and text colors in the sidebar.
While this isn’t a huge range of options,
it’s enough to create a handy customized
button, which you can use to encourage visitors
to sign up for an email list, buy a product,
or whatever else strikes your fancy.
Want to have buttons with more options?
Use the Button Group provided by Otter and
you will be able to insert up to 5 buttons
in the same group, which you can style separately
using the Color & Border settings, here.
Just select the button you want to customize
in this drop-down and then choose the colors
and settings as needed.
Let's say we want a white button with blue
text and a blue border.
After selecting the border color, you need
to adjust its width here and its radius, if
you want that, here.
You can also change how the button looks on
hover.
Cool, right?
I also like that these buttons have the "Open
in New Tab" option here, which is not available,
for now, in the default button block.
Further down, there are three more panels
where you can set a Box Shadow for your button
which includes Shadow Properties and Hover
settings too.
This is more than enough to create interactive
buttons that look great and are made to boosts
conversions.
Once you’ve added a few blocks, you may
find yourself wanting to make some changes.
Fortunately, the new blocks editor is pretty
flexible in letting you modify your content’s
layout.
If you want to delete a block, for example,
you can select the Options icon above it,
and click on Remove Block.
By hovering over a block, you can use the
up and down arrows to rearrange your blocks at will.
Or, you can also click on the six dots between
the arrows to use drag and drop to move a block.
The blocks editor includes a number of keyboard
shortcuts that can help you quickly delete
blocks or insert new blocks.
Type Shift + Alt + H to view all the keyboard
shortcuts.
It’s also worth noting that you can create
multi-column layouts.
This is an exciting feature.
You can access it by placing a Columns block
in your post.
This lets you create up to six side-by-side
columns, and place whatever blocks you’d
like within each one.
It’s an option that offers a lot of potential
for creating unique layouts.
For example, if you want to create a pricing
section, set the number of columns to three,
and then add the pricing block offered by
Otter in each column, one by one.
To work faster, you can customize the first
pricing table, and then duplicate it and drag
it over to the next column.
Finally, it’s important to note you still
have access to post-wide, or page-wide settings as well.
In the right-hand sidebar, click on the Document
tab to find them.
The Neve WordPress theme I have installed
earlier will give you even more options here.
While with the latest default theme of WordPress,
Twenty Nineteen, you have a few options, with
Neve you can also change the post settings
here.
The container and sidebar options will adjust
the blog post structure.
For example, you can choose whether your sidebar
will be on the left side of your content,
on the right side of it, or you can create
a post with no sidebar at all.
Right below these settings, you can turn off
the blog post components such as the header,
title, featured image and footer.
Just check the box for the component you want
to turn off.
Then, if you want to adjust the width of your
content, check this box and change this parameter here.
If the sidebar it's on, you can see that the
width of your
sidebar will adapt to the percentage you set here.
One of the most powerful things about the
WordPress block editor is that you can use
plugins to add all kinds of new blocks.
In fact, some of your favorite plugins might
have already added their own blocks.
Beyond that, you can also find tons of plugins
that are solely focused on adding new blocks.
The Otter Blocks plugin mentioned earlier,
gives you blocks for more advanced sections,
where you can find a huge variety of templates
to use immediately.
You can filter them out by categories in this
drop down, and you can insert this template,
for example, into your blog post like so.
Then you can edit the content as needed.
Even more so, you can choose the Post Grid
block, the About Author block, Advanced Heading,
Button Group, Font Awesome Icons, Google Map,
Plugin Card, Sharing Icons, Pricing, and Testimonials.
Once you are done creating your blog posts,
you can choose categories and tags, add featured
image and so on.
You can even modify comment settings in the
discussion menu.
However, you won't need to save your content,
as it will autosave at frequent intervals
while you are working.
Just remember that you need to hit the publish
button twice to actually publish the blog post.
This may be not all you need to know in order
to use the WordPress blocks editor!
There is more to learn about it but you'll
get used to it and you will know each choice
on offer after experimenting with the various
blocks and available features.
Are you comfortable using the new blocks editor?
Do you feel like something is missing or it's
not working as it should be?
Let's chat about it in the comments section
below.
I'm just waiting to see what's in your mind.
If you want to learn more about WordPress,
here are some popular videos that I've published lately.
Feel free to check them out.
See you in the next one.
