Gutenberg – The New WordPress Editor

“Gutenberg, the editor at WordPress 5.0, is only the first step in the transformation that WordPress will undergo in the next few years.”

Maybe you’ve noticed some quakes around WordPress lately. Something has been brewing for quite a while now and its name is Gutenberg. This is a new editing environment in WordPress and its impact is going to be quite significant.

Some people accept this editor with open arms while others criticize it. But between these two there is a large group of WordPress users who have no idea what it’s about. In this post I will introduce you to Gutenberg – the new editor of WordPress 5.0.

What is Gutenberg?

Gutenberg is a new editor for WordPress that will replace the current TinyMCE editor (the WYSIWYG editor with which you edit posts and pages). The current editor of WordPress, in other words “The Classic Editor”, required us to use surges, plugins and a some HTML to get certain results.

The classic wordpress editor is not very convenient for work and there are quite a lot of things that can’t be done with it and some designs cannot be achived.

Options such as fixed or stretched images across the entire screen, backgrounds for elements, adding widgets in the middle of the content etc, were not possible in this editor without external aids or plugins.

The goal of the new Gutenberg editor is to facilitate the writing and editing process and to allow quite a few new possibilities for new layout and design, especially for those who just started to deal with WordPress.

Before we go on, let’s see how the classic editor compares to the new Gutenberg:

The current (classic) editor of WordPress

Gutenberg – the new editor of WordPress

This is much more than an aesthetic change – Gutenberg is going to completely change the editing experience by adopting the block method , so that each part of the content is a block of a certain type, which can be defined according to the nature of the block.

The aim is adding to this editor more advanced layout options over time in order to enable a simpler and smoother editing and writing experience, among others.

At present, Gutenberg is in the process of development and is not intended to work on live sites. Since Gutenberg is currently still experimental, the staff working on Gutenberg’s development encourages people to try out the new editor and leave feedbacks and comments on the WordPress support forum .

As of this writing, Gutenberg is a WordPress add-on (officially released in version 5.0). It can be installed from the WordPress repository and currently has about 300,000 active installations. It requires WordPress version 4.8 and above and has a pretty low average rating of 2.3 stars.

One of the reasons for the low score is the number of people who are going to be harmed in one way or another by the changes Gutenberg will bring with him. These will create a lot of work for plugin developers who want to align and adapt themselves to the new editor.

The change will require some WordPress developers to learn quite a bit of material to stay up-to-date, and let’s not talk about those developers who might suffer from this change, if not now, then surely in the future.

In spite of what has been said – some argue that Gutenberg is the opening to new and interesting developments and developments for all the people I mentioned in the previous paragraph. In the end, I think it’s a matter of perspective.

Before we proceed, here are some interesting points:

  • WYSIWYG Initials are What You See Is What You Get … 🙂
  • The editor Gutenberg was named after Johannes Gutenberg – the inventor of printing using moving parts more than 500 years ago.
  • Gutenberg is built with React, but you will not have to learn React to develop Gutenberg blocks (if you’re a WordPress developer).

Gutenberg’s editor is just the first step in the future of WordPress

Many people ignore this, but Gutenberg is not just the new editor of WordPress rather beginning of something much bigger. Gutenberg sets the milestones for more exciting developments and is only the first stage of a three-stage strategy.

Initially, WordPress will be renewed in a more powerful content editor developed from scratch. Then the project will focus on page templates, and in the last step WordPress will be a platform that can be changed from one end to the other, kind of a very wide customizer.

You can imagine that these innovations will bring endless possibilities with them and this is actually an inevitable change in order to align with the industry and leave WordPress as the #1 CMS in the coming years.

In this post I will focus on the first stage of the strategy and it is the new editor – Gutenberg. This editor will come to us sometime this year when WordPress 5.0 will come out officially. We approach this day very quickly and many people work day and night to make this editor a stable product. Add-on developers also work nonstop to provide support for Gutenberg, and they have quite a bit of work to do.

How to install Gutenberg?

