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

How To Use The WordPress Block Editor

Oh boy, WordPress Block Editor. Not another new thing to learn! I know this is how I felt back in 2019 when WordPress introduced the updated version of Block Editor. I just shook my head and rolled my eyes. But Block Editor in WordPress turned out to be incredible. I love using it. 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. The classic editor was a good upgrade, but it wasn’t for me. I was using Elementor as a page builder and did not find the classic editor could compare. 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. In 2019, WordPress stepped up and created the Block Editor that exceeded my current page builder. But I did have to learn a whole new way of creating posts and pages. I put off learning it for a year or more.

The Laura MethodAn In-Depth, Step-By-Step Masterclass
For Newbies To Set Up A Niche Website

Free Today!

Put in your email to access your training dashboard.

But 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.

We will start with a basic overview of Block Editor and the blocks. I want you to be familiar with your options and what the blocks will help you build before we go into how to use WordPress block editor.

WordPress Classic Editor

This screenshot is what WordPress Classic Editor used to look like before the upgrade to Block Editor. It wasn’t very user-friendly and challenging to design a page or post. You could write in it and add images, but the design was basic unless you knew a lot about coding.

classic editor screenshot2

WordPress Block Editor

Then along came WordPress Block Editor, which is what we are going to learn to use. In this image on the right, you can easily click on the block to customize each block 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, you may need to change from classic editor to block editor.

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

settings to switch
switch to block editor

Where To Begin

Let’s get started building a post in WordPress Block Editor. You will begin in your dashboard as you did with the classic editor and click on “add new.”

add new

The first block you will see is the title. I used the title “How To Use WordPress Block Editor.”

title block

From here, the second block will automatically be a paragraph, but you can change it to anything you like. 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. You can create content, headers, lists, images, codes, quotes and arrange each one into groups if you like. You no longer need a separate plugin to set up tables. 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. This is why you will see the “Hello World” in some of these screenshots.

You have 80+ blocks to choose from inside the WordPress Block Editor. 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. These are the ones that you will most likely go to first to create a post or page.

Paragraph Write content

Heading
Set headings H1-H6

List
Bullets or numbers

Quote
A quote box

Code
A code snippet

Classic
Switch to Classic Editor

Preformatted Spacing and tabs/style

Pullquote
Highlight Text

Table
Build a special table

Verse
Poetry or Songs

most used 2

Here is an example of the preformatted block. You can use it for a text paragraph.

preformatted block2

Media Blocks

Media blocks allow you to add different images with text, audio, links, and design with a cover image.

Image
Insert
Image

Gallery
Multiple images

Audio
Embed Audio Player

Cover
Image with text overlay

File
Link a
file

Media&Text
Text beside media

Video
embed from media library

media blocks 2

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

cover image2

Design Blocks

Design blocks do what they say, design. You can set your post or page up with columns, group them, separate blocks, page breaks and add different items on display.

Buttons
CTA
buttons

Columns
rows side
by side

Group
Group blocks together

More
excerpt with “read more.”

Page Break
Separate content

Separator
Switch to Classic Editor

Spacer
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

Categories
Display post categories

Post tags
List-post tags

blocks design

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

design blocks 1 2 3

Widget Blocks

The widget blocks are relatively new as WordPress regularly updates the block editor. 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

Archives
Monthly archives

Calendar
Calendar of posts

Categories
Category
list

HTML
Custom with preview

Comments
Recent comments

Latest Posts
Recent
posts

Page list
List of
pages

RSS
RSS
entries

Social Icons
Icon
links

Tag Cloud
Most used tags

Search
Site
search

blocks widgets

In this example, I placed the social icon widget on my post. There are 39 social icons. And above the social icons, I put a calendar widget.

2 widgets

Theme Blocks

If your theme does not allow displaying some of these items block editor has set up blocks to insert into your posts.

Query Loop
Custom display

Post Title
Show content type

Content
show post content

Date
Post
date

Excerpt
A small part of posts

Feature Image
A posts image

Log in/out
Links to log in log out

Post list
Recent
posts

blocks theme

Here is an example of a theme block. Most themes will have these features, but if not, these blocks will come in handy.

Theme block

Embed Blocks

You have an option of 30 embedded blocks for almost anything from A-Z. Do you want a YouTube video or maybe a Tik Tok video? 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

For the embed blocks, I will add a video tutorial on How To Use WordPress Block Editor.

How To Use The WordPress Block Editor

Block Editor is the way WordPress allows you to organize your content on posts or pages. We will begin by introducing you to the top bar of your new post in the block editor and the functions you have at your fingertips.

top bar functions2 how to use the wordpress block editor

Individual Block Editor

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. The photos are a bit small, so you can go over to your website and check each one out.

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. I have given you examples and many images to see how it all works, but here I will list the steps. And I have posted a video that will 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. 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.” You can also type the name of a block in the block section. The block will pop up, and you can click on it to add it to your post or page.
  2. Or you can click on the + sign in the blue box in the upper left top bar to pull up all of the bocks. (see the image under “How To Use The WordPress Block Editor.”
  3. Or click on the + sign in the middle of the block that you popped 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. 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. It is an excellent way to extend the designing power of WordPress Block Editor. 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. Your options with his theme are endless.

how to use the wordpress block editor pin pin

Summary

I attempted to cover all aspects of how to use WordPress Block Editor. 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. If you need further assistance, please leave a comment below with your question.

My 4-Step Blueprint

Do you have a website or want to start your own affiliate marketing business? Do you need help and support to become successful and get noticed by your followers? Just click on the top or bottom box tab and learn more about how you, too, can make money online.

You are only one click away from all of the help and support you need to learn how to make money online. The cool part is, I am here with you every step of the way.

The Laura MethodAn In-Depth, Step-By-Step Masterclass
For Newbies To Set Up A Niche Website

Free Today!

Put in your email to access your training dashboard.

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?

2 thoughts on “How To Use The WordPress Block Editor”

Leave a Comment