How to Use The Block Editor


Learn How to Use The Block Editor

What is the block editor? If you’re new to WordPress then you’re probably asking yourself this question. The block editor, also known as, Gutenberg, is the tool that WordPress uses for creating, editing, and updating, content on your site.

The block editor was first introduced in 2018 and replaced the classic WordPress editor, also known as the WYSIWYG editor (What you see is what you get editor). The classic editor closely resembled a Microsoft word type document editing experience. The familiarity of this editor made it great for adding content to websites in a way that was comfortable for users. While block editor may be less familiar to new users, it improves the content creation process because it is built for creating web content.

Because the classic editor closely resembled something that many people already knew how to use, when WordPress switched to the block editor, many users were upset. The simple fact is the block editor has a little bit of a learning curve but once you’re comfortable with using it, you will be able to create content for your web pages in a way that would be otherwise impossible. Because of this learning curve, we have created this guide in hopes that it will answer all of your block editor questions and help you start creating content like a pro.

This guide will be broken up into two parts. Part 1 will give you a bird’s eye view of how the block editor works. Part 2 will have a list of all the common blocks with links to instructions on how to use each block. 

A Birds Eye View of the Block Editor

To understand how the block editor works it is important to understand what blocks are. Blocks are different types of content or elements that might appear on a webpage. Examples of this are paragraphs, headings, images, audio, lists, etc… With the classic editor, all different types of content were smashed together into one document. The block editor looks at each type of content as a self-containing item, known as a block, and then combines all of these blocks to make one document. This modular approach to building web pages offers more flexibility and easier editing experience.

Diving right in, let’s look at how to add a block. To start adding blocks you will need to be creating a post or a page. If you’re not sure about how to create a post or page on your WordPress site, you can learn how to make a page here, and how to make a post here! Once you have a new post or page open for editing you will be able to start adding blocks. We have an empty new page screenshot below. Yours should look more or less the same. The only thing that may be different is the color of the background. We are using the 2020 theme, so our background is tan, most themes have a white background for the Block editor.

A blank page in WordPress, ready to be edited with Gutenberg.

With your new post or page ready to be drafted, it is time to start adding blocks. The default block is the paragraph block. Once you add a title, if you press return, you will immediately be inside of a paragraph block where you can start typing text. After typing some text if you press return again you will get a new paragraph block. You may think of a few paragraphs as one big text block, but the block editor thinks of each paragraph as its own paragraph block. To master the block editor try to think about your document from the perspective of the block editor.

Outside of starting to type there are a couple other ways to add blocks. Circled in the screenshot below are two plus signs (+) that you will find on the editing page. Clicking on these plus signs will pull up a list of available blocks, clicking on the block type will add that block below any other blocks that may already be on the page.

An image showing where the "choose a block" buttons are. One is on the righthand edge of the block, the other is in the upper lefthand corner of the screen.

With the update to WordPress 5.5, the block library has been expanded. Because of this, the two square-shaped plus sign buttons pull up different versions of the block library. Clicking the plus button in the upper left-hand corner will pull up the full block library as a sidebar on the left-hand side of your screen. Here you can browse all of the available blocks or even install new ones! You can also choose from a selection of layouts by clicking on the “patterns” tab. We have outlined the expanded block library in the screenshot below.

This image depicts the full block library which is revealed by clicking the new block button that lives in the upper lefthand corner of the screen.

Clicking on the plus sign found closer to the middle right-hand side of the page will pull up a more condensed version of the block library. This version of the library will display the six blocks you use the most, a search bar, and a browse all button. Clicking the “browse all” button will pull up the expanded block library that we mentioned above. Below is a screenshot of the abbreviated block library.

This image shows the condensed version of the Gutenberg block library which is revealed by clicking the plus button found on the righthand side of the block.

Sometimes you may want to add a block in a place other than the bottom of your page. One of the beautiful things about the block editor is that it is incredibly easy to rearrange the blocks on your page without effecting the other blocks. If you click on a block with content in it, a white toolbar will appear at the top of the block. Within this toolbar is a square containing an up arrow and down arrow for rearranging the blocks on the page. Pressing the up arrow will move the block above the previous block, and the down arrow will move it below the following block. We have drawn a red arrow to highlight this section of the toolbar.

This image shows the location of the button used for rearranging blocks. This button is the second one from the left in the block toolbar.

The last thing we have to say about the general function of the block editor relates to the sidebar that lives on the right-hand side of the editor screen. If there is not a block selected (you can select a block by clicking on it) the sidebar will contain a list of document settings. If a block IS selected the sidebar will contain a list of settings for the block you have selected. You can learn about all of the optional document settings for posts in our guide on How to Make a Post, likewise, all of the document settings for pages are detailed in our guide on How to Create a Page! To learn about block specific settings, carry on to part 2 of this guide and find the block you want to learn about! 

How to use all of the most popular blocks! 

Now that you have a broad understanding of what the block editor is, you can use the list below to skip to whatever block it is that you want to learn about. Click on any of the options below to link out to their respective guides: 

Thanks for reading! If there are blocks you would like to see added to this list, let us know, and we will add them.

Previous Guide
«
Next Guide

Are You Ready to Uplevel Your Web Presence?

Use the form to the right to share a little bit of information about yourself, and we'll be in touch within one business day to learn about how we can help!