The future of WordPress are blocks: New Gutenberg editor released as beta plugin

For six months, the WordPress core developers have been working on a new WordPress editor that will revolutionize the way we create content. Now the new Gutenberg Editor has been released as a plugin for testing.

High time to take a look at the ambitious project.

New focus from WordPress

In December, Matt Mullenweg announced a new release strategy and the focus on the future development of WordPress at WordCamp US in Philadelphia .

The WordPress core development should concentrate on three areas:

  • REST API
  • editor
  • Customizer

At the beginning of 2017, therefore, the completely new development of the WordPress editor, which was named after Johannes Gutenberg, was tackled.

The Gutenberg Editor

The aim is a new WordPress editor which is based on so-called content blocks instead of shortcodes, individual HTML, TinyMCE buttons and hidden embed features. This should make creating and editing content much faster, easier to use and easier than before.

The development takes place on Github . Issues and pull requests can also be created there. The most important innovations and milestones are announced in the Make Blog on WordPress.org . Discussions take place in regular Slack meetings.

The project started in January. A first prototype was presented in February with which the basic concept of the content blocks was implemented.

Since then, Gutenberg's development has continued at a very rapid pace.

WordPress Gutenberg Editor released as a plugin

Almost at the same time as WordCamp Europe in Paris last weekend, the new Gutenberg Editor was released as a beta version in the form of a feature plugin .

The plugin was presented by him at the beginning of the interview with Matt Mullenweg:

http://wordpress.tv/2017/06/19/interview-and-qanda-with-matt-mullenweg/

The Gutenberg Editor is now available for the general public to download in the WordPress plugin directory and can easily be installed and tried out.

The Gutenberg plugin provides editing, customization, and site building features to WordPress. This beta plugin allows you to test bleeding-edge featu ...

By: Gutenberg Team

( 3,271 )
Last updated: 4 days ago
300,000+ active installs
Compatible up to: 5.5.3

The only requirement for the plugin is the use of WordPress 4.8 or higher.

It is also an unfinished beta software. The plug-in should therefore not be used on live websites.

The Gutenberg Editor in beta test

After activating the plugin, a new menu item for Gutenberg is added. The plugin does not yet replace the conventional editor.

A finished article with various content blocks is available for quick testing under Demo. Alternatively, a new contribution can be created.

The editor welcomes us here with a very tidy and elegant layout:

The top bar is where the basic options are. On the left you can switch between visual and text editor and save. At the top right there are buttons for inserting new blocks as well as for previewing and publishing the article.

Also at the top right is the gray Post Settings button, with which the right sidebar can be deactivated and the content area can be displayed in full mode.

The right sidebar shows all the post's meta boxes, including categories, keywords, post image, post excerpt (excerpt), comments, revisions and publish.

Overall, I already like the layout a lot better than the previous editor.

Dynamic blocks as a basic principle

For an article with mostly text, you can simply start writing. Pressing the Enter key twice automatically creates a new block for the paragraph of text.

Prolific writers can type consistently and don't have to manually add a block for each new paragraph.

New blocks can be inserted by clicking on the plus sign. It is also possible to highlight a paragraph of text and turn the block into a heading or quote with one click.

When a block is selected, a toolbar for text formatting is automatically displayed, for example to insert links, select h1-h6 for headings or make text bold.

The order of the content blocks can be changed with the practical navigation arrows on the left. Several blocks can be marked at the same time and moved up or down.

In addition to the classic and expected blocks for text, headings, lists, quotations and media, the beta version already contains many other elements. Gutenberg supports, among other things, tables, buttons, separators and the insertion of a widget to display the last posts.

A look at the editor's text mode is also informative.

There you can see how the content blocks are saved in the database. In order to maintain compatibility with plugins and themes, the entire content is stored in a single database field, post_content, as before.

In order to identify the content blocks, they are nested by HTML comments:

 <!-- wp:core/text dropCap="false" --> <p>Mit einem Klick auf das Plus-Zeichen können neue Blocks eingefügt werden.</p> <!-- /wp:core/text --> <!-- wp:core/button --> <div class="alignnone"><a href="https://wordpress.org">Button</a></div> <!-- /wp:core/button --> <!-- wp:core/separator --> <hr/> <!-- /wp:core/separator --> <!-- wp:core/image --> <img src="1607-uploads-06-icons-png-de.png" class="alignnone" /> <!-- /wp:core/image -->

When the content is output in the frontend, the blocks are parsed by appropriate filters and the comments are removed. The whole thing works in a similar way to the more tag in the current editor.

If you still haven't seen enough of Gutenberg, you can also watch this Youtube video. In Dutch, but the feeling and user experience of the editor becomes very clear.

YouTube

By loading the video, you accept YouTube's privacy policy.
Learn more

Load video

Conclusion

The new Gutenberg Editor already leaves a very good impression.

I think the tidy layout is a clear improvement, which eliminates the need for annoying searches and scrolling for metaboxes. Working with the blocks is very intuitive and quickly become second nature.

Don't forget that this is a first beta version. It often feels jittery when, for example, buttons overlap or blocks overlap, which is the case with images that are aligned to the left or right.

Here the WordPress team relies on feedback. It is therefore advisable to try out the plug-in yourself and actively participate.

I find it a bit exaggerated to list every supported service of the embed feature as an extra block in the insert dialog. As a result, the list of blocks is already very long. In my opinion, a general embed block would be sufficient here.

At the moment the editor only works with core features and does not yet offer any integration with plugins. That means metaboxes, which are added by plugins such as Yoast SEO, are still missing. How TinyMCE buttons and shortcodes will be implemented by plugins remains to be seen.

Gutenberg release

Gutenberg is sure to be one of the biggest innovations in WordPress in the near future. The plug-in should therefore be tested extensively by the time it is released. An installation on at least 100,000 pages is desired.

Therefore the new editor will not be included in the core with 4.9, but with a lot of luck the introduction of the new editor will work with WordPress 5.0 .

The future of WordPress are blocks

Finally, I would like to come back to the title of this article.

In an interview with WordCamp Europe, Matt Mullenweg criticized the many different elements in WordPress, which can usually only be used in a certain context. Shortcodes only work in the editor, widgets only in sidebars - tedious to learn for WordPress beginners.

In the future, these concepts are to be standardized as blocks.

This plan became very clear at the beginning of the interview:

We are going to build a lot more types of blocks and this is the basis for what is going to be the future of customization. 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 EU 2017

The result could be an editor with which not only text and images can be inserted very easily, but also widgets and blocks registered by plugins. If plugins can easily add new blocks, a lot of new possibilities would open up.

If, for example, plugins are used for a portfolio, testimonials and contact form, the new editor could be used to create a start page that displays these elements in combination by simply adding them as a block.

The whole thing goes in the direction of a simple page builder.

Gutenberg could indeed cause a revolution in WordPress. What do you think?