The currently used WordPress visual editor did not make a big change for more than a decade. Most of the functions did not change, occasionally a very small minor change only occurred.
This is not a bad thing. Providing a stable editing experience is one reason WordPress is popular. However, as other platforms (such as Medium for example) began offering a very unique and easy-to-use editing experience, WordPress was slightly outdated.
So WordPress provides a whole new editing experience with a milestone of 5.0.
Their goal is to make WordPresss even simpler and fun.
I fell in love with this new era at first sight, developed a plugin that loads documents and efficiently uses wonderful functions.
I am going to introduce the preparation, advantages, and disadvantages of this plugin in the position that I knew Gutenberg’s function at the source level, with the release of WordPress 5.0 approaching November 19, 2018.
What is Gutenberg?
Gutenberg is the new editor of WordPress.
This name was given in honor of Johannes Gutenberg who produced letterpress printing technology more than 500 years ago.
The current visual editor is to make articles using HTML and short code.
The current visual editor is to make articles using HTML and short code.
However, it had the following drawbacks.
- The editor code gets messed up
- Because the short code has a lot of server processing, the site becomes heavy.
- As soon as you remove the plug-in that introduces the short code, the short code does not work. When you manage the site over the long term, it becomes troublesome when you suffer from the performance of the site. You can not erase it even if you want to erase it.
- Even if you do not process the short code, the tag will remain like [shortcode]. This is a fatal weak point as a content experience.
Gutenberg solves all these disadvantages.
The way of development is long, and the WordPress developer team hoped for a prior installation of over 100,000 in order to release a stable version.
Fortunately, as of November 3, 2018, active installations exceeded 600,000, and Gutenberg’s major bug fixes are over. (There are still fine issues, but I will mention it in another article.)
How to install (if you do not have WordPress 5.0 installed)
As for how to install Gutenberg, I also mention it on the document page of my plugin, so please refer to it. If you already installed WordPress 5.0, it is unnecessary work.
Let’s experience Gutenberg
Let’s use Gutenberg. As usual, select “Add New” from the management screen. You will notice two choices here.
- Classic Editor
Compatibility with old type editor functions is also left, and people who want to use the old wordpress editor can click “Classic Editor”. For this time, click on “Gutenberg”.
By the way, there is a possibility that there is no option of “Classic Editor” in WordPress 5.0. In that case, let’s install a dedicated plugin already released.
After installation you will see the following screen. It is a completely new interface.
The first impression of the Gutenberg editor is that “the editing screen is wide”. For me working on a laptop, this is a big merit.
How to use
First of all, please watch the next movie.
Let’s look at the frame on the left.
First of all, there is a block insertion screen, and from this we insert a block and edit it.
Next to that, there is a function that displays the number of Word etc. It will be an important tool for those who want SEO properly.
Next to that, there is a function to display the type of block inserted in this page so far.
Looking at the right side, the elements which existed in the editor so far are listed in “Document”.
You can insert categories, tags, thumbnails etc. from here.
Press the “More” section at the upper right of it, you can set toolbar settings and Editor settings.
There is “Code Editor” here, but this is not the same as “Classic Editor”.
It is a screen to use when you want to see the inserted block code base.
In fact, there are still bugs that can not erase the Embed block, and if you want to delete the “Embed” block you inserted once, you need to use “Code Editor”. (Whenever you do this, I recommend you to save always.)
The site will be available in the future
By the way, WordPress seems to develop this system as a module that can be used throughout the site including “sidebar” and “menu”.
What we’re trying to do is shift it so that you only have to learn about blocks once and once you learn about the image block, that can be in a post, in a sidebar, in a page, in a custom post type, and it will work exactly the same way. Whatever is integrated with it, let’s say a plugin that brings in your Google Photos or your Dropbox, that will now work everywhere, too.Matt Mullenweg (src: WP Tavern)
Although there is opposition forces …
It is natural for conservatives to oppose new functions, and even in this case there is an “Anti Gutenberg” user. However, it is also a matter of time to do this.
In the first place, all future bases of WordPress development will be “Gutenberg”.
And the Gutenberg function will spread through WordPress.
“Classic Editor” will definitely become obsolete in a few years.
Advantages and disadvantages of Gutenberg
Gutenberg has both advantages and disadvantages
I declare in advance that it is not a reason for this disadvantage to continue to use “Classic Editor” personally.
Let me first describe the advantages.
- Easy to attach to users using the same type of interface, especially ‘Medium’ etc.
- Easy handling of embedded content, mainly Youtube · Twitter · images, will be improved .
- Overwhelming improvement in site performance
- Once you can use blocks you can use and you can create custom blocks yourself li>
- Two columns You can build the above layouts readily.
- Since there is a “Classic Editor” block, it is possible to use a conventional editor together.
Especially the improvement of the site performance is very wonderful from the developer’s perspective.
Therefore, the site load is much lower than the conventional short code base output function.
Besides that, although the function of constructing a layout of two or more columns may not be used on blog pages, it seems to be useful in top page etc.
The disadvantages are as follows.
- There are still many bugs.
- It is very difficult to collect specific elements (such as color change) in past articles collectively. That is, site renewal is difficult.
- Compatibility with the type plug-in which extends “Classic Editor” such as “Visual Composer” is considerably bad.
- It is very difficult to create custom blocks, making it more difficult to maintain backwards compatibility.
Even before the official release, the bug is still noticeable. In addition, for example, if you want to change the text color of the headline of all article from “black” to “blue”, you only have to individually edit the article or directly manipulate the database and collectively correct it.
The former is too time-consuming and not realistic, and most users are hard to do for the latter.
I have created many custom blocks for my plugin, but it took a long time to make source code that keeps backwards compatibility.
In conclusion, I am very satisfied with this new editing experience. However, this is because we have grasped the source code freely, including bug fixes.
For users who do not know the technical stuff, there are cases where you are troubled.
For that reason, I am developing plugins that fix bugs and providing custom blocks, so please do install it by all means. It will be a little useful.