A Beginner’s Guide to Using Gutenberg in WordPress

INTRODUCTION

If you updated or installed WordPress anytime since late 2018 (version 5.0), you now have its new interface called Gutenberg. Prior to Gutenberg, editing pages and posts in WordPress was similar to (and easy as) editing a Word document.

Now, editing pages and posts has become more cumbersome as a result of new features–primarily, blocks–that are supposed to give you more control over the layout. 

Here’s your guide on how to use Gutenberg in WordPress that will help you with all the essential elements you will need to create pages and posts.

HOW TO ADD IMAGES IN GUTENBERG

Previously, the body of your page or post was one text block. Now, every sub-headline, paragraph, bulleted list, numbered list, photo and video is its own block. 

If you typically just have text in your post or page, then the blocks won’t make much difference. However, if you typically have other elements, then you may find Gutenberg to be counterintuitive (and annoying to use).

Let’s start by adding a photo. You will click the plus sign in the top left corner of the editor, then choose Image under “Most Used” or “Common Blocks.” The image you select or upload will be added to the subsequent block. If you want that image to be left- or right-aligned next to a block of text, click the image, then choose your alignment side. 

You’ll see that for some reason, the image becomes left- or right-aligned next to the block after the image, instead of before the image. For example, to get the image in the previous paragraph right-aligned, you’d have to add the photo before the start of the block (before the sentence, “Let’s start …”). When you click on the image, you also can choose its size; the image above is set to medium, a common size for left- or right-aligned images.

Note: do not choose the block style called “Media & Text,” because it does not align the image and paragraph as well as using the align-left or align-right options.

HOW TO MOVE OR DELETE BLOCKS

When you click on or hover your mouse over a block, you will see six dots appear on the left. Click and drag them to where you would like to place the block.

Alternatively, you can click on the up or down arrows near the six dots to move the block up or down one block, as you can see from this image:

To delete a block, you can either go to the previous block and hit the Delete button on your keyboard, or you can click on the three vertical dots that appear in the block’s pop-up menu. From the new menu that appears, choose “Remove Block.”

HOW TO ADD SHORT CODE OR EMBEDDED OBJECTS

Fortunately, adding short code is still the same as before. Copy the short code from the plugin, then paste it into a block. It will become its own block. Some plugins are integrated into the block editor, which means you can choose the plugin directly without using the short code.

To add YouTube videos, tweets, Facebook posts other embedded objects, click the plus button and choose “Embed.” You will then see various options.

You also can manually insert embed code through the HTML editor. First, create a new block. ( Here’s another example of poor design in Gutenberg. You’ll first have to type anything in the block so that you can access the pop-up menu.) Now click the three vertical dots and choose “Edit as HTML.”

Previously, you could edit the entire post or page in the Visual tab or in the HTML tab. Now, you can do it one block at a time. Once you’re in the HTML version of the block, paste the code for the embedded object.

HOW TO CREATE WORDPRESS TABLES AND COLUMNS

In previous versions of WordPress, you could only create tables using a plugin (e.g. Ninja Tables) or through code on the HTML tab (which wasn’t responsive in design). Now, click the plus sign, select “Formatting” and then “Table.” After you type in the number of columns and rows, your table will be created automatically. You can make the rows striped, and you make the cells a fixed width through the options in the right-hand menu.

For columns, click the plus sign, select “Layout Elements” and then “Columns.” On the right-hand menu, you can choose the number of columns. Note, the Columns block is best used for text.