Gutenberg: Are You Ready for the New WordPress Editor?


Disclosure: This post may contain affiliate links, which means we may receive a commission if you click a link and purchase something that we have recommended. While clicking these links won't cost you any extra money, they will help us keep this site up and running! Please check out our disclosure policy for more details. Thank you for your support!

The last time WordPress updated, we all gained access to the beta version of the new editor they’re introducing, Gutenberg. I’ve been blogging almost 10 years now, and during that time, the WordPress editor hasn’t changed all that much. They’ve made a few tweaks here and there but if you haven’t checked it out yet, Gutenberg is an entirely new ballgame and it’s going to change the way we all use WordPress.

The new Gutenberg WordPress editor is coming. It's time to learn it now.

Gutenberg? 

Those of us using WordPress are used to the fairly user-friendly editor. You know how to add text and images. You can change the formatting. It’s all pretty simple and intuitive.

Unfortunately, Gutenberg is a little less intuitive.

Gutenberg is a new visual editor for WordPress that will allow you to drag and drop element blocks into your posts and pages. It is a significant change from the current editor and has received mixed reactions from WordPress users, developers, and designers.

The Gutenberg visual editor is named after Johannes Gutenberg, the first man in Europe to use movable type. Gutenberg is the founder of the printing press, which is considered to be the invention that ushered in the modern era. The name choice is spot on.

The purpose of Gutenberg is to help those with little tech experience to easily and simply create different formatted types of content. The Gutenberg visual editor will be released in WordPress 5.0, which doesn’t have a firm release date yet but it is rumored that this release may come as soon as November!

You may be wondering why a new visual editor is even needed. The current editor works just fine and everyone is used to it, so why change it? The current editor is very old and has limitations. If you want to format the content extensively you have to do in the text editor with HTML, edit the CSS, or even edit theme files. Advanced formatting is impossible with the editor as it currently stands. While Gutenberg doesn’t fix all these issues initially, it eventually will.

Gutenberg is Coming

Thankfully, WordPress isn’t just springing the release of Gutenberg on us overnight. As long as you keep your version of WordPress up-to-date (and this is something everyone should be doing), you have access to the beta version of Gutenberg, which means you can try out Gutenberg now, before WordPress forces us all to make the switch with the release of WordPress 5.0.

I highly (HIGHLY) recommend giving Gutenberg a try before its release in WordPress 5.0 so you know what to expect.

If you’ve deleted the notification that you can use Gutenberg, here’s how to install it on your site:

1. Login to WordPress
2. Go to the “Add New Plugin” page
3. In the top right hand corner search bar type “Gutenberg”
4. The Gutenberg plugin will be the first plugin in the results
5. Click on the Install Now button
6. Click Activate

Once you have activated the Gutenberg plugin you will see a new menu option on your dashboard, aptly named Gutenberg. While there are no settings you need to set, the options allow you to see a demo of the plugin in action, a link for support, a link to leave your feedback, and documentation.

Writing a Blog Post in Gutenberg

When using Gutenberg to write a post or page you need to understand what blocks are and how they are used to format your content.

Think of a “block” like a building block. You can use blocks to create a blog post or page that looks however you’d like it to look. The limitations of the former WordPress editor are gone.  Blocks represent the different types of data you can insert into your content.

A block can be anything from a paragraph to an image to an ad to a TED talk. (Yes, there’s seriously a block for TED talks.) 

Gutenberg Blocks

To add a block to your post or page click on the circle + icon on the top toolbar and then choose which block to add. To remove a block, select the block in your content you wish to remove and click on the three vertical dots that appear to the right and choose remove. You can also move the blocks around easily by clicking and dragging them or clicking on the up and down arrows to the left of the block.

One of the great things to come from Gutenberg is reusable blocks. If you find yourself using the same data on multiple pages you can save the block and reuse it on other pages. No need to recreate it every single time. This works for posts too. If you create the reusable block when writing a post, you can then use that reusable block when writing a page as well. For instance, you could create a reusable block that contains your affiliate disclosure that should go at the top of any page containing affiliate links!

Post, Page and Block Settings in Gutenberg