As I mentioned, Gutenberg will replace the classic WordPress version of WordPress 5.0. For now the only way to play with the new editor is to install the Gutenberg plugin and the way to do this is as standard as installing a WordPress plugin:

  • Go to Plugins > New Plugins.
  • Search for Gutenberg.
  • Click Install Now.
  • Activate the extension.
  • Once you’ve enabled the plugin, your site will use Gutenberg’s editor by default, just like WordPress 5.0.

How Gutenberg will affect the current content on your site

Once you’ve installed Gutenberg, when you’ll edit a page or post you’ll see the new editor. By default, Gutenberg will treat the entire page content as a single HTML block. As you can see in the picture, you can leave the page as is and edit it in the HTML editor if you want and feel comfortable doing so (Edit as HTML).

In the next section we will further explain what these blocks are, so keep on…

It is likely that if you won’t convert your content to the blocks in question, the content will look exactly the same for the visitors on your site as it was prior to installing Gutenberg. But if you want to use the new editor, you will have to convert the content – that single HTML block into individual blocks.

To do this you must click the “Convert to blocks ” option that appears just below “ Edit as HTML ” and it will automatically convert all the contents to the blocks so that you can start working with the new editor as you intended to do. Content after performing this action, especially if there are non-standard elements or special functionality in the content of the page.

Therefore, perform the necessary tests before saving the post and see how it looks in the preview. In general, it will be correct to perform all changes and tests in a local environment or a staging environment and not to try it on the live site. As always, we also recommend backing up your WordPress site before testing and modifying it.

Let’s move on and explain what blocks are and how the new editor works …

How Gutenberg’s editor works

We mentioned earlier that Gutenberg is a Block Editor, but what does that mean? Essentially, Gutenberg will be able to edit the content using many individual blocks when these blocks will allow you to build more complex designs than the classic WordPress editor.

What is actually a block?

A block can actually be just about anything. For example, you might have a block for:

  • Plain text
  • Photos
  • Video
  • Buttons
  • Widgets (yes, those you’ve used in Sidebar)
  • Tables
  • And so forth…

Each block is an entity in itself that you can change individually. For example, a paragraph block – you can change it’s background, the color of the ticks and make the first letter a drop cap.

You can also duplicate it in a very simple way, add a class to each block and even add it to a reusable blocks list where you can reuse it in other posts which is a very useful option.

Gutenberg in its latest version also allows for the placement of elements by Drag & Drop that will make the work very easy. You can also change the position of elements with the click of a button.

For example, here is a post in Gutenberg’s editor containing two blocks, one text and the other a picture. Notice how simply how fast you can change their order by pressing a button:

So Gutenberg is actually a type of Page Builder?

Mmm. Not exactly, at least not at the present stage. Gutenberg is going to facilitate the work of standard content design such as blog posts or basic pages, but it is not a complete replacement for Page Builders in its current configuration.

On the superficial level, Gutenberg lacks two essential elements:

  • Flexible Columns – There is a Column Block in the beta version, but it is far from working properly and is pretty basic.
  • The ability to fully drag & drop – the latest version of Gutenberg allows dragging and rearranging elements, but does not allow it as freely and fully as you can with Page Builders.

Maybe in the near future Gutenberg will remove the need for Page Builders to edit the basic content of posts and pages. But when it comes to creating more complex pages, such as landing pages for that matter, those who use Page Builders will appreciate the freedom and possibilities that these tools allow.

An important point about Gutenberg to consider is that he will create and provide one way to create layouts in WordPress, as opposed to a large number of Page Builders that work differently from each other.

To summarize this part, Gutenberg may replace those Page Builders someday, but at the present time, these allow greater freedom when it comes to building complex and independent pages. It seems that those Page Builders will adapt themselves to the new editor and will simply enable additional functionality alongside Gutenberg’s functionality.

How to use Gutenberg – the new editor of WordPress

Once you’ve installed Gutenberg, let’s see how to use it in practice, so when WordPress 5.0 officially comes out you will not be lost in the dark …

