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.
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.”
Where To Begin
First you will see is the title block. For this purpose, I used the title “How To Use WordPress Block Editor.”
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.
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.
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
Build a special table
Poetry or Songs
Here is an example of the preformatted block, which you can use for a text paragraph.
In this case, media blocks allow you to add different images with text, audio, links, and design with a cover image.
Embed Audio Player
Image with text overlay
Text beside media
embed from media library
Additionally, I have added an example of a “cover image.”
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.
Group blocks together
excerpt with “read more.”
Switch to Classic Editor
Break up ideas
Display your logo
A line to describe site
Site title anywhere
Queried archive title
Display post categories
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.
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
Calendar of posts
Custom with preview
Most used tags
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.
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.
Show content type
show post content
A small part of posts
A posts image
Links to log in log out
Here is an example of a theme block, because some themes will not have these features, where as, these blocks will come in handy.
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.
- Login to your dashboard
- Go to all posts and add a new post
- Your first block is the title – add a title
- The second block is always the default paragraph
- Add a paragraph or click on the black + sign in the lower right corner to open blocks.
- Then click on the “browse all” black bar at the bottom
- All of the blocks will open to the left of your post
- Find the one you want and click on it or drag it into your post or page
- 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.
- 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.
- Click on “block.” scroll down to use the tools for that block.
- Repeat these steps for each block you choose.
Alternative Methods To Add Blocks
- 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.
- 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.”)
- Third option – click on the + sign in the middle of the block that pops up with the black box.
Ways To Customize The Blocks
- 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.”)
- 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 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
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.