The post and page settings in Gutenberg have changed extensively. They are much more streamlined and appear more modern looking. No longer do you have separate sections on the right side and bottom of the post content area. The settings are now in a menu format to the right of the editor with the ability to move it out of the way if needed by simply clicking on the gear icon. This allows you to focus more on writing.

The top portion of the settings menu has two tabs – Document and Block. These tabs let you easily switch between settings. The Document tab allows you to edit and set options for the post or page such as category, featured image, scheduled date, etc. The Block tab allows you to edit and set options for each individual block you use.

Document Tab Settings

The first time you use Gutenberg, you will want to take some time to acquaint yourself with all of the settings that now appear under the “Document” tab.

Gutenberg tab settings

Status and Visibility – This will look pretty familiar from the old WordPress editor. It’s here that you can schedule a post.

Categories – Set or assign a new category for the post.

Tags – Assign tags for the post.

Featured Image – Assign a featured image for your post if your theme uses this function.

Excerpt – Write the excerpt for the post. This excerpt is what will appear in search engine results and RSS feeds.

Discussion – Set your comments options.

Others – Depending on your theme and any plugins you’ve installed on your site, you may have different document tab options. For instance, in mine, I have a tab for the Easy Social Share Buttons Plugin.

Block Tab Settings

When you add a new block of content to your post, or edit a block, the settings tab will go from the “document” tab to the “block” tab. Depending on the type of content you’re working on, different options will be available to you.

Block tab in the Gutenberg editor

For a basic blog post, some of the main block formatting options that you’ll run across include:

Paragraph – When you’re working on a paragraph block, which is the general text block, you’ll be able to quickly change the size of your font, add a drop cap, change the background or text color, or add some CSS styling.

Image – Set the alt text, image size, link settings, and any additional CSS selectors here.

Heading – Set the heading level to H1, H2, H3, H4, H5, or H6, and the alignment of the headline.

Keep in mind when writing or editing text a bar will popup where you can perform basic formatting such as bolding, alignment, italics, and links.

Something you might notice missing is the ability to change the slug or permalink of a post or page while editing it. Don’t worry, it’s still there. Click on the title block and the option to change the permalink will appear.

The Top Toolbar

Top toolbar for Gutenberg

Above the editor lays a toolbar that looks like the one above. This toolbar includes a couple of functions that affect your entire document.

Circle + Icon – Adds a block to your document.

Left Arrow Icon – Undo the step you just performed.

Right Arrow Icon – Redo the step you just performed.

Gutenberg information block

Circle i Icon – When you click on this icon you will get stats for your document like in the image above. It will show you the number of words, headings, paragraphs, and blocks used. The document outline is an especially nice touch!

Save Draft – If you have not previously published the post or page yet, you have the option to save it as a draft. I’ve noticed that Gutenberg does a great job of autosaving. Your post will automatically be saved anytime you add a new block of content or pause writing. I’m a crazy person about saving my work, so it’s nice to not have to think about it. 

Switch to Draft Button – Allows you to unpublish a previously published post or page.

Preview – View a preview of your content in a new tab or window as if it was published.

Publish – If the post or page has not yet been published the Publish button will appear allowing you to publish the content or schedule it for later.

Update – Save any changes made to your post or page.

Gear Icon – Shows or hides the settings menu on the right side of the editor.

3 Vertical Dots – Menu that allows you to switch between the visual and HTML editor, fix the formatting toolbar to the top (bold, italics, alignment, etc.), display tips when creating a new post, and to copy all the content.

Editing HTML

If you’re used to the two options the old WordPress editor gave us – visual and HTML views – getting used to Gutenberg may be a challenge. There’s no longer an HTML view to be found. Instead, you need to click on the three black dots at the top right of the page and go down to “code editor.”

Gutenberg code editor

Don’t say I didn’t warn you: Some of the code is going to look a little different from the traditional HTML code you’re used to seeing. WordPress has added some new code to Gutenberg that makes it easier to organize your work from the code view. I think it makes the code easier to view.

If you’re HTML savvy, you can still edit the HTML on a per block basis. Select the block you want to edit, then click on the 3 vertical dots that appear in the menu bar. Scroll down and choose the “Edit as HTML” option and the code for just that one block will be available. 

