The Gutenberg editor is going to change the way we use WordPress very soon. It is named after Johannes Gutenberg, the inventor of a printing press from more than 500 years ago. In this WordPress Gutenberg Guide we will give you an overview of the editor and some pros and cons to using it.
What is Gutenberg?
Matt Mullenweg, the founding developer of WordPress, revealed Gutenberg to the public in 2017. Since then it has received mixed feedback from the WordPress community.
According to WordPress.org, Gutenberg has been downloaded over 300,000 times. It has a rating of 2.3 out of 5 stars and received over 1200 reviews with the following ratings.
As of the moment of this writing, it is a standalone plugin (current version 3.7.0) available for free download from the WordPress plugin repository.
Gutenberg will soon become the default editor in WordPress 5.0 and will replace the current backend page editor. It was largely unchanged for over a decade. This fundamental switch will ultimately impact the entire publishing experience and revamp the way the CMS works right now.
Currently, the visual editor works with HTML code in combination with shortcodes to create content. The primary goal of Gutenberg is to allow users to build pages in WordPress by utilizing content blocks with advanced customization options.
How does it work?
So let’s dive in and take a look at Gutenberg editor from the WordPress admin area.
You can get the latest version of Gutenberg editor by downloading it from the WordPress plugin repository. Or by searching for it within your WordPress admin area by following Plugins > Add New. It is highly recommended and best practice to avoid installing it on your live site. Use a test site, localhost or your host’s staging environment instead.
After you click install and activate the plugin, you might want to go to Gutenberg tab of your dashboard to check out the demo page. Get to know the editor and have a play around with it. You will see this sample page with some content block examples to help you get started.
The Interface
Here you can start going over the interface from the top of the page. At the top left you will see the plus icon and this is where you can add a block. Blocks are the various pieces of content that are going to make up your posts and pages. You can see the list of blocks organized in groups by scrolling down.
However, you don’t even need to use that plus button every time. When you are creating content in Gutenberg, you have the same plus icon while hovering over any part of your page. This way you will know exactly where the particular block is going to be inserted.
Then we have an undo and redo buttons which is a much-needed improvement to the WordPress editor. Next, we have the little ‘i’ icon. This is just going to give you some information on your article words, headings, paragraphs and blocks. In the same window, you have your document outline to help you better structure your content and quickly navigate around.
Publishing buttons
Then off to the right we have the save draft, preview and publish buttons. So when you create a new piece of content it’s not going to be published until you click that publish button.
You will also have the opportunity to change the URL permalink. Then we have the cog wheel button right there that is going to reveal the settings for any selected block. Although, you might need to keep this panel open most of the time while editing. At the top right you also have the three dots icon with additional settings you might need.
Next, let’s take a look at the right panel where you have two tabs at the top: Document and Block. Document settings are going to be the settings for the whole page. Very similar to what you’re already used to if you’ve used WordPress before. Each block will have its own settings, and they’ll appear dynamically on the Block tab.
Create content
To start creating content you can click the plus icon to see the list of the available blocks for your website. Or just search for the required block. You can also scroll through to see all of the available blocks from the list. Most used blocks will appear at the top.
Let’s go ahead and add some text block to see how it looks. By clicking on the text paragraph you can now select options from the right panel. This will change different settings for this particular block. For the text block you can change font size, position, font color, background color and also add an additional CSS class to the block.
If you want to reposition your blocks, just hover over any block and you will see off to the left up and down arrow icons. Now you can click up and it would just move it up one block. Or you can click down and it will move it down one block.
Alternatively, if you go right off to the left of a block, the mouse cursor turns to a hand and allows you to click, drag and drop a block anywhere on your page.
To remove a block, simply hover over the top right of a block to find a three dots icon with additional options. There you can find settings to duplicate or remove a block, edit as HTML, add to reusable blocks and more.
Add images
Let’s add an image block by clicking the plus icon. It will then ask to choose an image or upload it from your computer. You can just type your caption underneath your image, change the position of your image, and adjust the size of it by dragging the blue dots on each side. In the right panel you can also set alternative text for search engine optimization.
To customize the slug for your content, hover over and click on your title to see a permalink field right above it. Now you can change the URL of your page.
After using Gutenberg for a while you will understand why it was actually created. You can now do some things that were harder to do before inside of a more intuitive interface.
Is Gutenberg any good?
Gutenberg uses fast and lightweight technology for content blocks creation empowered by a JavaScript library called React. An absence of bulky and heavy content blocks allows a quicker website loading time. The layout of different elements is simple and easy to use unlike other popular visual editors like Elementor, Divi or Beaver Builder. These offer a greater number of options but require far more learning curve time.
The Gutenberg Editor will allow users to change themes. Themes like Divi have their own built-in builder that make the process of switching themes complicated.
Themes that currently do not support content block builders will still work well with Gutenberg without any alterations. Therefore, soon your favorite themes will offer a new feature of content block builder without any additional plugins.
It is already fully compatible with mobile devices allowing people to edit content on their phone or tablet. This feature can come in handy while you are on the go and need to make some quick changes on your website.
Teething problems
People familiar with the previous classic editor might find it difficult to adjust to a new content block editor. You might also be wondering whether Gutenberg will be optional or not. The answer to this question is no. When WordPress 5.0 comes out, the Gutenberg editor will be officially part of WordPress core functionality. You won’t be able to turn it off unless using a free Classic Editor plugin to roll back to old editor.
Gutenberg is a significant challenge for WordPress plugin developers. Backward compatibility can become a major issue for many themes and plugins out there.
Many plugins like Yoast SEO use custom meta boxes that now will not be supported by Gutenberg. However, plugin developers can solve this problem using the settings panel. But many users might find it difficult to find the necessary option by navigating through multiple toggle boxes.
Conclusion
We hope you enjoyed reading our WordPress Gutenberg Guide. WordPress is a platform that it will continue to grow and evolve. Introducing a new Gutenberg visual editor is a part of this process. Overall, it is a significant change to make the publishing experience more simple and enjoyable for users.
It might be visually appealing for people who like the Medium style. Anyway, it is highly recommended you download Gutenberg today to familiarize yourself with it’s look and feel. This way the transition period for you will be much more smooth and comfortable when it will become a part of the WordPress core.
If you want to learn more about Gutenberg editor, go to the official WordPress Gutenberg site for more information. Also check out the Gutenberg.news website that aggregates many high-quality tutorials.
Leave a Reply