Using the Gutenberg WordPress Editor

  Uncategorized

Using the Gutenberg WordPress Editor

With WordPress 5.0, released in December of 2018, the writing experience has changed significantly with the introduction of the Gutenberg editor. Where previously, creating a page was essentially just writing in a giant text-entry box, WordPress has introduced a method of adding different types of “blocks” that come together to create an entire page. This guide will explain a number of the features of the Gutenberg editor for users who are not using theme editors such as the Divi editor. Let’s walk through the process of using this system to get a better idea of how it works.

Beginning Your Page

When adding a new page in Gutenberg, you will first be faced with the following screen:

The opening screen when creating a new page

From here, you have a few options. First, you can title the page simply by typing in the large “Add title” textbox at the top. You can add text to the page by clicking on the line below it—this will be your body copy. You are also provided a number of useful options on the right; let’s take a closer look at these.

Status and Visibility

These options allow you to set who can view the page after it’s created—super useful if you haven’t finished working on a page before it’s ready to be published, and want to come back to it later. When a page is public, anybody can view the page; this is the default and the normal way to publish pages. Private means that only registered members that are administrators or editors can view the page, and password protected means that anybody who has the password can view the content, whether they are members or not.

Below these options, there is a setting that allows you to choose whether you want to publish the page immediately, or if you want to set a specific time for it to post automatically in the future. There is also a checkbox to set the page as “Pending Review.” This option will not likely be useful, unless you have guest contributors (non administrator accounts) writing articles on your site. The Pending Review button allows a user without admin privileges to publish an article, but keep it hidden from normal visitors until an administrator approves it for proper publication. Finally, you can choose which user to set as the author of the page.

Featured Image

This option simply allows you to choose an image to set as a “Featured Image,” which is a picture that will show up at the top of the page and help identify your post. A page does not need to have a featured image set.

Discussion

The discussion section contains a checkbox allowing you to disable or enable comments on the page.

Page Attributes

The Page Attributes section contains two options. Some themes contain different page templates that affect how the content appears; the Templates option allows you to choose which template to use. The usefulness of this option depends on the theme you have active.
The Order option allows you to customize the order in which pages show up when looking at them on the “All Pages” section.

Page Restriction

The page restriction options are similar to the visibility options discussed earlier. An unblocked page is one that anybody can access. A blocked page means that all users can see that the page exists and visit it, but will not be able to read the content it contains unless they log in. A hidden page is not shown at all unless the user is logged in.

Adding Content to Your Page

Now that we understand the page-wide options we have available, lets go ahead and try to add some content. In the Gutenberg editor, content is arranged into separate blocks, where previously everything was added together to one content box. Each block houses a different type of content; for example, you would want to create a separate block for a headline, and another block for the paragraph text. If you want to add an image, this would also be a separate block.
You can begin adding content by clicking on the text under the headline. All blocks are text blocks by default, but can be transformed into other types. The easiest way to choose another block is to type a single slash (/), and then choose from the list of block types. However, there are other options available, which we will look at now.

Editing blocks

When hovering over a block, we can see that a box appears around the content. In the top right, it shows the block type, and if we move our cursor to the left, we have a few options for rearranging the block, so long as we have multiple blocks on the page. Click the arrows to move the content up or down the page one step, or click and drag on the dots in the middle to drag the block around. If we move the cursor to the top of the blue border, we are given the option to create a block just above the one we are hovering over

Hovering in the top left of the block, we see the block name in the top right, the add block button on the top, and the options for moving the block on the left—these are available because another block was added below this one.

If we now click on the block, more options appear. We get a toolbar immediately above the content with useful options on it; these differ depending on what type of block it is. For example, for a paragraph section, we see options to change the block type, change the text alignment and style, and add hyperlinks, as well as a number of other useful, block-level options, such as duplication, deletion, and inserting other content before and after this block.

You may have also noticed that, when clicking on the content, the options on the right bar changed. The bar contains two tabs: Document and Block. As you may be able to discern, the Block options allow you to change other options related to this section—here, for example, you can change settings related to text, color, and custom CSS.

After clicking on the block, we get more options both on top of the block as well as on the right panel.

Top Toolbar

You now know how to add blocks in a few ways, change block type, manipulate the settings of those blocks, and move sections up and down the page. There is only one area left to cover: the top toolbar. On the left, this bar provides another way—perhaps the easiest way—to create a new block, undo and redo buttons, an overview of page information, a menu that provides quick navigation to different blocks on the page. On the right side, we have an option to save a draft of the page if you want to come back later, a preview button to see what the page looks like before publishing it, the final publish button for when the page is ready to go live, a button that allows you to show or hide the right options panel, and a settings menu that allows you to change the editor view.

The top toolbar

Hopefully, this will help you get started with using the Gutenberg editor. The main concept here to understand is the use of blocks—grouping content into different sections—that can be rearranged at will, rather than a single text-box, and the different options for customizing those blocks and where those are. Happy writing!