Adding a Post or Page with Gutenberg

Tech Tip

When using a password manager enable two-factor authentication! This can be a text message or an OTP generator (One Time Password), such as Google Authenticator or Yubikey. They can be attached to your account and required each time you log in. This sounds like more work, but once you've gotten used to using it, it makes it almost impossible for someone to break into any of your accounts.

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.

WordPress Classic Editor

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.

Gutenberg Navigation Header Bar

Gutenberg Add New BlockOn 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.

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

Gutenberg Info ButtonNext 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.

Gutenberg Info Panel

Gutenberg Block NavigatorNext 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.

Gutenberg Block Navigator Preview

Gutenberg Edit Button

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

Gutenberg More Tools and Options ButtonGutenberg Right Side Navigation

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.

Gutenberg Publish OptionsPreview, 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

Gutenberg Documents SettingsLet’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.

Gutenberg Empty Paragraph Block

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.

Gutenberg Add Block Panel

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.

Gutenberg Paragraph Block

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

Gutenberg Block Edit Options

Gutenberg Block Move OptionsMoving 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.

Gutenberg Additional Block OptionsTo 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.

Have you ever used the Gutenberg Block Editor?

Which editor do you prefer and why?

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

0 0 vote
Article Rating
Author: Mike Bowden

| | |

Mike Bowden is the Owner, Project Manager, and all-around knower-of-techy-things at OBS. He's been in the technology industry since he could read and loves anything silicon-based. He's been a WordPress fanboy for well over fifteen years and has seen the good the bad in the industry. He spends most of his time now, helping others build their dream website, hosting, and protecting his clients' websites.
Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments

Let's Chat

Have questions about anything we offer? We offer several ways to reach us.

Fill in the form below, and we'll get in touch with you!

Or click on the chat with us button in the bottom left.

Contact Us

0
Would love your thoughts, please comment.x
()
x