Gutenberg: A Visual Guide

September 3, 2019 3:38 pm Published by 1 Comment

The rise of the Gutenberg editor is in full swing, for better or worse. Gutenberg was introduced by Matt Mullenweg at WordCamp Europe in 2017. The editor was created to simplify website layouts, while attempting to make the task more user-friendly. While Gutenberg was originally a plugin, in December 2018, the editor was merged into WordPress Core with version 5.0. There is no doubt that Gutenberg is most likely being pushed to compete with page builder services such as Wix and Squarespace.

Gutenberg is the new default WordPress editor.

The traditional WordPress editor can still be used via installing the Classic Editor plugin. This plugin will continue to be supported until December 31, 2021, or as long as the need is there. In this page on WordPress.org, Automattic addresses additional support with:

In 2021 we will evaluate continuing maintenance of the plugin, based on usage. We expect continued maintenance to be fairly trivial.

Gary Pendergast (Automattic)
The traditional editor can still be installed via the plugin directory, which can be found under, "Classic Editor."

But you probably weren’t here to learn about support timelines, rather, to learn how to use Gutenberg. So without further ado, let’s dive in!

Block Basics

Blocks are the meat and potatoes of Gutenberg. They are the various elements on your website. Here is a small list of various blocks given to you:

  • Paragraphs
  • Headings
  • Images and Videos
  • Columns
  • And much more…

So let’s get started by creating our first post using Gutenberg. Select the “Add New” fro the Posts drop down, or alternatively, you can add a post via the “All Posts” page.

This photo shows the options under the posts dropdown in the admin column of WordPress.

Right. Now you should see the following view for us to start putting our post together.

This screenshot shows the editor view for the post we will be writing.

From first glance, everything may seem pretty straight forward. You see where you can add the title, as well as where you can start typing. Let’s start by adding the most obvious choice for a title for our purposes. Simply click (or press, I’m using an iPad as I type this) and type your title.

This photo shows the editor layout after we added a title.

Paragraphs

Next, we can click the label, “Start writing or type / to choose a block.” By default, Gutenberg will default to adding the text you type to a paragraph block. Feel free to type anything you like in the box.

This screenshot shows some sample text inside the default paragraph block.

You may notice the options we have in the toolbar above the block we have in focus. There are quite a few buttons in the toolbar that you will find familiar, such as alignment, font wight, font style, as well as a link button. On the far left of the toolbar, you may notice the button with a paragraph symbol. This button allows you to change the current block to a different type of block.

This screenshot shows the various blocks that you can change the selected block to.

Images

When you’re done typing in the paragraph block, you might be wondering how to add a new block. On a desktop or laptop, you should see a plus button appear under the current block, if you move your mouse slightly under the block. Once you see the button appear, a new block will be added. On tablets, you may have to press return at the end of the last block to add a new block. New blocks can also be added via the plus button on the left side of the top toolbar.

This photo shows that you can add more blocks to your post/page.

Let’s change our new block into an image block. Click the plus button on the left side of the block and then select “Image.”

This screenshot shows the various blocks we have at our disposal.
This screenshot shows the various media options you have for an image block.

At this point you can choose to either upload a new image, open your media library, or insert an image from a URL. Blocks have their own unique options depending on the type, which are displayed in the toolbar.

Columns

There are also blocks that affect the layout of the current post/page. Let’s try one of these blocks, namely the “Columns” block. This block allows you to add blocks within, well, columns.

Once you have our new columns block added, we can add content to each column. Before we do however, it’s important to point out that you can change the number of columns using the sidebar on the right side of the editor. It can be very difficult to select the columns block since there’s no way to tell which block you’re trying to select. Unfortunately, it’s necessary to select the block but all will be well once it is.

Once you’ve been finally got the block selected, you can change the number of columns via the slider.

At this point, we can select a block to put in each of our columns. For my paragraph blocks, I will be adding some sample text.

Here we added a block to each of our columns.

More blocks can be added to columns too! For example, we could add another image under our paragraph block in the left column.

Taking a Look Around the Editor

The Top Toolbar

Earlier I briefly mentioned the top toolbar. It’s worth noting there are a handful of useful tasks we can perform from this bar. Starting from the left, we have the add block button, next there are undo and redo buttons. After that, the next button is a bit interesting. It provides us information about the current document. These stats include your word count, amount of headings, paragraph count, and number of blocks.

This screenshot shows the various stats related to this post/page.

Finally, the last button on the left side of the top bar displays an ordered list of the blocks you’ve added.

This is a photo showing the list of blocks utilized by your post/page.

Moving along to the right side, we can see there’s a “Save Draft” button. It’s pretty self-explanatory. Then there is the preview, which allows us to take a look at how our post or page will appear live. Let’s generate a preview of our post.

We can generate a preview of our post or page.

The “Publish…” button well… publishes our post. The next button looks like a gear. If you see the right sidebar, this button should be darkened since it’s enabled. The gear button toggles the visibility of the right sidebar. Some plugins may also add other buttons to the top toolbar such as Yoast (hence the “Y” stylized button next to the right sidebar button. The last button, with the three vertical dots, allows you to access other options.

The button with the three dots allows us to access more editor options.

Editor Views

If we take a look at the drop down menu under the three dot button, we should see options for three different views.

We can view the editor three different ways.

By default, Gutenberg places us in the Top Toolbar View. This view displays the top toolbar, as well as the document tools for our post. Spotlight Mode lightens any block other than the active block, so it’s easier to focus.

Spotlight Mode lightens other blocks, so you can focus on the current block.

The last view we can select is Fullscreen Mode. This view gives us a much cleaner editing layout.

Fullscreen Mode gets rid of the clutter you don’t need on screen.

The neat thing is that multiple views can be enabled at the same time. For example, we can have Spotlight Mode and Fullscreen Mode active concurrently.

The Right Sidebar

Block settings, like we’ve demonstrated above, can be accessed via the “Block” tab of the right sidebar. Some blocks have various options you can set. After selecting a block, you can view the settings for the block via the block tab. If you don’t see any options for a block after selecting one, ensure the Block tab is selected.

Settings for a selected block can be changed via the "Block" tab.

If we select the “Document” tab, we can change the main properties of our post.

Document settings can be changed under the "Document" tab of the right sidebar.

Under the “Status & Visibility” section, there are more dropdowns relating to permalinks, the featured image, the excerpt, etc. These settings are trivial to edit, you just have to click on the dropdown, and the option(s) should be there. When you are done making changes, click “Save Draft” if you don’t want to publish your post yet. Otherwise, when you wish to publish your post, you can click the “Publish…” button.

Wrapping Up

In this guide, we put together our first post using the Gutenberg editor. While feelings are mixed regarding this new editor, there’s no doubt that it will continue to be pushed as the de-facto method to edit content. Gutenberg is much different from the traditional WordPress editor in many ways, but also similar in some. As the editor continues to mature, more users will migrate to Gutenberg. It is my hope that this guide has been useful. There is definitely a steeper learning curve, which I think justifies a more visual guide.

If you found this tutorial helpful, and would like to receive news of our latest tutorials and courses, please subscribe to our newsletter. We also write IT and computer science related courses, which are available in our store.

Tags: , , , , ,

Categorised in:

This post was written by Jared York

1 Comment

Leave a Reply

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