WordPress Blocks: The New Editor Of WordPress EXPLAINED


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.

Posts Tagged with…

Reader Comments

  1. ThemeIsle: WordPress Tutorials & Reviews

    Are you comfortable using the new blocks editor?

    Do you feel like something is missing or it's not working as it should be?

  2. DTX 12

    Themelsle, I originally found this update confusing until, you have made a good tutorial about how to use the new blocks editor which is helpful but, my problem is my WP Zoom is installed and activated but I can't use WP Zoom on my images because it wouldn't show on this new editor which makes no sense to me. Please, tell me what I need to do to help find that option.

  3. Dave Renfroe

    Thanks for the great video. Is there a way of "re-sizing" the paragraph blocks, similar to resizing the images? I would like to easily layout the pages using different sized text next to (right or left) images. It would be great if you can just adjust the sizes of your blocks and then move them around where you want them. Does the editor window look exactly like the finished page?

  4. mefugoenmicarro

    Thanks for sharing, Neve is great theme πŸ™‚
    Do you have some carousel plugin to recommend that works with this block system? I need to add one in every post

  5. Bob Builder

    i dont like blocks. Options are missing ! Change color, font size, add image. Communist blocks. thats why it sucks . Made by communist.

  6. Curtis Eisenbeis

    I just cant figure out how to move my dang blocks to another part of the page. The six dots are not working right. When you click and drag it somewhere else, then let go of the drag, it will just put it right back to where it was. I NEED THE FREEDOM OF PUTTING MY TEXT WHERE AND EXACTLY WHERE I WANT IT. WITHOUT THIS FEATURE YOU ARE SETTLING I DONT TO SETTLE. MOVING BLOCKS EFFECTIVELY (I AM REFERING TO TEXT BLOCKS) IS EXTREAMLY IMPORTANT FOR THE CREATIVITY OF YOUR WEBSITE. And what is it will blog post that the website is so obsessed with, I dont want a blog website. Sure you can kinda work around it but it appears that it was only originally designed for blogs and blogs only. With a few feature that allow you to work around it.

  7. Viviane B

    how do I connect my "contact me" page now that the menu is missing ? I don't see the Form option under page. This new wordpress appearance is driving me crazy!

  8. White Dove

    Hi there, fantastic tutorial as always, I have learnt alot. I have practically made a full wordpress website by using your tutorial. In 48 hours I already have a good looking site. I chose the Hestia layout it seems easy to use.

    One thing that is driving me crazy, I cant figure it out. HOW DO YOU HIGHLIGHT TEXT ON A a PAGE DOCUMENT USING THIS NEW LAYOUT. I have the same layout you are showing, document and block on the right side, I just want to highlight some text.

    Please advise, is there a plugin, or if anyone can comment would be much appreciated Thanks.

Write a Comment

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