New Gutenberg WordPress Editor (Pros and Cons)
This is not surprising taking into account that the current WordPress visual editor has not changed much over the years, and has stayed pretty much the same. Though it is not a bad thing, many think maybe it is time for an upgrade. Other platforms such as Ghost and Medium provide a really refreshing and unique experience for writers, so why can’t WordPress?
What is the goal? The main goal of this block editor is to make the WordPress simple and enjoyable.
What Is Gutenberg?
Gutenberg is a new post and new editor for WordPress. This new editor is named after the founder of the printing press, Johannes Gutenberg. The new WordPress 5.0 and Gutenberg editor was released on 6th December 2018. You will get instant access to Gutenberg after installing the new WordPress 5.0 update.
This new editor has been developed with the goal of making it easy to use the visual editor on WordPress. In addition, the main focus of Gutenberg is expressing all content as blocks and defining post layouts directly in the editor. The current WordPress content layout is defined in template files using CSS and HTML. However, with Gutenberg, you no longer need to know CSS or HTML to get two blocks of content side-by-side.
Since the current WordPress editor does not have drag and drop functionality, here comes the Gutenberg. Gutenberg introduces a new concept of little blocks. Hence, there is a need for every WP user to know how to use the new features of Gutenberg.
How to Install Gutenberg
Before diving into the pros and cons of the Gutenberg, let’s learn how to install it. The latest version of Gutenberg can be downloaded from the WordPress repository or by searching it out within your WP dashboard under ‘Add New’ plugins.
As of now, the Gutenberg plugin has over 20,000 active installs with over 290,000 total downloads and 2.5 out of 5-star rating. It also requires WordPress 4.8 version to use it.
Gutenberg Link on Post: Once you install the Gutenberg, it will show you an icon in the left menu bar. In the left menu bar, you will see links under the ‘Post’ that allows to open up the Gutenberg editor. They do not replace the default WordPress editor. As of the latest version on the repository, it now supports custom page types and pages as well.
Gutenberg Editor Demo: Interestingly, when you launch it for the very first time, you will see a new sample post named ‘Gutenberg Demo’. You can practice on the demo post before creating your own.
Comparing Gutenberg vs. current editor: Furthermore, when compared Gutenberg editor with the current visual editor, you can see Gutenberg offers more writing space and a visual and clean interface. Ultimately, it helps to improve focus and productivity to the writers.
Hide Post Settings: In the Gutenberg WordPress editor, you have a ‘Post Setting’ options on the top-right side of an editor. You can use this options to remove the right-hand sidebar. While this does give you access to even more of your screen, it acts as a halfway in between the currently available distraction-free writing mode.
Gutenberg Text Editor: In the top left, you can find a dropdown option to choose between the visual editor mode and the text editor (code). The visual editor shows only the features that are relevant to the current block. While the text editor shows the coding style used to create the effects.
You will also notice the HTML comments appearing at the beginning and end of each block. For instances, the following code would allow you to create a text block. This helps you to create the block directly from the text editor mode.
<!– wp:core/text –> <!– /wp:core/text –>
Working with Gutenberg Blocks: As with the default editor, we have the options to easily move the blocks up and down with the arrows, delete it or go into the settings of the block. The arrows are placed to the left of each block when you put the mouse over them. This feature is quite similar to the controls available to you on Medium.
Mobile Friendly: Yes, you heard it right. The pages you create using the Gutenberg editor are mobile friendly. Also, you can use it to edit your posts and pages on the go. For instances, if you have to make a quick image insert or add a para before publishing a post, then Gutenberg is going to make that easy.
TinyMCE not Available: One of the first things you will probably notice is that the TinyMCE toolbar you have been used to seeing for years is now gone. It is now replaced with a drop-down menu if you click on the ‘Insert’ button. Well, that is because it appears Gutenberg is trying to get rid of its dependency on the TinyMCE integration. Or are they?
Gutenberg changes everything about how we work with WordPress. In short, Gutenberg replaces the much loved TinyMCE editor with a visual editor based on a content block.
Gutenberg still allows us to use the old TinyMCE editor. It is included in its own block, called ‘Classic’. We only need to click the + button that pops up all the blocks and select the Classic block. The Classic block works exactly the same way as the TinyMCE editor. Inside the block, we can create headings and paragraphs, add images and code blocks, etc. This feature is excellent for anyone who needs some time to get used to the new Gutenberg editor.
Gutenberg Tables: With this new editor, you can simply add a table block, select your columns and rows, and start adding content. However, previously you required separate plugins or custom CSS to create a table – but now everything is available with Gutenberg.
Not only that, but you can also move the content elements up and down, easily create media-rich content, and edit them as individual blocks.
All you have to do is add a 2 x 2 table with the insert options and you can style it without going into the text view.
Gutenberg Text Columns: In this new editor, you have the options to add responsive text columns blocks. With these features, you can add any number of inline text blocks. These would otherwise have to be written usually using a 3rd party plugin to get working properly.
You can also easily reduce or increase the number of visible columns using a slider on the block options menu. You can also enter any number in the text box next to it.
Live HTML Block: This Gutenberg editor has added a new feature called ‘the live HTML block’. It allows you to insert code and you can see the preview of your changes from right within the block.
Drag and Drop Images:
The new version of Gutenberg simply allows you to drag and drop the images directly into the editor. If you have more images to display then you can simply add a new gallery block or can transform a single image into a gallery. They can be placed directly onto the image block placeholder or between the blocks.
Additional CSS Classes: With this new version of Gutenberg, you can now add additional classes to certain blocks. By using this additional CSS classes you can change the look of the blocks that are used in Gutenberg.
Recent Blocks: Recent Blocks: Gutenberg editor has added a ‘Recent blocks’ options to help to speed up the process of adding blocks.
Gutenberg Cover Text: The new version of Gutenberg editor introduced many options for new visual styles and for cover text. You can also change the font size, change the color with custom palette component, and turn into a drop cap, etc.
Gutenberg Slash Autocomplete: Gutenberg Slash Autocomplete: Gutenberg editor has added another feature – the ability to use autocomplete to insert block’. This feature is a very familiar way of easy formatting of content for those individuals who use ‘Slack’ on a daily basis. For example, if you type heading, then it will automatically start inserting a heading text. You can also use ‘Slacks’ for the gallery, embeds, and images.
Gutenberg Table of Content and Anchor Support: There is good news for Gutenberg user as they have provided you with a new feature of ‘Table of Content’ on the sidebar. It is more useful in the case of long-form content. It displays some list of clickable links which can be used to jump into any parts of your writings.
Gutenberg is not limited only with these features, but it also offers another feature called ‘anchors’. With these amazing features, you can actually link to the header or a certain section of the post. This is also great for sharing as well as switching to menus in SERP.
Word and Block Count: Gutenberg editor has added a simple but informational pop-up from where you can see the total word count, number of blocks, and number of headings.
Pull Quotes Block and New Alignment Options: Gutenberg editor has the new pull quotes options. If you want to add a pull quote in your article, then you can just search for a quote or pull quote. You can also search it under the formatting tab. Pull quotes can be center aligned, left aligned or right aligned.
Another interesting feature of Gutenberg Editor is that you can now align wide and align full-width as seen below.
Buttons: Gutenberg editor provides the inbuilt option for adding a simple button as many publishers and bloggers are searching for an easier method to add a call to actions to their blog posts. Before this, you have to use HTML code or Third party plugin/shortcode plugin.
Embed Options: Embedding media content is super easy with this newer version of WordPress Gutenberg Editor. Whether it would be Twitter, YouTube, Hulu, Imgur, SoundCloud, Flickr, Reddit, Slideshare and many more on the list. Since this was not mentioned before in the visual editor, you did not realize that many could embed all these options before.
Pros of Using Gutenberg WordPress Editor
Here are a few pros we see with the current Gutenberg Editor.
- In WordPress editor, TinyMCE is one of its big parts and they continue to use it for its rich text editing. However, it is not good for WordPress to depend too much on it. So, everyone would love to see tighter integration between core, theme developers, plugins, and the editor.
- Publishers that prefer the newer medium style of editing experience are definitely going to love the newer medium style of editing of the WordPress Gutenberg editor.
- If you are the one who does not like a distraction while working, then Gutenberg is for you. You would definitely love Gutenberg editor as it comes with full-screen templates and let you focus on your work. On the other hand, Gutenberg provides a less distracting experience with more space.
- Gutenberg WordPress Editor introduced a new concept of Block. The main goal of this block is to make WordPress enjoyable and easy to use for everyone. Also, the new alignment options are a step forward for a full-width template and larger resolution screens.
- The pages you create using the Gutenberg editor are mobile friendly. Also, you can use it to edit your posts and pages on the go.
Cons of Using Gutenberg WordPress Editor
Here are a few cons we see with the current Gutenberg Editor.
- Gutenberg is missing the markdown support in the beta version of the plugin.
- We have also listed it being easier to use for beginners while it may be hard to learn using Gutenberg WordPress Editor for some users.
- Gutenberg shows partial support for meta boxes. But for now, it only supports Yoast SEO. It is an obvious delay as developers may start testing integration with Gutenberg Editor.
- The newer version of Gutenberg WordPress editor is facing lots of compatibility issues. These issues can be a serious problem for many WordPress users and developers. Since the WordPress ecosystem supports thousands of themes and plugins, making them work with Gutenberg could be quite challenging.
- Gutenberg also does not support responsive columns yet.