Many people find the Gutenberg editor a bit confusing. The main problem is that it hides all previously available options to make the interface clean and minimal. As a result, some people have difficulty finding the options and using them.

If you’re one of those people, working with Gutenberg doesn’t need to be difficult. Once you understand its ins and outs, you will get a much smoother and intuitive experience.

So whether you are a veteran or a new WordPress user, this beginner’s guide to writing posts with Gutenberg will help you become more productive with the block editor.

Gutenberg – Understanding The Editor

Before discussing how to create a post using Gutenberg, let’s first get a quick understanding of the Gutenberg Interface.

The Toolbar Options

Below you can see the Gutenberg Toolbar.

Gutenberg toolbar highlighted

From left to right, we have the options to “add blocks,” “undo,” “redo,” “content structure,” and “Block Navigation.” 

The first three options are pretty self-explanatory. Click the plus sign to add a new block. The back arrow will undo the last change you made in the Gutenberg editor, and the forward facing arrow will redo the last thing you undid in the editor.

The Content Structure options give you the number of words, headings, paragraphs, and blocks you have used on each post.

With Block Navigation, you can jump between all the different blocks you have added to your post.

To the right-hand side of the editor, we have the options for Save Draft, Preview, Publish and General Settings.

Pretty basic, isn’t it? But wait – what is a block?

What Is a Gutenberg Block?

Gutenberg follows a modular approach for creating posts and pages. You will get access to various content modules, which we refer to as blocks. The editor offers specific blocks for creating/adding paragraphs, images, audio, video, and much more.

Gutenberg block options

You will need to use multiple blocks together to create the structure/layout of your post or page. Each block also comes with settings and options for further tweaking.

How to Add a Block

To add a block, all you have to do is click on the “+” button in the top menu, and choose which block you want to add. For the purpose of this tutorial, we will be adding a new Paragraph block.

Gutenberg paragraph block

The above image shows how a paragraph block will look like. If you want to create a new paragraph block below your current block, simply press enter. There are also some easy shortcuts, which we’ve written about in a different post.

How to Delete a Block

Now let’s say you want to delete a particular block.

Gutenberg paragraph block with the options showing

Select the block and click on the settings button – the three vertical dots. Here you should see the remove block options as shown in the image above. Click on it to remove/delete the block from the post.

Block Specific Options

Let’s consider the following two images – in one of them we have selected the Paragraph block and in the next one, we have selected the Image block.

Paragraph:

Gutenberg paragraph block with full block options showing

As you can see, the paragraph block itself shows a dedicated toolbar from where you can control the alignment, turn it into block, italics, and even add hyperlinks. The right-hand side menu also shows options to tweak with the font size, color settings, and even add custom CSS.

Image:

Gutenberg block alignment options

Selecting the Image block changes the alignment options to what is relevant for images. We also see the option to directly upload the image by dragging and dropping, attach it from the media library, or even embed it using a URL. Also, the right side menu now only shows options specific to the image block, i.e. adding custom CSS files.

Document View and Block View

The right-hand sidebar has two tabs to let you switch between the Document view and Block View.

Gutenberg editor document view options

As previously shown, the Block view only contains options specific to your selected block. The Document view contains all the options that were standard with the right-hand sidebar of the classic editor.

From here you get to set visibility and publication status, assign categories and tags, add featured images, and much more.

Now you’ve got a basic understanding of the editor, let’s talk about how to create a post.

Creating a WordPress Post Using Gutenberg

To create a new post, log into your WordPress dashboard and head over to Posts > Add New from the left-hand sidebar.

Gutenberg editor showing the add new selection

You will need to add a title for the post or page in the designated area.

One Paragraph block will be already created for you. Just select it and start writing your post. As we discussed earlier, you will find all the necessary formatting options in the Paragraph block toolbar in the right side menu.

Each time you press enter, it will create a new Paragraph block for you to continue writing. Also, you can hit the “+” button to add other blocks like images, lists, and so on, as necessary to your post. 

Also, each Paragraph or any other block element will have this icon beside it. 

Gutenberg editor showing how to move paragraphs

You can click and drag this to reposition the block and all its content anywhere you like, giving you a lot more flexibility.

Remember to keep clicking Save Draft to make sure you don’t lose your work! 

Once your post is finished, remember to scroll down to the bottom to add the SEO details. We we recommend The SEO Framework plugin if you are new to SEO plugins.Bascially you’ll be able set the post meta. The meta is what Google and other search engines use when displaying our post in their search. You can set the title and a short description.

Example of meta text in the Gutenberg editor

Happy posting!

Keep up to date with Gutenberg

The development of the new WordPress block editor (Gutenberg) is an exiciting topic to follow. Gutenberg without a doubt will be the future of WordPress and will eventually because a entire site experience. You’ll be able to edit every part of your WordPress site with just blocks.

You can follow the development of Gutenberg over at Github. If you want to try the latest and great features then you can also install the Gutenberg Plugin. Keep in mind that this plugin is not needed. WordPress 5+ has Gutenberg built-in. The Gutenberg plugin allows you to test out new features before they are added to a new version of WordPress.

Leave a Reply

Your email address will not be published. Required fields are marked *