Everything You Need To Know About WordPress Gutenberg (From Head To Toe)
Today, we’re going to shift our focus to a topic which has been a part of debates and discussions in the last few months or so. We’re going to discuss in detail about what is Gutenberg, how it works, what are its pros & cons and how it is going to impact the IT world.
What Is Gutenberg?
Are you someone who is providing the WordPress Development Services for a long time to various customers? Then, you must be knowing about TinyMCE, the default editor. Now, since the inception of the WordPress on 27th May 2003, there has been a significant amount of changes in the platform. But, one thing that has not changed in the last 15 years is the editor.
Many IT industry experts across the globe have been talking for a while that, the editor needs a fresh look and a futuristic approach. That’s where the development team decided to work on it and after tons of research, finally, they came up with Gutenberg.
Gutenberg is the brand new editor which aims to simplify the editing for the blog purpose. It is named after Johannes Gutenberg, a German printer & publisher who brought the concept of the movable printing press to Europe for the first time.
— WordPress Jo’burg (@WPJoburg) May 15, 2018
TinyMCE requires the user to have knowledge of shortcodes and HTML, which could be a tedious task, especially for non-technical users. What Gutenberg aims to do is to make the editing on the easier and simple than ever before. So, even the new users can easily adjust to it without having to learn anything in advance. In other words, you can say that Gutenberg is the new page builder which is designed in such a manner that it can easily integrate with the core version.
Three Stages Of Gutenberg Release
After reading the above section, you all must be tempted to use Gutenberg, isn’t it? But, there’s a twist in the tail and twist is that Gutenberg is not production ready yet and so, it is not officially released yet by the development team. It is expected that with the Gutenberg will be released with WordPress 5.0 later this year and it will replace TinyMCE as the default editor.
Since the announcement of Gutenberg, there’s a lot of discussion going on in the industry that whether Gutenberg would work well or not. So, in order to take the views of the audience, the development team has decided to launch the beta version of the Gutenberg in the form of a plugin. Based on the reactions of the audience, they will make changes to the that before the final release.
Despite so many doubts about the future of Gutenberg, Matt Mullenweg remains confident about the success of Gutenberg. Here’s what he has to say about Gutenberg:
“I think we can do 4.9 first before we merge #Gutenberg – ideally over 100,000 active installs first.”
– Matt Mullenweg,
Founder & CEO,
From the above tweet, you can easily understand the kind of impact Matt Mullenweg and the whole team is expecting from Gutenberg and therefore, it becomes important for all of you to have the knowledge regarding it.
Now, there are three major stages of the Gutenberg release. In the first stage, the focus will be on bringing the content-first approach and introduce the concept of blocks to the users. Once the users get acclimatize with this, the second stage will be released which focuses on page templates and in the third & final stage, the focus will be on the full site customization.
How To Install Gutenberg?
Till now, you have got an idea of what is Gutenberg and when it will be released. But, the question that still remains is that, How can we install the beta version of Gutenberg and use it? So, let’s analyze that.
As discussed earlier that, the beta version of Gutenberg is available as a plugin. So, You can download the latest version of Gutenberg from the WordPress Repository OR you can search it from your Dashboard under “Add New” Plugins section as shown in the screenshot below.
As of now, Gutenberg is available to you as a Plugin which has 10,000+ active installs to date. The plugin has got 2.5 out of 5-star rating by the users and you need WordPress 4.9 in order to work with Gutenberg.
How Gutenberg Works?
Gutenberg Link In The Dashboard
Once you’re done with the installation of the Gutenberg, the first question that would strike your mind is that, Where can I see the Gutenberg in the Dashboard?
So, for this purpose, go to the Dashboard and move to the “Posts” section. That’s where you will find the link of the Gutenberg. What you will also find is that the link of Gutenberg is available in addition to the default edit link, which means that, TinyMCE is still not removed.
Once the WordPress 5.0 is released, Gutenberg will become the default choice. Till then, you can revert back to the TinyMCE, if you’re not comfortable with Gutenberg.
After installing the Gutenberg, you will find a separate menu for Gutenberg. So, click on that menu, which will introduce you to the Gutenberg for the very first time. With the help of that, you can now create your own blog post according to your requirement. It is very similar to the Medium – an online publishing platform
Comparing Gutenberg With TinyMCE
One of the main differences between Gutenberg and TinyMCE is that there is a lot more writing space in Gutenberg compared to TinyMCE. Therefore, the people who are working on their laptop or tablet will feel a lot more comfortable while working with Gutenberg.
The USP of Gutenberg is its emphasis on “writing first” approach and therefore, it has removed all the distractions which were the previous present in TinyMCE. You will find just one sidebar for the “Post Settings” and that is not compulsory as well. So, if you want to hide that, you can do that. This way, writers will get a distraction-free environment.
In Gutenberg, Everything Is A Block…
Before exploring any functionality of Gutenberg, you need to know what is Block and how it works. The reason behind that is, in Gutenberg everything you use is one block and if you know how block works and then, it will become easier for you to deal with Gutenberg. So, let’s understand that first.
What Is Block?
- A block is nothing but a unique way of styling your content which previously required shortcodes, embeds, widgets, post formats, custom post types, theme options, meta-boxes, and other formatting elements.
- You can also say that a block is a term used to describe the units of markups which are composed together to form the content or layout of a web page. Before Gutenberg came into the picture, your live content was residing inside a huge HTML file. So, whenever you want to make any changes to your content, you have to deal with the HTML file.
- In contrast to that, if you use Gutenberg, you will have a block for each of your components such as text, heading, image, quote, etc. and each component has its separate settings & layout. So, when you want to make any changes to the content, you just have to deal with a particular block only.
- Another major advantage you get with blocks is that they are reusable. This means that, if you’ve made a particular block in your blog, you can save it with the settings and then, reuse in your other blog post, if required. This way, blocks reduces a lot of work of the user. In fact, this is the main reason why many believe Gutenberg is a futuristic approach.
When you start exploring the Gutenberg, you will realize there is no TinyMCE toolbar now. In place of that old toolbar, you will get a drop-down menu in Gutenberg, when you click on the “Insert” button. This drop-down menu consists of various blocks which can utilize in order to write a blog post in an effective manner.
Let’s now look at some of the blocks provided by Gutenberg which are very useful
1. Table Block
Inserting a table into your blog post is now simpler. With Gutenberg, you just have to select the “Table Block”, where previously you had to 3rd party plugin OR write an HTML code for that. Currently, you can add a 2*2 table and you can’t style it without going to the text view. But, with the time, you will be able to do these things from the visual view.
2. Text Column Block
If you’re someone who is working a WordPress Development Company for a long time, then you must be aware that nowadays there’s a lot of demand for the Responsive text column. With Gutenberg, you can easily add a Responsive text column by using the “Text Column Block”. Currently, you can choose between 2, 3 & 4 column layout.
3. Live HTML Block
What we mean by Live HTML Block is that you can insert your code and then see a preview right from the block. No need to switch between the visual and the text view, which saves a lot of time.
4. Image Block
With the image block, you can now just drag and drop the images, similar to a visual editor. In fact, those who are using Medium will find it pretty much the same.
5. Recent Block
Sometimes, there is a situation in the blog post where you need to use the same block many times. That’s where the role of Recent Block comes into the picture, as allows you the access to the most recently used block. So, you don’t need to search for that block every time.
6. Slash Autocomplete
This one of the coolest feature of Gutenberg. Slash Autocomplete allows the users to make use of Autocomplete to insert any block. Those who have the knowledge of Slack will know that this a quick way of formatting the content.
7. Table Of Contents
With Gutenberg, you will get a “Table Of Contents” sidebar, which will allow you to jump to the particular section of your article.
8. Word & Block Count
Most of WYSIWYG (What You See Is What You Get) editors provide you with the feature of the Word Count. The same applies to the case of Gutenberg total word count, the number of blocks, and the number of headings as a popup.
9. Pull Quote Block
Whenever you’re writing a blog post, you will always make use of the quotes. That’s where the “Pull Quote Block” can be of great help to you. You can also change the position of the quote by using this block, which allows you to stand out from the rest.
10. Button Block
Call-To-Action (CTA) is such an integral part of any Content Marketing strategy and therefore, bloggers nowadays always add a good Call-To-Action (CTA) button to their blog posts. For that purpose, you can make the use of Button Block which allows you to create attractive buttons.
11. Embed Options
Gutenberg makes embedding the media content easier than ever before. Whether it is YouTube, SoundCloud, Twitter, Reddit or any other, you can easily embed it in your blog post by using the embed block according to your requirement.
Pros & Cons Of Using Gutenberg
- Brand New Editing Experience: Gutenberg comes with a new editing experience which simplifies the task for a common user. The usage of blocks makes it easier for the user to create a highly interactive blog post.
- Easy To Use For Beginners: For someone who is dealing with the platform for the first time, Gutenberg can be an ideal choice. Users don’t need to know to code for creating a blog post.
- Less Distraction & More Screen Space: Gutenberg has removed all the distractions which were present in TinyMCE and provided the user with more screen space. So, the user can enjoy writing the post. It provides Medium style editing experience.
- Works Well On Mobile: As you know that today, most of the internet users are coming from mobile devices and therefore, you need a tool for a blog post which works well on mobile. That’s where Gutenberg rises above all its competitors.
- Disabling Gutenberg Won’t Break Your Site: Unlike other editors, disabling Gutenberg won’t break your site. The reason for that is, even without Gutenberg the HTML comments are rendered in the page source.
- Accessibility Is A Major Concern: Despite having so many good features, there is a major concern about the accessibility of Gutenberg. There are some serious questions regarding how inline CSS will work in Gutenberg.
- Backward Compatibility Is A Massive Issue: One of the strengths of WordPress over the year has been Backward Compatibility. But, with Gutenberg, this could be a massive issue, as there are so many plugins & themes which needs to be managed.
- No Markdown Support: Markdown is a lightweight markup language with plain text syntax. The idea for Markdown is to make it easy to read, write, and edit prose. But, with Gutenberg, there is no Markdown support. So, there could be a serious issue for editing.
- Older Themes Don’t Support HTML5: Gutenberg blocks to output the content using the HTML5 tags. But, there are many older themes which don’t support HTML5. Therefore, dealing with them will be nonexistent, which is bad news.!
Gutenberg is a new-age editor which is designed keeping in mind the future of the web development industry. The whole world is moving towards automation and the same has applied to the WordPress platform where it is preparing an editor which focuses more user-friendliness and less on the technicalities.
Here, we have tried to provide you with an in-depth guide on WordPress Gutenberg which will help any WordPress Web Development Company to understand the basics of this new age editor. If you’ve any questions or suggestions regarding this subject, then feel free to ask them in our comment section. Thank you.!
Disclaimer: We at eSparkBiz Technologies have created this blog with all the consideration and utmost care. We always strive for excellence in each of our blog posts and for that purpose, we ensure that all the information written in the blog is complete, correct, comprehensible, accurate and up-to-date. However, we can’t always guarantee that the information written in the blog correct, accurate or up-to-date. Therefore, we always advise our valuable readers not to take any kind of decisions based on the information as well as the views shared by our authors. The readers should always conduct an in-depth research before making the final decision. In addition to these, all the logos, 3rd part trademarks and screenshots of websites & mobile apps are the property of the individual owners. We’re not associated with any of them.