Gutenberg WordPress Editor to Replace TinyMCE – Features, Pros & Cons
Are you a Webmaster, Author, Editor or a Contributor of a WordPress website?
You may have already heard about the impending update called Gutenberg. If you have not, this is the future visual editor for your WordPress site.
Why WordPress wants to update its old editor?
WordPress the most widely used CMS, is making the new visual editor one-of-its-kind by aligning itself to embrace the future.
I’ve been using WordPress for over a decade and the last time the content management system revamped its visual editor was back in 2014.
On January 2014, with the launch of WordPress 3.9, came the TinyMCE editor. If you are using WordPress, the default visual editor you will see is the TinyMCE.
Over the years that followed, WordPress came up with many updates for the TinyMCE, but none were path-breaking.
Since the new Gutenberg Visual Editor is going to be an incremental update, editors like us might have a reluctance to accept this new disruption.
Since WordPress is the most popular CMS, the update is inevitable for making it future proof. Since you and I have seen the growth of the internet and how the web has transformed, adapting to this new change is going to be a cakewalk (hopefully).
If you are new to WordPress, adjusting to the new Gutenberg editor will be easier.
What is Guttenberg Editor?
Interestingly, for naming a futuristic visual editor, WordPress has gone 500 years into the past. The new editor has been named Gutenberg to honor Johannes Gutenberg, the first man to invent movable type printing press 500 years ago.
The name Gutenberg is symbolic, as the movable printing press was the cornerstone for the evolution of the print media. WordPress, with its Guttenberg Editor, also intends to mark a milestone and they want us to be part of this epoch-making transition.
If you are new to WordPress, Gutenberg Editor is tailor-made for you. The Gutenberg Editor introduces “Blocks,” which in the future will act as an alternative to “shortcodes, custom HTML, or ‘mystery meat’ embed discovery.”
If you are not a web developer but want to customize your web pages, Gutenberg is your success tool. The new WordPress editor is designed to make page customization easy for lay users.
With the introduction of Blocks, even a rookie WordPress user can insert, arrange, and customize multimedia content.
The advantage is that, with Gutenberg, you don’t have to strain yourself with learning how to insert custom code because WordPress does it for you automatically. With the new visual editor update WordPress wants you to focus on creating high-quality content.
As of now, the Gutenberg Update is in the Beta version. You might have already received a notification in your WordPress dashboard to update to the Gutenberg Beta version.
If you are running a test website, we recommend trying it out. This will help you through the transition as the future WordPress updates will feature Gutenberg as the default visual editor. WordPress 5 will be the first version of the CMS to feature Gutenberg as the default editor.
What Are the Default Blocks Included in The New WordPress Editor?
There are close to 15 blocks readily made available by WordPress, for its editors. In addition to this, users can also create custom blocks to match their day-to-day needs.
Some of the most highlighted blocks are Paragraph, Heading, Subheading, Image, Video, Quotes, Gallery, Embed, and Code.
How to Install Gutenberg On Your WordPress?
As I have mentioned early on, by now, you may have already received a WordPress notification to migrate from TinyMCE to Gutenberg Beta.
If you haven’t received the notification, go to “Add Plugins” in the dashboard and type Gutenberg. You can install and activate the plugin.
Caution: Gutenberg is still in its Beta version. We don’t recommend installing it on a live site. We endorse using it on a test site until the stable version is released.
Compatibility of Gutenberg Editor with existing posts
According to the official plugin page of Gutenberg, it will work instantaneously with all your existing posts. It says shortcodes and other custom changes that are already present on web pages will be compatible with Gutenberg.
It also means that developers are working on a plugin that can automatically disable Gutenberg for pages created with older version of WordPress editor.
The official plugin page of Gutenberg says, “Posts are backward compatible, and shortcodes will still work. We are continuously exploring how highly-tailored meta boxes can be accommodated, and are looking at solutions ranging from a plugin to disable Gutenberg to automatically detecting whether to load Gutenberg or not.
While we want to make sure the new editing experience from writing to publishing is user-friendly, we’re committed to finding a good solution for highly-tailored existing sites.”
Even though WordPress 5 comes with Gutenberg as the default visual editor, users will be given an option to revert to the classic editor.
Once you have the Gutenberg editor installed on your test website, you will automatically be redirected to a demo post. The demo will showcase features of the blocks so that you are familiarized with the new update.
While testing with my test website, I found that all my earlier posts were automatically made compatible with Gutenberg. I found that Guttenberg converted all the paragraphs into a Classic block, meaning the editor detects older posts automatically and is self-adapting.
What are the major changes that Gutenberg has when compared to TinyMCE editor?
First of all, to compare TinyMCE editor with Gutenberg is like comparing a sea to a river. Even though both serve the same purpose the method, the look and feel and the user experience of Gutenberg is unique and nothing like TinyMCE editor.
Coming to the usability part, Gutenberg is way too advanced than the current default editor of WordPress. Gutenberg gives users more white space to write and edit.
This is most enticing for mobile users and those editors like us who use smaller laptops. With the new design, WordPress is signaling at moving towards a more writer-friendly approach. The less clutter design makes this intent clear as they don’t want any distraction, what-so-ever.
By default, you will see a text box similar to the current version of WordPress editor but with the custom edit option missing. This is added automatically to the text blocks when inserted.
The text box appears in the middle of the dashboard, almost similar to the existing visual editor. The difference is that you will have a sidebar with two tabs – Document and Block.
The Document tab has old features such as Visibility, Format, Tags, Categories, etc. but with a new improved design. On the other hand, the Block tab has been made dynamic with different options shown for each block.
This section is one of the USPs of Gutenberg as each Block element can be further customized, which was earlier a pain for writers.
The interface also gives users an option to remove the sidebar by clicking on the settings tab, making the text box bigger and writer-friendly.
Next to the setting, you will have a drop-down option to select Code editor. One thing that you immediately notice on entering the code editor is a line of default codes in the beginning and the end.
Adding Removing Blocks
Adding removing and customizing blocks are made easy, as you can now move a block up, down by clicking arrows, and delete it entirely by pressing the option on the right. These features are similar to the ones present on Medium.
All these features work seamlessly in the mobile version. I have struggled with editing WordPress posts on mobile devices, until now, and the problems I faced seem to have vanished with the new Gutenberg update.
One of the things that I liked about the new update is the drop downs. The toolbars that spread across the screen is now gone and replaced with user-friendly drop-downs.
For each block, the new Gutenberg gives an option to view in visual and HTML format. Inserting images and adding CSS has also been made easy with the new Gutenberg update. You can now drag and drop images directly into an image block, add effects to it, and use additional CSS classes within the editor.
Frequently used blocks
The new WordPress editor also auto-detects the frequently used blocks so that users can select it from the add option.
One of the highlighted features in the new Gutenberg is its ability to add new visual styles and options for cover text. You can choose the color, size, and font case of your cover text, which was earlier the work meant your developer.
Table of Content and Anchor Text
Table of Content and Anchor Support are two new additional features that you can find on Gutenberg. If you are a writer, Table of Content will be your favorite as it gives users the option to navigate within a lengthy article, based on the Heading tags inserted.
The Anchor support is a feature that writers and editors using WordPress have always longed for. This new feature enables you to link within sections and headers of the same article. With Google and other search engines focusing on user navigation as a ranking factor, this new feature will be a boon for WordPress users.
Word Count and Heading Count
Nowadays, more people are typing on WordPress text editor directly rather than using traditional editors and then pasting the content.
The one thing that WordPress gave less importance to, until now, was the word count and heading count. This deficiency has been filled with the new Gutenberg.
You can now keep a tab on the word count, blocks, and headings in the more info section placed on the header.
Pull Quote Block
The new editor also comes with a Pull Quote Block in addition to the traditional Quotes. This is a new feature that gives users the ability to align a quote wide (as seen below) and aligns full-width to increase its prominence within the post.
If you are someone who has tried embedding shortcodes to integrate call-to-action buttons on your WordPress website, the next feature will delight you.
The button option in the block lets you put simple buttons within the content. As of now, the buttons have minimal designs, but this is a feature that many were eagerly looking for.
If you have been adding Vimeo and YouTube embed codes manually into the HTML editor of your WordPress website, the next update is going to bring a smile on your face.
The new embed block has a list of 36 websites, and all you have to do is click on one of them and enter the URL. The current Beta version of the embed option supports websites such as YouTube, SoundCloud, Hulu, Flickr, Imgur, Twitter, Slideshare, Reddit, and many more.
Pros & Cons of Gutenberg Editor
Pros of Gutenberg Editor
- Goodbye to TinyMCE. TinyMCE was, of course, a good editor; but it failed to keep up with the latest improvements in technology. The killing of TinyMCE was expected, and the death seems to be good for editors, as Gutenberg is built with a focus on the future.
- WordPress now has a visual editor similar to Medium and Ghost, which I’m sure editors are going to like, once it is released as a stable version.
- Better writability, as Gutenberg has less amount of clutter.
- Gutenberg editor is tailor-made for mobile and small screen devices.
- Blocks in Gutenberg now eliminate the dependency on many plugins that affected the overall speed of WordPress.
- Now Developers can make custom blocks to cater to specific needs of their websites.
Cons of Gutenberg Editor
- The current version of Gutenberg does not support markup.
- The columns still remain non-responsive.
- Still in Beta version. Needs a lot of bug fixes.
- Compatibility issues with a few plugins.
- Doesn’t gel easily with old posts that were published using TinyMCE.
- Hard for users who have no experience with page builder.