The Good, the Bad and the Pretty - WordPress Gutenberg on Trial

If you believe Matt Mullenweg, the new WordPress Gutenberg editor is the future of WordPress. And after the first test, it turns out that he could be right. Provided that Gutenberg can also be used for live operation with the coming releases. We present an overview of the biggest deficits and most important functions of the new editor.

It still leads a shadowy existence as a beta version. This could hamper the development of the new editor. That's a pity, because in principle Gutenberg is a wonderful editor. Regardless of how the beta phase, further development and core integration are going, we have taken a closer look at Gutenberg and show you what you can look forward to and why you should not use Gutenberg in live operation.

The contents at a glance:

The installation
The new block system
Images
Videos
Quotes and social media
Tables and code snippets
Buttons
HTML
Conclusion

The first shock: everything as before

The installation is the same as for all other plugins: search for Gutenberg in the plugin directory, download, activate, done. The new editor can then be found in the sidebar of your WP dashboard.

In fact, I first looked for a corresponding button in the editor of a new post. Unfortunately in vain. The first insight at this point: Gutenberg does not automatically become the default editor. However, you can open existing postsvia Gutenberg . To do this, you have to go to the post overview and select the, somewhat hidden, Gutenberg option.

Old postscan also be opened with Gutenberg . — The Gutenberg option is somewhat hidden in the quick selection of posts.

Unfortunately, the result is anything but beautiful at the moment: If you open an existing article, the entire content is packed into a single block, at least in our test. This leads the excellent block system ad absurdum. And of course it means that articles that were not created with Gutenberg cannot be edited with the new editor.

We also noticed two other serious problems: Firstly, setting links did not work in our test (neither on URLs nor on article-internal hooks). And secondly, Gutenberg cannot yet display plugin-specific article options. For example, the SEO and social media options of Yoast are not set under the article as usual and the author of an article cannot be set via Gutenberg itself.

existing postsunfortunately completely shatters gutenberg — The result of trying to open an existing post in Gutenberg : Not only is the image distorted, but the image and text are in the same block. In addition, the links no longer work.

All these points mean that Gutenberg is simply not yet suitable for live operation. Since the editor is still in the beta stage (currently in version 0.2.0), this is bearable, but the limit of 100,000 active installations in the next two months proclaimed by Matt Mullenweg now seems utopian. This is not bad per se, but it does raise the question of when the full version will be launched.

This is because the beta stage could lead to many users who do not have a development environment or test instances shying away from installing and testingGutenberg . Raidboxes By the way, customers can easily test the editor in staging or on a DEMO BOX .

Because Gutenberg is not really suitable for live operation in its current state for several reasons, we will limit our test of version 0.2.0 to the writing process itself. With Gutenberg , the writing process is easier than ever before.

The block principle convinces and inspires

The editor actually looks just as good from the start as it does in the Demo. Our impression is that it looks more like a page builder than a text editor. But don't misunderstand: At present, only posts, not pages, can be created with Gutenberg .

The block principle is based on the idea of providing each content, argumentative or media unit of your blog post with its own configurable and movable environment. In other words, a block.

Actually, the idea goes even further: blocks are to become the new meta-format for WordPress and gradually unite and replace all other elements.

We are gonna build a lot more types of blocks. And this is the basis for, of course, what is gonna be the future of customization. So blocks will replace widgets, blocks will replace kind of all the other fundamentals and primitives inside WordPress-until everything is a block
- Matt Mullenweg, WordCamp Europe 2017, Paris

Every element that you insert into one of your postsis defined as a block. It doesn't matter if it's an image, a video, a quote, a tweet, a table or a button. The great thing about this is that the blocks can be moved independently of each other. Not yet by drag and drop, but only in individual steps, but this also makes it much easier to restructure contributions and their design.

Already in the beta, Gutenberg provides several dozen possible block types. — When you create a new block, you will see all the configuration options. Currently, this is already an impressive number, but it is expected to grow even more over time. However, this also raises the question of the overview. You can already scroll quite far in the block selection.

The block principle has three specific advantages, which we were able to determine in our one-hour test:

1. content creation becomes more dynamic

Each paragraph, each picture, each video is a separate block. These blocks can be moved independently of each other. Restructuring texts thus becomes child's play. This shifting is still only possible in individual steps and not by drag and drop.

Moving blocks at Gutenberg is only possible in single steps, but it is super easy.

2. more overview and tidier editor

With its clean design, the editor literally begged us to test all possible block formats. Our impression: Thanks to the very reduced design, which is a kind of "distraction-free writing" deluxe, we were encouraged tothink much more intensively about the possibilities of design and their meaningfulness. This is also due to the novelty of the editor itself, but especially in combination with the dynamics of the blocks, Gutenberg offers a completely new experience of content creation. The uncompromising text-centricity is particularly helpful here. And: We think the editor already looks damn good.

