Discover the new Gutenberg WordPress editor
WordPress 5.0, which is due for release at the end of 2018, will come with a new editor called Gutenberg. If you want, you can already try the beta version. But what is the philosophy behind this editor? What new features does it have? And how can you install it?
Gutenberg introduces blocks that are fully customisable
At present, when you create a new post in your WordPress dashboard, you are taken to the TinyMCE editor, which is a WYSIWYG editor. What you see is what you get: every time you format your text, you can immediately see the changes on screen. This is a fine editor, but it is gradually becoming outdated.
That explains the development of the Gutenberg project, so named after Johannes Gutenberg, the man who, more than 500 years ago, invented a printing press in which the letters were separate blocks (movable type), which is exactly the basic principle behind Gutenberg, where everything is built using blocks that are fully customisable.
What is the benefit of using blocks?
In a nutshell, Gutenberg allows you to build your content as you would with a LEGO set: everything comes from one box, and the same instructions apply to all blocks. The TinyMCE editor was different, as it featured specific types of postings, multimedia content embedding, widgets and more, all requiring their own interface.
For each block in your content, you can define the attributes of the block. A block can be a text paragraph, a list, a header, a gallery, etc., and you can edit that attribute with a simple click. This means you can e.g. turn a line of text into a quote or change its alignment, style, etc.
You can also create reusable blocks. This can come in handy e.g. when you have found the ideal layout for the intro of your posting, since you can then save that block and its settings. In the next posting, all you have to do is add your custom intro block.
This allows you to create fully-fledged page templates consisting of different blocks. All you have to do is add your text. A block that is being created is the repeatable block, which you can use on different pages: if you change a text or layout in one block, the change will affect all blocks.
This opens up huge opportunities for developers, as they can now deliver a WordPress project to the client, with different template pages, where the user can add and format the text (within certain limits), but cannot do anything outside the defined elements. Think of a template for an article with three columns, a template for a product page, etc.
But the possibilities are wider. For example, the developer of a SEO plugin can add comments to the blocks to make the content of the block more SEO-friendly.
Discover our WordPress hosting
Why a new editor?
On the one hand, this editor allows to compensate for certain deficiencies. Today, content must be adapted to the size of any screen (responsive design), whether on a laptop, tablet or smartphone, and WordPress often has some difficulties with that. Other content management systems such as Medium also offer more advanced tools to edit text, which makes long reads much more attractive.
On the other hand, the Gutenberg editor makes WordPress ready for the future. There are more tools to edit texts, but at the same time they are also easier to use. Plus, the visual display is adapted to the screens of the future, such as VR headsets. And that is very important because such devices allow users to have the content to their left visual field, a search module at the bottom, and comments at the right, for example. And blocks make all this possible.
How does Gutenberg work in concrete terms?
When you open the Gutenberg editor, you immediately notice its minimalist approach. The workspace is much larger, making it a lot easier to work from your smartphone. Also, it helps you stay focused.
By default, the Gutenberg editor displays the following blocks:
- Basic blocks (image, paragraph, plain text, heading, quote…)
- Formatting (pull quote, table…)
- Layout elements (splitting text into columns, buttons, separators, adding a “read more” tag...)
- Widgets (last posting, categories)
- Embeds for external (multimedia) content
Hover your cursor over a block, and you will be given the option to move a block up or down, to remove it, or to change its settings. You can also navigate to the Block tab for more settings.
Some useful new features that come with the blocks:
- Add tables as blocks – it is no longer necessary to use plugins or dive into HTML code
- Format text in 2, 3 or 4 responsive columns using the Columns block
- Add an HTML anchor in a text block, so that when you share your posting, you can refer directly to that block.
- Add a quote (pull quote), and select one of the extra options (align wide or align full-width)
- Use a button as call-to-action via the Button block.
- For your multimedia content, the Embed button offers you a wide choice of external content from YouTube and Instagram, but also from Reddit, Meetup, Tumblr, Vine, etc.
- Do you want to dive into the HTML code? Click on the three dots in the upper right corner to open the Code Editor.
Trying out Gutenberg
As we mentioned earlier in this article, Gutenberg is currently under development, and its final 1.0 version will soon be available. When WordPress 5.0 will be released, probably at the end of 2018, the Gutenberg editor will become the default editor. However, if you experience any difficulties using Gutenberg, you can always install the classic editor as a plugin.
Do you want to get started with Gutenberg now? You can! Although we do recommend that you try it out in a test or staging environment rather than in a production environment. You will also require WordPress 4.8 or higher. By September 2018, the editor had already been downloaded more than 1.7 million times.
To install Gutenberg, go to Plugins > Add New in your WordPress dashboard. Search for “Gutenberg” and click Install Now. From now on, you will be able to open the Gutenberg editor via your dashboard (under Posts).
Do you want to try out more extensions?
If you feel like being adventurous, and would you like to try out other tools that might be included in the WordPress core in the future, then you should try out some of the following interesting plug-ins (at your own risk!):
- Two Factor: add 2F authentication, so that you and other back-end users can log in even more securely
- Customize Posts: see how your changes affect the front-end of your website right away
- Dark Mode: use a nightly colour scheme in your dashboard
Please visit the WordPress site for more beta plugins.
If you want to find out more about the Gutenberg project, YouTube videos posted by Gut Guys will give you many practical tips, and the talk given by Morten Rand-Hendriksen at the 2017 WordCamp in Nashville will give you an insight into the background and future of Gutenberg.
Related posts
