Adding a Post or Page with Gutenberg

Introduction

Up to this point, we’ve learned some of the very basics of using WordPress, and we should have a good grasp on how to log in and get around inside the WordPress Administration panel.

In this post, we’re going to focus on adding a new post or page to your new website. We’ll be combining these two since WordPress uses the same GUI (Graphical User Interface) for both.

If you have used WordPress in the past, the Gutenberg editor may not look like what you’re used to using. That’s because WordPress recently made it the default editor in version 5.0. However, those familiar with the classic editor can still install the Classic Editor plugin to revert to the old editor. In this post, we’ll focus on Gutenberg, as it has become the norm for most users.

Block Editor Navigation – Left Side

Let’s jump right in and use the navigation menu under Posts, that we discussed in last week’s post. Clicking “Add New” takes us to a brand new post, using the new Gutenberg full-screen editor.

Starting in the upper left, we’ll work our way through all of the options and what each one does.

The header bar for Gutenburg is quite useful. I highly recommend you learn where and what it is, so that you may easily find what you’re looking for while editing content.

On the far left, we’ll see a +. Clicking this allows us to add a new block on the page easily. Everything is now a block, which makes editing, moving, and organizing posts or pages easier. Other WordPress editors, such as Visual Composer, or Cornerstone, have all used this method for some time now.

Next to the + “Add Block” button, we have undo and redo buttons. You will most likely use these often.

Next to undo/redo, we have our information panel. The information panel shows us some quick and handy information we all want to know about any content we produce. All of the following is in this panel; word count, number of headings used, number of paragraphs, and the total number of blocks on the current page or post.

Next on the list is the Block Navigator. This will become very useful on pages with a lot of content and blocks, helping to find and navigate quickly to the section that may need editing.

The last item on the far left is the edit button. This button allows you to edit the current block quickly, or select a block and then edit it.

Block Editor Navigation – Right Side

On the far right of our header, we have some buttons you may be familiar with, Safe Draft, Preview, and the Publish buttons. These are a bit different than the classic editor, but still hold the same functions. The last button we have is the More Tools and Options button, useful for setting some options in the editor itself, such as taking it out of Fullscreen mode or turning on the code editor.

Save Draft will save your post or page in its current state, but not publish it.

Preview, of course, will allow you to preview what your post or page will look like in its current state, without publishing it or saving any current updates.

Publish, on the other hand, will not immediately publish your post or page when clicked. Instead, now it will slide in some options to select. Once your selections are confirmed, or changed, you can then proceed to publish the post.

The Sidebar

Let’s turn our focus to the sidebar on the far right, which gives us several options for our post. Keep in mind that this sidebar may change or include more choices based on plugins installed later.

The first option we have is to edit the Document or the Block. The Document tab will contain all of the settings for the page or post, such as categories, tags, featured image, excerpt, etc.

Our Block tab will, on the other hand, contain all of the settings for a particular block that we may have selected. If you do not have a block selected, nothing will appear in this tab. Let’s click into the paragraph block, and we can see that now options are available for use in this tab.

Each block will have its own set of options in this tab. We won’t go through all of the default blocks and their options, but this is where you would find those options.

Main Editor

Focus your attention on the middle of the screen. This section is where you’ll edit all of the content for your page or post. We start with a title block and a paragraph block, and from here we can add anything we’d like.

If we click the + “Add Block” in the upper left, we have several block options to choose from. There are sections for each type of block as well, to help quickly find the right block. Additionally, there’s a search feature, which makes finding the right block quick and easy.

Hovering over a block will present useful information about that particular block and, in some cases, an example of what it might look like.

Any block added will default to the bottom of all other blocks, but they can be easily selected and moved anywhere on the page, except for empty paragraph blocks. If a paragraph block is empty, you do not have the standard navigation menu, so moving, removing, and editing isn’t possible. To solve this, add some text to the block, and that menu will appear. This issue might be solved in a future update, but this is the best workaround for the time being.

Each block has its own set of options, and each will be different based on the type of block.

Moving a block is straight forward. Click into the block to move, and use the up and down arrows to move it where you’d like on the page or post.

To remove a block, be sure the options menu in the top left of the block is present, then click the three dots at the end. This menu contains a number of additional options for that particular block, namely the Remove Block option. This context menu also allows easy addition of blocks above or below a specific block.

Wrap Up

The new block editor for WordPress is quite powerful. As WordPress continues to add to it, the usefulness of this editor will grow. However, there are several block editors for WordPress that have been on the market for many years. Visual Composer, Cornerstone, and Divi are just a few that come to mind. For someone new to WordPress and block editors, I believe WordPress has done a fabulous job at making it easy to use, but they do have a long way to go before being comparable to editors such as Visual Composer.

Let us know in the comments below! We love helping new website owners, small businesses, or sole-proprietors with their next big project.