How to Use the WordPress Block Editor – A Simple 2022 Guide

Oh boy, WordPress Block Editor. Not another new thing to learn! Which is how I felt back in 2019 when WordPress introduced the updated version of Block Editor. Nevertheless, I just shook my head and rolled my eyes. As a result, Block Editor in WordPress turned out to be incredible. In addition, since I love it so much, I want to teach you how to use the WordPress Block Editor.

First, let’s go over a bit of history and how we got to the Block Editor. Before the block editor, WordPress introduced us to Gutenburg classic editor; consequently, the classic editor was a good upgrade, but it wasn’t for me. I used Elementor as a page builder and did not find the classic editor a good comparison. Be that as it may, I wanted beautiful responsive landing pages, and the classic editor fell short.

So I continued to use my page builder and installed a plugin to disable the classic editor, but in 2019, WordPress stepped up and expanded the Block Editor, which exceeded my current page builder. As a result, I had to learn a whole new way of creating posts and pages regardless I still put off learning it for a year or more.

Generally speaking, when I finally buckled down and learned all WordPress Block Editor had to offer, I was pleasantly surprised. For this reason, I will teach you the ins and outs of using the block editor and all of the features to remove the fear from your world.

In view of this we will start with a basic overview of Block Editor and the blocks before we learn how to use WordPress Block editor, in the hope that you become more familiar with your options.

WordPress Classic Editor

Here is a screenshot of what WordPress Classic Editor used to look like before the upgrade to Block Editor. Comparatively speaking, it wasn’t very user-friendly and was challenging to design a page or post. Not to mention, the design was basic if you didn’t know coding.

WordPress Block Editor

Then along came WordPress Block Editor, which we will learn to use. In this image on the right, you can easily click on the block to customize each section to suit your design needs.

Where To Begin

An Overview Of The Blocks

With the Blocks, you can add content elements with each separate block; in like manner, you can create content, headers, lists, images, codes, quotes and arrange each into groups. As a result, you no longer need a separate plugin to set up tables. In addition, there is a table block for you to design a table right in your post.

I set up a test website within Wealthy Affiliate to teach you how to use Block Editor, consequently, you will see the “Hello World” in some of these screenshots.

You have 80+ blocks to choose from inside the WordPress Block Editor, therefore, we will go over the categories and how to use them as we move forward.

Block Categories

Most Used Blocks

The first ten blocks are the most used, for this reason they are the blocks that most used create a post or page.

Media Blocks

In this case, media blocks allow you to add different images with text, audio, links, and design with a cover image.

Design Blocks

Design blocks do what they say, you can design posts and pages, with this in mind, you can use columns, groups, separate blocks, page breaks and add different items on display.

Widget Blocks

WordPress regularly updates the block editor so, the widget blocks are relatively new. As a matter of fact, you can insert a widget anywhere on a page or post to increase page time or capture the interest and engagement of your followers.

Theme Blocks

Block Editor set up blocks to insert into your posts, in the event, your theme does not allow you to customize and display some of these items.

Embed Blocks

You have the option of 30 embedded blocks, which will customize almost anything from A-Z. Do you want a YouTube video or maybe a Tik Tok video? In either case, your choices are practically unlimited.

How To Use The WordPress Block Editor

WordPress allows you to organize your content on posts or pages with Block Editor. With this in mind, we will begin with the top bar of your new post in the block editor and go over the functions you have at your fingertips.

Individual Block Editor

Above all, with each block, you have a bar that allows you to edit that block. The following three images show what you can do with each tab, but the photos are a bit small, so you can go over to your website and see each one in a larger view.

Steps To Use The WordPress Block Editor

The blocks are simple to use; however, I gave examples and many images for the purpose of knowing how it all works. In addition, I will list the steps, coupled with a video at the bottom to help you navigate the blocks.

1. Login to your dashboard
2. Go to all posts and add a new post
3. Your first block is the title – add a title
4. The second block is always the default paragraph
5. Add a paragraph or click on the black + sign in the lower right corner to open blocks.
6. Then click on the “browse all” black bar at the bottom
7. All of the blocks will open to the left of your post
8. Find the one you want and click on it or drag it into your post or page
9. Follow the steps for the block you are using; for example, it will direct you to upload to the media library or upload from your computer if it is an image.
10. Once the image is loaded, you can customize the appearance by clicking on the black box (top right) with the white toggle wheel. This step will open a column, Post/Block.
11. Click on “block.” scroll down to use the tools for that block.
12. Repeat these steps for each block you choose.

Alternative Methods To Add Blocks

1. In the steps above, you searched the blocks that populated on the left. (see the third image under “Where To Begin.”)
   First option, you can type the name of a block in the block section, as a result, the block will pop up, and you can click on it to add it to your post or page.
2. Second option – you can click on the + sign in the blue box located in the upper left top bar, which will pull up all of the bocks. (see the image under “How To Use The WordPress Block Editor.”)
3. Third option – click on the + sign in the middle of the block that pops up with the black box.

Ways To Customize The Blocks

1. As mentioned above, you can customize each block with the toggle wheel to the right in the top bar. (see image under “How To Use The WordPress Block Editor.”)
2. In addition, you can also use the column bar that opens when you click on the block you added. (see the three images under “Individual Block Editor.”)

GenerateBlocks Pro

GenerateBlocks Pro is a WordPress extension designed by Tom Usborne, with this in mind, it is an excellent way to extend the designing power of WordPress Block Editor. Furthermore, when used together you can create stunning landing pages and posts that will engage and entice your followers.

If you are looking for a theme that is lightweight and integrates seamlessly with WordPress Blocks Editor Tom also designed GeneratePress Premium. Not to mention, your options with his theme are endless.

Overview Video On The WordPress Tutorial

Summary

I attempted to cover all aspects of how to use WordPress Block Editor, In the hope that, once you play around with the blocks, you will understand how to use them and how incredible they are to create a fantastic post or page. With this in mind, if you need further assistance, please leave a comment below with your question.