This page may contain affiliate links to products I recommend. If you purchase something from this page, I may receive a small percentage of the sale at no extra cost to you.
Gutenberg, The New WordPress Editor
If you logged into your WordPress dashboard lately you may have noticed something different about how you write your new blog posts. Something that has changed the way you use WordPress. Something that has changed the face of WordPress. That something is Gutenberg.
What is Gutenberg?
Matt Mullenweg, the co-founder of WordPress, said, “It’s time for WordPress’ next big thing, the thing that helps us deal with our challenges and opportunities. The thing that changes the world. Gutenberg.”
Gutenberg is the newest development in the WordPress community that has a lot of people excited and a lot more people apprehensive. Gutenberg is a new visual editor for WordPress that allows you to drag and drop element blocks into your posts and pages. It is a significant change from the previous editor and has received mixed reactions from WordPress users, developers, and designers.
The Gutenberg visual editor is named after Johannes Gutenberg, the man who,
The purpose of Gutenberg is to help those with little tech experience to easily and simply create
You may be wondering why a new visual editor was even needed. The previous editor worked just fine and everyone was used to it, so why change it? The previous editor was very old and had limitations. If you wanted to format the content extensively you had to do it in the text editor with HTML, edit the CSS, or even edit theme files. Advanced formatting was impossible with the editor as it previously stood. While Gutenberg doesn’t fix all these issues initially, it eventually will.
Writing a Post or Page 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. Blocks represent the different types of data you can insert into your content. 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 (Beta) | 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 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.
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 such as image, paragraph, and lists.
Document Tab Settings
Status and Visibility – 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 are found here. If there is more than one author account on your WordPress install, the ability to change post author is 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 with each block. The most common block settings 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 weather the the image should be in a fixed position or not and adjust the background opacity which determines the transparency of the image.
Columns – Choose the number of columns needed.
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 screen settings link at the top of the editor is also been removed as it is no longer needed.
The Top Toolbar
Above the editor lays a toolbar as shown in the image below that deals with the document as a whole.
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 on your content. It will show you the number of words, headings, paragraphs, and blocks used. Helpful information if you are attempting to meet certain writing goals.
Save Draft – If you have not previously published the post or page yet, you have the option to save it as a draft. If the post or page has already been published 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 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.
You may also have additional icons if you have certain plugins installed, including Yoast SEO and Jetpack. These allow you to access certain settings for those plugins.
Edit the HTML
Want to edit the HTML of a page or post directly? With Gutenberg the Text tab in the editor is removed. 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 will see some new code though, so be prepared for that, but it is normally just HTML comments and helps to find the different blocks in the code. Alternatively, you can also use the shortcut Ctrl + Shift + Alt + M to switch between editors.
You can also edit the HTML on a per block basis. When you select a block click on the 3 vertical dots that appear and choose the Edit as HTML option. This lets you edit just one section of your content in HTML.
If you need to quickly add just an HTML snippet, then simply 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 quicker.
- 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 big change from the classic editor you have grown accustomed to, Gutenberg does come with many advantages.
The advantages include:
- Easy for non-techies and beginners to use. It is much easier for a new to WordPress person to learn to drag and drop blocks for content rather than to edit everything via HTML or to install multiple plugins to get the desired layout. While there will undoubtedly still be a learning curve it should be much smaller. Plus its just fun to drag and drop blocks around.
- Mobile Friendliness – Gutenberg is mobile friendly right out of the gate! It is so much easier to write or edit a post or page from your phone with Gutenberg. (From your website. The app is still being updated.)
- Helps writers to 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 again. You can save your most used blocks to use again.
- Extendability – Plugin and theme authors have the ability to create new blocks that can be used within the Gutenberg editor.
- Fewer distractions for writing – If you write your content directly in the WordPress editor, the slimline design of Gutenberg will have fewer items to distract you plus you have the ability to 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 in your documents! Have you ever wanted a list of pages or featured posts in your content? Before you could not do it without custom code or a plugin. In Gutenberg, you can simply use a widget anywhere in your document.
- / Shortcut – This keyboard shortcut allows you to quickly add new blocks.
Gutenberg Hurdles
Of course with any new features there are going to be some bumps and hurdles and Gutenberg has it 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. YoastSEO is one that is ready to go and works nicely with the new editor. Any plugin that adds options to the editor, such as YoastSEO, will still appear at the bottom of the editor.
- Currently the custom fields options are not enabled in Gutenberg. Many themes and plugins rely on these fields to customize the content. The custom field data is still there you just cannot edit it or add new custom fields. In order to work with custom fields you will need to install a plugin such as the Gutenberg Custom Fields plugin.
- It is something else you need to learn. 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 need to remember about Gutenberg is that while it resembles a page builder it is not a true page builder yet. It sure seems to be heading that way in the future. For now though, it only allows you to edit and format the post with blocks not the entire page. For example if you have your blog posts set up to display with the sidebar on the right side, you can not change the position of the sidebar using the Gutenberg editor.
Revert To The Classic Editor
When Gutenberg was released with WordPress 5.0 the old classic editor went away. It is no longer included in the WordPress core. If you don’t want to use the new Gutenberg editor then you will need to download and install the new Classic Editor plugin.
This plugin will allow you to use the editor you are used to and when you are ready to switch over to Gutenberg all you have to do is deactivate the plugin.
By default the Classic Editor plugin will remove all traces of Gutenberg. When then plugin is activated it will be like Gutenberg never existed. This will be a great option for those who don’t have the time or energy in learning the new editor, just don’t want to, or have plugin or theme conflicts.
The Classic Editor plugin also allows you to run the classic editor along
To install The Classic Editor do the following:
- Login to your WordPress administration dashboard with administrative privileges.
- 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 the plugin on.
- 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.
In Conclusion
The best way to learn how to use Gutenberg in WordPress 5.0 is to just dig in and start using it. While many plugins and themes have already become Gutenberg friendly, many have not, and many are still in the process. If certain plugins that you use don’t work with Gutenberg, you can still use the Classic Editor plugin.
Just remember that Gutenberg is still in active development and bugs and issues will still be found and fixed. If you need some help or want to get involved here are some important links:
- Report bugs at https://core.trac.wordpress.org/newticket
- Get support at https://wordpress.org/support/plugin/gutenberg
- Contribute at https://core.trac.wordpress.org/tickets/good-first-bugs
- Leave feedback at http://wordpressdotorg.polldaddy.com/s/gutenberg-support
- Find more information at https://wordpress.org/gutenberg/handbook/
Some people will love the new Gutenberg visual editor and some people will hate it. While having the option to fall back to the classic editor via a plugin is nice, Gutenberg is here to stay. If you will be using WordPress for any amount of time in the future you need to take the time to learn all the ins and outs to get the most of Gutenberg.
If you need more help, check out this e-book that has tons of screenshots and details. I’ve read it and it helped me!
How do you like the Gutenberg Editor?
- 5 Ways to Boost Social Media Sharing - 01/20/2020
- How to Structure Your Content & Make it Easier to Read - 04/30/2019
- Why You Need Elite Blog Academy® - 03/04/2019
Leave a Reply