Gutenberg WordPress Editor Tutorial

What is Gutenberg?

Gutenberg is the new block-based blog post editor in WordPress. Elements including images, text, galleries, and columns are now encapsulated in blocks, which you can use to easily arrange elements up and down on the page.

What You See Is What You Get Editing (WYSIWYG)

Besides the ability to add new elements in blocks, the other key difference between Gutenberg and the classic editor is that Gutenberg is What You See Is What You Get Editing (pronounced “Wizzy-wig” – fun, right?). That means that while writing in the Gutenberg Editor you are able to see exactly what your post will look like once it is published.

Start Your Blog Post

1. At the top of the editor, there will be a block that says “Add title”. This is the only block that cannot be adjusted around the page. Click the block and type in the title of your post.
2. Immediately below the Title, you will see some text that says “Start writing or type / to start a block”. Hover over this text and you will see a number of options for choosing your block type. This is how you will add your first block of content.    

Add a Block

If it is your first block, you will already be prompted to select a type of block. If it’s not, you select the block you would like to add a new block before or after. Select the three vertical dot icon to see an options menu. Select either “Insert Before” or “Insert After”, depending on where you would like to place your next block.

There are several ways to select a type of block. If you want to simply add a paragraph, the simplest way to add a paragraph block is to just start typing your paragraphs.

Forward Slash Shortcut

By typing “/” into the content block, you will be prompted with a list of popular types of blocks. Select one from the list to start working in that type.

“+” Icon

If you click on the “+” Icon on the far left side of the block, then you will be prompted with a menu. At the top, you can search for a specific type of block. Below the search bar, you will see a group of most used blocks to choose from. Scroll down below the most used blocks and you will an accordion with all of the available types of blocks. You can click on an option through any of these means in order to begin working in your desired type of block.

Moving a Block Up or Down

If you would like to move a block up or down relative to other blocks, you may do so by clicking on the block you would like to move and then clicking the up or down arrow on the far left side.

Deleting a Block

To delete a block, highlight the blocks that you would like to delete and hit “backspace” on your keyboard.

Want to Learn More?

Visit WordPress’ Go Gutenberg site for a tour, FAQs, and explanations of all the different blocks.