Do you struggle with learning how to start an online business?

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.

classic editor screenshot2

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.

WP block editor 2

How To Switch To Block Editor

When you create a site or begin using WordPress Block Editor, consequently, you may need to change from classic editor to block editor.

Go to your dashboard, then scroll down to settings, and click on writing. (See screenshot below.) Then again, click the box for Block Editor and scroll to the bottom to click “save.”

settings to switch
switch to block editor

Where To Begin

With this in mind, let’s get started building a post in WordPress Block Editor. As can be seen, you will begin in your dashboard as you did with the classic editor and click on “add new.”

The Laura Method

add new

First you will see is the title block. For this purpose, I used the title “How To Use WordPress Block Editor.”

title block

Secondly, the first block will automatically be a paragraph, but you can change it to anything you like. Likewise, to change it, click on the little black plus box in the upper right corner. When you click the black box, you will see the blocks pop up or you can click on the blue + box in the top bar as noted in the “top bar overview” image above.

black + browse all

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.

all of the blocks

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.

Paragraph Write content

Set headings H1-H6

Bullets or numbers

A quote box

A code snippet

Switch to Classic Editor

Preformatted Spacing and tabs/style

Highlight Text

Build a special table

Poetry or Songs

most used 2

Here is an example of the preformatted block, which you can use for a text paragraph.

preformatted block2

Media Blocks

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


Multiple images

Embed Audio Player

Image with text overlay

Link a

Text beside media

embed from media library

media blocks 2

Additionally, I have added an example of a “cover image.”

cover image2

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.


rows side
by side

Group blocks together

excerpt with “read more.”

Page Break
Separate content

Switch to Classic Editor

Break up ideas

Site Logo
Display your logo

Site tagline
A line to describe site

Site Title
Site title anywhere

Archive Title
Queried archive title

Display post categories

Post tags
List-post tags

blocks design

In this case, I used columns with 50% for each one and then placed a spacer above the CTA to center it with the logo on the right. Additionally I inserted a logo and customized each area for the design I needed.

design blocks 1 2 3

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.

Short Code Custom elements

Monthly archives

Calendar of posts


Custom with preview

Recent comments

Latest Posts

Page list
List of


Social Icons

Tag Cloud
Most used tags


blocks widgets

There are 39 social icons, for the purpose of explaining these, I placed the social icon widget on my post, in addition I put a calendar widget above the social icons.

2 widgets

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.

Query Loop
Custom display

Post Title
Show content type

show post content


A small part of posts

Feature Image
A posts image

Log in/out
Links to log in log out

Post list

blocks theme

Here is an example of a theme block, because some themes will not have these features, where as, these blocks will come in handy.

Theme block

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.

embeded 1 how to use the wordpress block editor
embeded 3 how to use the wordpress block editor
embeded 2
embeded 4

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.

top bar functions2 how to use the wordpress block editor

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.

individual block edit 1 how to use the wordpress block editor
individual block edit 2 how to use the wordpress block editor
individual block edit 3

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

how to use the wordpress block editor pin pin


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.

The Laura Method

Resign With Money is supported by its readers. When you click on a link on our site, we may earn a commission.
Do you struggle with learning how to start an online business?

4 thoughts on “How to Use the WordPress Block Editor – A Simple 2022 Guide”

  1. Thank you. Very Helpful and insightful. I’ve been away from WordPress for a while and really didn’t like the block editor. Now I think it will be my friend!


Leave a Comment