Gutenberg has an extremely reduced surface. And yet it looks outstanding. — The editor is so reduced that the distraction-free writing mode is no longer needed. The settings bar on the right can also be folded in.

3. more focus on the essentials

Finally, the new block principle has the advantage that it supports the natural thinking and writing process once you get used to it. Every thought, every argument becomes a block. This makes structuring articles much easier and more intuitive.

The block principle is easy to understand, intuitive, facilitates content creation and, in our opinion, from a UX perspective, definitely has the potential to become the big hit it is touted to be.

Working with images is a real pleasure

The insertion of images also runs via the blocks and in principle exactly as before - just a little more intuitive. Once you have created an image block, you select the image from the media library or upload it. Then you can adjust it via the special image options of the block. The great thing about this is that only the options you need are displayed. Caption and alternative text can also be written directly in Gutenberg . The settings bar on the right also adjusts accordingly depending on the selected block.

Images in Gutenberg can easily be left-aligned, right-aligned and set to full width. — Not to be seen: On the right, all image-specific detail settings can be made. In the layout bar on the left, the image can be placed accordingly.

By the way, the layout options shown above apply to all blocks, i.e. videos, quotes, social media posts, etc. We also noticed that the gallery option now has its own block. This may make the option more accessible for some people.

Video integration directly via the platform

Even when embedding moving images, the workflow with Gutenberg is not interrupted: Simply create a new block, select the respective medium (or a blank embed block), insert the URL, done.

Due to the number of individual offers, the block selection becomes somewhat confusing. In addition, we do not understand the purpose of the special blocks for certain video platforms, such as WordPress.tv. Because you can also simply embed all videos via the universal embed block.

Quotes stay the same, social media posts become beautiful and simple

The embedding of quotes has not changed much, except that they can now be moved more easily thanks to the block principle. Embedding social media posts, on the other hand, has become a little easier and prettier: because now you can workdirectly by entering the link and without embed code.

Gutenberg also makes the integration of tweets very easy.

Brand new: tables. Everything the same with code snippets.

A completely new feature is the option of inserting tables directly via the editor without the need for an additional plugin . At present, however, only two-column tables are possible, but inserting them is just as easy as with all other blocks. In our test, the tables were not yet able to do more. In addition, the column width shifts dynamically during text entry. You can tell that the block is not yet finished.

When inserting code snippets, however, everything remains the same.

The best for the end: Buttons

Finally, a WordPress editor offers the possibility to set buttons in the normal publication workflow. Just like that, via a specially created block. In principle, you only have to insert the button, define the link behind it and select the label and colour. In principle. Because in our test, this feature did not work yet either.

HTML adjustments as usual. Only more beautiful.

The block system was not adopted in the HTML editor. It looks the same as before, just a little fresher thanks to the new design. And the code is now automatically indented. This helps with the overview.

this is what html looks like in the old editor

this is what html looks like in the new editor — Above, the variant from the current editor. It is shorter overall due to the higher line width, but in comparison to the Gutenberg variant with indented lines, it is also more confusing.

Incidentally, it is also possible to insert custom HTML blocks via the visual editor. The beauty of this is that the HTML code can be edited in the block and the result can be viewed directly.

how to integrate custom html gutenberg — A simple button at the top left of the block allows you to switch between the code and the preview in Custom HTML.

Conclusion: The feeling is good, the functions still need improvement, the compatibility poor.

The current Gutenberg version 0.2.0 is a beta version. Therefore, it is not at all necessary that everything already works smoothly. It does not. The tables and buttons in particular still need work - two of the most interesting blocks. And the backward compatibility and integration of important publisher functions are not yet running smoothly. So at the latest when fine-tuning a new contribution, you have to switch back to the old editor. For more than a test and a quick look into the crystal ball, Gutenberg is therefore not really useful at the moment.

In one respect, however, the new editor is completely convincing: the block principle. This speeds up the writing process considerably and makes it much easier and more intuitive. This should be an enormous relief, especially for frequent writers.

But the block principle is even more important and holds much more potential than just making it easier to write posts. And you can tell that Mullenweg actively wants to move towards a block-based WordPress. In his Q&A session at WordCamp Europe in Paris, he already clearly hints at where the journey is to go.

We are gonna build a lot more types of blocks. And this is the basis for, of course, what is gonna be the future of customization. So blocks will replace widgets, blocks will replace kind of all the other fundamentals and primitives inside WordPress-until everything is a block.
- Matt Mullenweg, WordCamp Europe 2017, Paris

We interpret this as follows: The new WordPress editor, which, mind you, is to become part of the WordPress core, is to be actively developed in the direction of a powerful page builder. Should the block principle then become applicable beyond the post level, the next releases should be extremely interesting. But before that happens, Gutenberg must first grow up and earn its right to exist as a WordPress editor.

In any case, we look forward to further updates and of course a stable full version of Gutenberg. Do you have any input on the new editor that we haven't covered or an experience you'd like to share with the community? Then we look forward to your comment!