Quick Overview on Interface
Before we start adding blocks, let’s go through Gutenberg’s interface and the elements in it:

  • (A) – Allows you to add new blocks.
  • (B) the Undo / Redo buttons.
  • (C) information about the post – the number of words, the number of headings, blocks, etc.
  • (D) – Gives you access to the page settings. Options such as categories, tags, date, view status, and so on. Reminds the Sidibar in the classic WordPress editor.
  • (E) – When you are standing on an individual block, you will see in this section the specific settings for this block.
  • (And) – Allows you to see the preview of the post as well as update or publish it.
  • (G) – Once you have added a few blocks, this is the area where you will edit the block / post content.
  • (H) – More options – Switch to HTML editor, switch to a different display type (such as full screen) and more ..
  • (I) – Quick shortcuts for adding blocks.

Adding blocks

As we mentioned, you are going to use separate blocks to build your page. To add a new block, you must click on the Plus button and select the type of block you want to add as the following example:

In the picture above we can imagine that we added a paragraph block. But Gutenberg has many other possibilities of blocks, some of which may be a little hidden at first glance.

Go to the Block Search option. Note that when you click the plus button, the most used blocks are displayed. But if you scroll down a little, you’ll find many more options broken down into categories.

These categories include blocks of various types – Formatting, Layout Elements, Widgets and the like. These include tables, quotes, buttons, widgets, scourges, and embedding options from external sources such as Facebook, Twitter, etc. We will not expand on any of the categories (believe in the future) but review them and see your options.

HTML Editor – Code Editor

As you know from the classic editor, you can also go to the HTML editor at any time and edit the code directly. The way to do this is by clicking the same 3 points on the top right of the editor and selecting the Code Editor option. What will surprise you is that you will see a lot of unclear comments in the code …

What are the same comments you ask? These are actually the blocks you added one by one. In the picture above, you will notice that there are several names of blocks. For example, wp:paragraph accompanied by JSON code is a wp:paragraph block.

When you modified or added settings to a specific individual block, these were saved together with the block itself in JSON format. For example, text color, background color, text alignment, and so on.

code

If you cancel Gutenberg, the block settings will be saved when you run it next time. However, the classic editor will not refer to those because they are HTML Comments.

If you look at Chrome’s Developer Tools on an element with some settings, you will find that these have been added as Inline CSS in the frontend.

Gutenberg is the future

Once you understand the flow of how things work with Gutenberg, you will find that he is quite intuitive. At first, you will probably find it difficult to do simple things that seem obvious – but once you get into things, I think you’ll start making pages and layout much more complex than the classic editor. Do not forget, by the way, that you can expand Gutenberg and add lots of new block types using custom plugins from the WordPress Plugins directory.

So yes, despite all the opponents Gutenberg is going to go out and become an integral part of WordPress 5.0. For normal users, Gutenberg will allow greater flexibility after the adjustment phase. In the hope that this change will help WordPress, our content management system, to grow even more.

If you are interested in getting the latest updates on the changes Gutenberg is going through and the new versions, take a look at the # gutenberg tag in Make WordPress Core . I also highly recommend taking a look at the next video although it’s a bit long. It will shed light on Gutenberg’s essence and why the change is welcome:

More will be written about Gutenberg in the coming months at Subi Blog. If you are interested by the way to know ways to turn off Gutenberg give a look at the link.

Keep up to date, subscribe to the mailing list and I will be very happy if you follow the Facebook page of the blog . As always, comments and questions are welcome in the comments below …. 🙂

רועי יוסף
Roee Yossef

My name is Roee Yossef and I'm an experienced web developer based in Israel. I work with creative agencies and freelance web designers around the world to deliver powerful responsive websites.

1Comments...
  • רועי יוסף 19 בDecember 2018, 2:17

    This is a Test!

    .logo_img svg {
        -webkit-text-fill-color:#2d2d2d;
        display:block;
        fill:#2d2d2d;
        -webkit-transition:all .2s;
        transition:all .2s;
        width:140px
    }

Leave a Comment

Beats
Up!