Reasons You’ll (Eventually) Love Gutenberg*

While Gutenberg may seem like a big change from the classic WordPress editor we have all grown to love over the years, I have a feeling you’ll eventually love Gutenberg, too. There’s no doubt that Gutenberg comes with a learning curve, but once you get the hang of it, it really does offer so much more than the classic editor.

Some of the reasons Gutenberg is awesome include:

  1. It looks different now, but it actually is fairly easy to use! Instead of using multiple plugins or learning HTML to create your desired look for a page or blog post, Gutenberg offers infinite ways to customize your content.
  2. I’m old school, but I know many of you are writing blog posts on your phones and tablets. Guess what? It’s actually easier to do that with Gutenberg!
  3. While most of us don’t use the same data over and over again in our blog posts, there are times when it’s necessary. Reusable blocks makes this a cinch.
  4. It takes me hours to write a blog post because I am prone to a thousand different distractions. Gutenberg helps minimize the onscreen distractions, though, because it automatically hides almost everything else on the screen when you’re writing.
  5. Have we talked about how you can use widgets in your blog posts? Gutenberg lets you use widgets in your posts! Maybe right now you’re thinking this is something you’ll never need, but I would counter that you just never know. Developers are working like mad to create new plugins and widgets that will work hand-in-hand with Gutenberg so there may be something amazing soon!

Learning Gutenberg

As I’ve said throughout this post, there’s going to be a learning Gutenberg learning curve. Since WordPress has completely rebuilt the editor, it’s going to take some time to learn and some time to get used to.

My recommendation is to start using it now.

Yep, right now.

Even if just thinking about it fills you with dread, Gutenberg will get easier to use with time. And, wouldn’t it be nice to be a Gutenberg master before WordPress 5.0 is released?

If that’s just not in the cards right now – hey, it’s Q4, I get it – there is a way that you can continue to use the WordPress classic editor for the foreseeable future.

Using The Classic Editor Instead of Gutenberg

When WordPress 5.0 is released, Gutenberg will be the only editor option. From what the crew at WordPress has said, they will not include the classic editor with the update. However, if you’d really rather be using the classic editor instead of Gutenberg, you can install the Classic Editor plugin

Classic Editor plugin for WordPress

The Classic Editor plugin will allow you to continue using the editor you are used to. When you are ready to switch over to Gutenberg all you have to do is deactivate the plugin.

Try It… You Might Like It

Over the past few years, companies have released page builders that make it incredibly easy to design an entire website from scratch. You may not be using these, but Gutenberg is following along this same trend. Back when I started blogging, in the olden days, you really needed to hire a designer to create a blog. There was so much coding involved that it was dang near impossible to have a nice-looking site without getting a professional involved. 

Page builders, and now Gutenberg, make it easier for all of us to do things on our own. Once you get the hang of Gutenberg, you’ll be able to make any blog post look EXACTLY the way you want it to and you won’t need to use or know much HTML at all.

I know learning Gutenberg is probably not at the top of your to-do list, but I hope that instead of relying on the classic editor, you’ll take the time to learn it.

If you’re having trouble sleeping, check out WordPress’ Gutenberg Handbook: https://wordpress.org/gutenberg/handbook/

And if you have any Gutenberg-related questions, leave them below and I’ll try to get you an answer!

* Every single time I wrote the word “Gutenberg,” I couldn’t help but think of this guy:

via GIPHY

 

Follow Me

Lisa Koivu

Founder at Oh, She Blogs!
Lisa Koivu is the founder of Oh, She Blogs! A seven year blogging veteran, Lisa can also be found posting shopping deals and steals at ShopGirlDaily.com . In her free time (ha!) she is also a freelance writer who has written for About.com and U.S. News.
Follow Me

1
Leave a Reply

avatar
1 Comment threads
0 Thread replies
0 Followers
 
Most reacted comment
Hottest comment thread
1 Comment authors
Tanja Recent comment authors
  Subscribe  
Notify of
Tanja
Guest

Thank’s for the post, I have shared it on my Facebook site (had to copy the link, so it will not be shown as shared here).