I’ll be honest: I didn’t upgrade to WordPress 5.0 right away for fear of Gutenberg. If you’re like me, you too may have been concerned about the learning curve and possible undesirable effects of the upgrade.
Well, after waiting out the first waves of bugs (and fixes), I decided to dive in to see what the big deal was all about. I was pleasantly surprised!
So, I’m going to tell you all about it in this post, and I hope you’ll find it helpful.
Here’s what I’ve discovered…
Post Contents
What is Gutenberg?
In a nutshell, Gutenberg is a new visual editor for WordPress that lets you to drag and drop element blocks into your posts and pages. It’s 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 man who invented a process for mass-producing movable type, the use of oil-based ink for printing books, adjustable molds, mechanical movable type, and the use of a wooden printing press. Cool, right? But who cares about all that, really? LOL.
What we want to know is the purpose of the software. Gutenberg is designed to help anyone, even those with little tech experience, easily create multiple types of content within posts or pages on a website or blog.
If It Ain’t Broke …
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 mess with it?
In all honesty, the current editor is ancient and has some limitations. For example, if you want to really format your content, you must do it in the text editor with HTML, edit the CSS, or even edit theme files. So advanced formatting is impossible with the editor as it currently stands. While Gutenberg doesn’t fix all these issues initially, it eventually will.
Welcome to the Block
Writing a Post or Page in Gutenberg
When using Gutenberg to write a post or page, you’ll want to understand what blocks are and how they’re used to format your content. Blocks represent the different types of data you can insert into your page or post. If you’ve ever used a page builder on your websites such as Elementor, Divi, or SiteOrigin, you’ll already have an idea of how blocks work.
In the Gutenberg editor, the blocks are broken down into categories as listed below.
Most Used Blocks Include:
| Paragraph | Image | List |
| Cover Image | Heading | Gallery |
| Quote | Audio | File |
Common Blocks Include:
| Cover Image | Subheading | Video |
Formatting Blocks Include:
| Code | Classic | Custom HTML |
| Preformatted | Pullquote | Table |
| Verse |
Layout Blocks Include:
| Button | Columns | More |
| Page Break | Separator | Spacer |
Widget Blocks Include:
| Shortcode | Archives | Categories |
| Latest Comments | Latest Posts |
Embed Blocks Include:
| Embed | YouTube | |
| WordPress | ||
| SoundCloud | Spotify | Flickr |
| Vimeo | Animoto | Cloudup |
| CollegeHumor | Dailymotion | Funny or Die |
| Hulu | Imgur | Issuu |
| Kickstarter | Meetup.com | Mixcloud |
| Photobucket | Polldaddy | |
| ReverbNation | Screencast | Scribd |
| Slideshare | SmugMug | Speaker |
| TED | Tumblr | VideoPress |
| WordPress.tv |
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 the content you wish to remove and click on the three vertical dots that appear to the right, then choose remove. You can also move the blocks around quickly 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 a reusable block when writing a post, you can then use that same block when writing other posts.
Post, Page, and Block Settings in Gutenberg
The post and page settings in Gutenberg have changed quite a bit. They’re now more streamlined and appear more modern-looking.
You won’t see separate sections on the right side and bottom of the post content area anymore. Instead, the settings are now in a menu format to the right of the editor. However, you do have the ability to move the menu out of the way if needed by clicking on the gear icon in the top right corner.
This feature 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 block you use such as image, paragraph, and lists.
Document Tab Settings
Status and Visibility – You’ll find the settings for scheduling a post, setting the post or page status to draft, pending, or published, the post format, who can see the post or page, and the option to make a post stay on the front page, here.
If there’s more than one author account on your WordPress install, you can change the post author here too.
- Categories – Set or assign a new category for the post.
- Tags – Assign tags for the post.
- Featured Image – Assign the featured image for the post.
- Excerpt – Write the excerpt for the post.
- Discussion – Set your comments options.
Block Tab Settings
The settings available for each block will vary; however, the most common configurations are listed below for your review.
Paragraph – You can easily set the text size, format the text with a drop cap, change the paragraph background and text color, and add additional CSS selectors.
Image – Set the alt text, image size, link settings, and any additional CSS selectors here.
Cover Image – Chose whether the image should be in a fixed position or not and adjust the background opacity which determines the transparency of the picture.
Columns – Choose the number of columns you want.
Heading – Set the heading level to H1, H2, H3, H4, H5, or H6, and the alignment of the headline.
When writing or editing text, a bar will pop up where you can perform basic formattings 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.
Of course, you can also edit the slug with the Yoast SEO plugin, if you use it.
The screen settings link at the top of the editor has also been removed as it’s no longer needed.
The Top Toolbar
Above the editor, there’s a toolbar (as shown in the image below) that controls the 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.
Circle i Icon – When you click on this icon, you get some stats about your content. It will show you the number of words, headings, paragraphs, and blocks used. This is helpful information if you’re attempting to meet specific writing goals.
Save Draft – If you haven’t previously published the post or page yet, you have the option to save it as a draft. If you’ve already published the post, this option will not appear on the toolbar.
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 were 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 after publishing.
Gear Icon – Shows or hides the settings menu on the right side of the editor.
3 Vertical Dots – Allows you to switch between the visual and HTML editor, place the formatting toolbar at the top (bold, italics, alignment, etc.), display tips when creating a new post, and copy all the content.
When You Need to Edit HTML
Want to edit the HTML of a page or post directly? With Gutenberg, the Text tab that you’re probably used to in the classic editor is no longer there.
You can now access the new code editor by clicking on the three vertical dots in the upper right-hand corner next to the gear icon. You’ll see some new code though, so prepare for that, but it’s typically just HTML comments
Alternatively, you can use the shortcut Ctrl + Shift + Alt + M to switch between editors.
If you want, you can also edit the HTML on a per block basis. When you select a block, click on the three vertical dots that appear and choose the Edit as HTML option. This allows you to change one section of your HTML content at a time.
One more thing: If you need to add just an HTML snippet, use the Custom HTML block and add the HTML code there.
Keyboard Shortcuts
Many of the keyboard shortcuts that work in the classic editor still work in Gutenberg. However, Gutenberg does add some new shortcuts that will help you navigate the editor quickly.
- Enter – Simply pressing the enter key will automatically add a new paragraph block.
- / – The slash key is a shortcut for adding blocks. After you press the enter key press the slash key. A list of available blocks will appear. Use your arrow keys to choose the block you want to add. Alternatively, you can start typing the name of the block after the /. For example: /heading will add a heading block.
- CTRL + Shift + ALT + M – Windows only shortcut to switch between the code editor and the block editor.
- CMD + Shift + ALT + M – Mac only shortcut to switch between the code editor and the block editor.
- CTRL-Del – Windows-only shortcut to delete a block.
- CMD-Backspace – Mac-only shortcut to delete a block.
Advantages of the Gutenberg Editor
While Gutenberg may seem like a significant change from the classic editor we’re used to, it does come with many benefits.
Those advantages include:
- It’s easy for non-techies and beginners to use. The drag and drop blocks make adding content a breeze. No more having to edit everything via HTML or install multiple plugins to get the desired layout. While there will still likely be a learning curve, it should be much diminished. Plus, who doesn’t like playing with blocks?!?
- Mobile-Friendliness – Gutenberg is mobile-friendly right out of the gate, so it’s so much easier to write or edit a post or page from your phone with Gutenberg.
- Helps writers visualize their content – because what you see is what you will get.
- Reusable blocks – No more copy and pasting the same data over and over. You can save your most used blocks to use whenever you need them.
- Fewer distractions while writing – If you write your content directly in the WordPress editor, the slimline design of Gutenberg will have fewer items to distract you, and you can easily hide the settings menu.
- No more copying and pasting lengthy embed codes – With Gutenberg, you can embed most video, audios, documents, etc. from other websites with only the URL.
- Widgets right in your documents! – Have you ever wanted a list of pages or featured posts in your content? In Gutenberg, you can use a widget anywhere in your document. Before you couldn’t do it without custom code or a plugin
Gutenberg Hurdles
Of course, with any new software, there are going to be some bumps and hurdles. Gutenberg has its fair share. Below are some of the disadvantages of using Gutenberg:
- Backward compatibility with plugins and themes will be an issue. Plugins and themes that add meta boxes or use custom fields may not initially work with Gutenberg. The popular Yoast SEO is one that is ready to go and works nicely with the new editor. Any plugin that adds options to the editor, such as Yoast SEO, will still appear at the bottom of the editor.
- It is something else you need to learn (sigh). If you run your business on a WordPress-based website, then learning a visual editor is just another item on your to-do list.
One thing you want to remember about Gutenberg is that while it resembles a page builder, it isn’t an exact page builder just yet. It sure seems to be heading that way in the future though.
For now, though, it allows you to edit and format a post with blocks, but not the entire page. For example, if you have your blog posts set up to display with the sidebar on the right, you can’t change the position of the sidebar using the Gutenberg editor.
How to Revert to The Classic Editor
Once you upgrade to WordPress 5.0+, the classic editor will go away, and won’t be included in the WordPress core. If you don’t want to use the new Gutenberg editor, then you’ll need to download and install the new Classic Editor plugin.
You’ll still be able to use the editor that you’re used to, and when you’re ready to switch over to Gutenberg, all you must do is deactivate the plugin.
By default, when the classic editor plugin is activated, it’ll be like Gutenberg never existed! This will be a great option if you don’t have the time or energy to learn the new editor, don’t want to, or have plugin or theme conflicts.
The Classic Editor plugin also allows you to run the classic editor along with the new Gutenberg editor. Select the “Use the Gutenberg editor by default and include optional links back to the Classic editor” option, and it will add a new link to your posts and pages. If you choose the edit link, the Gutenberg editor will come up.
To install The Classic Editor, do the following:
- Log in to your WordPress administration dashboard as an admin.
- Go to the “Add New Plugin” page (Located in the Menu Under Plugins).
- In the top right-hand corner search bar, type in Classic Editor.
- The Classic Editor plugin will be the first plugin in the results.
- Click on the Install Now button. This will download the plugin to your WordPress site.
- Click on the Activate button. This will turn on the plugin.
- Go to the “Writing” settings page (located in the Menu under Settings)
- Choose the Classic editor settings you wish to use
- Replace the Gutenberg editor with the Classic editor, or
- Use the Gutenberg editor by default and include optional links back to the Classic editor.
- Save changes.
Alternatively, if you have Gutenberg running, you can go to “add a block” within a post or page and search for “classic.” Once you add the classic editor, you’ll have a separate block that appears just like the editor we all know and love. Your Gutenberg blocks will still be available to use on the same post if you want them.
Adding the classic editor as a block, to me, is the most flexible option to continue using the classic editor.
Learn More, Provide Feedback, and Grow with Gutenberg
It’s a good idea to have both the Classic and Gutenberg editor, so you get used to them. While many plugins and themes have already become Gutenberg-friendly, some are still not compatible.
Just remember that Gutenberg is still in active development and bugs and issues will be found and fixed on an ongoing basis. If you need some help or want to get involved here are some important links:
- Get support at https://wordpress.org/support/plugin/gutenberg
- Contribute at https://core.trac.wordpress.org/tickets/good-first-bugs
- Find more information at https://wordpress.org/gutenberg/handbook/
My Conclusion
Finally, after learning so much about Gutenberg, I have to say I like it!
And, after upgrading, I’ve written several posts using the new editor with no ill effects (knocking on wood!)
How about you? Ready to give the Gutenberg editor a try?
Some people will love the new Gutenberg visual editor, others not so much. While having the option to fall back to the classic editor via a plugin is nice, Gutenberg is here to stay.
If you’re using WordPress for any amount of time in the future, you should take the time to learn all the ins and outs to get the most of Gutenberg.
Get this post delivered as a PDF right here
