Gutenberg Editor Walkthrough

This entire walkthrough was created using the Gutenberg Editor.

This video was created before the WordPress 5.0 release.

Getting Started

  1. To begin navigate to your site.
  2. If you’re site has automatically updated to WordPress 5.0, this will now be your default editor. If you want to switch back to the Classic editor, you can read about how to do that in the WordPress Basics help guide.
  3. If you have not updated to WordPress 5.0, you will have to install the Gutenberg editor.
  4. If this is the case, on your Dashboard a large banner will appear and on it will be a button you can click to install and activate Gutenberg.

Once Gutenberg is on your site, go to your posts. Gutenberg works on both posts and pages. Now that we are in the post editor you will see a large difference from the classic editor. The big difference between the classic editor and Gutenberg is that Gutenberg works in blocks. These blocks can be paragraphs, images, videos, etc.

The Toolbar

  1. To add a block, go to the top left and select the “+.” Go ahead and explore these blocks. We will be coming back to these blocks later.
  2. Next to the “+” is a undo and redo button. Also, there is a little information button that shows you some details of your blog post like word count.
  3. The save draft, preview, and publish on Gutenberg are now at the top in a row.
  4. Also at the top is the little settings gear that allows you to hide the settings on the right hand side.
  5. The three dots on the side allow you to switch from the visual editor and the code editor. Right now we are on the visual editor, but if you needed to adjust the HTML and CSS of this post, you can do it there. There are also some more settings that you can play around in there.

The Sidebar

  1. Pressing that gear icon again will bring back this right sidebar with more of our features.
  2. The first setting section we see is “Status and Visibility.” This is where you can adjust the visibility from Public to Private. You can also adjust the author and post format here.
  3. Below are categories or folders on your website. This is where you want to organize your posts into these different topics.
  4. Underneath the categories are tags. I like to describe these as hashtags as they break down the category and make it easier for people to find your posts on your website.
  5. The featured image setting is for adding an image that acts as a media thumbnail. This is especially helpful for themes that have post previews so that image displays at the top.
  6. The excerpt is also helpful for those themes with post previews as this allows you to control what text shows up in that preview.
  7. In Discussion we can turn on or off comments and pingbacks and trackbacks.

Writing the Post

  1. Now let’s begin actually writing our post. Let’s start by adding a title to our post.
  2. Now I am going to add some text to our post by just clicking into this area and typing what I want. Notice that when I click on the text box, more options appear on the right hand side bar. I can make the text bigger, change colors, and some more advanced features.
  3. Also, when you click the box more options like alignment, hyperlinking, and so on will appear. For bolding and italicizing, make sure to highlight the text you want to bold or italicize and then select that option.
  4. Also on the left I can change the block type by clicking that paragraph button. When you change the block type, more options will appear in the right sidebar.  
  5. I also can reorder my blocks by clicking these down and up arrows.

Adding Images

  1. To make our post more visually appealing, let’s add an image. I’m going to go up to that “+” in the top left and select image. Here you can upload an image or choose from your media library. For now, I am going to select this image. Now this image appears in our post.
  2. If we click on this image, again more options will appear in that side bar. These settings include image dimensions, captions, and so on. Also clicking on the image will give you alignment choices like center, left, or right aligned. To get rid off a block all you have to do is hover over on the right side and select the three dots. Here you can also edit it, copy it, or remove it.

Publishing

  1. When you are happy with your post go ahead and press “Publish” on the right hand side. This will then put your article onto the front end of your website.

There are more features that I highly recommend playing around with on Gutenberg. For right now Gutenberg is in beta, but it will soon be released to everybody on WordPress, almost like an iOS update. Thank you for watching and good luck using Gutenberg.

Other Gutenberg Tutorial Walkthroughs

Written Gutenberg Instructions 

Featured Image