In this post, we’ll discuss the new Gutenberg editor and give you an overview of its basic functions.
Gutenberg is currently in development and is available as a testing plugin that you can try out at any time. If you’re curious Gutenberg, we recommend downloading the plugin and playing around with it. The plugin is not for use on live sites so only use it in a testing or development environment. If you need to set up a testing environment, follow our DesktopServer set up tutorial or read Elegant Themes’ MAMP set up tutorial.
For a full breakdown of the Gutenberg editor, as explained by Matt Mullenweg and demonstrated by lead Gutenberg developer, Matias Ventura, watch Mullenweg’s State of the Word address from roundabout 33 mins onward.
What is Gutenberg?
“The goal of the block editor is to make adding rich content to WordPress simple and enjoyable.” – From the Gutenberg plugin description on WordPress.org.
Gutenberg is a new editor that intends to replace the current WYSIWYG editor found in WordPress’ pages and posts.
For ages, WordPress has used TinyMCE as the WYSIWYG page or a post editor interface.
To offer its users a more engaging and enjoyable contemporary content writing and publishing experience, Gutenberg was introduced.
“The editor will create a new page- and post-building experience that makes writing rich posts effortless, and has “blocks” to make it easy what today might take shortcodes, custom HTML, or “mystery meat” embed discovery. — Matt Mullenweg
The intention is to streamline the WordPress content publishing experience and make it both lighter and more enjoyable for its users. With Gutenberg, WordPress users will be able to create beautiful page or post layouts both quickly and easily, and without getting distracted by configuration settings.
Enough theory, let’s see what Gutenberg is like in practice.
An Introduction to the Gutenberg Editor
If you’re keen to check out Gutenberg, play around with it on a testing or development site. Follow one of these detailed guides for how to set up a local testing/staging site:
- The Benefits of Setting Up a Local Development Environment (DesktopServer Series: Part 1 of 4)
- How To Create A Local WordPress Installation On A Mac
Once you’ve got a local/testing/staging site set up and ready to go, head over to the WordPress repository and download Gutenberg.
A drop-down menu on the top right-hand corner allows you to switch between Visual and Code Editing modes. There are also other options such as fixing the edit toolbar and copying all content in one go.
In the Settings section, you’ll find two tabs:
- Document, which lets you set the hardcore settings of the post including its post format and publish status, taxonomies, featured image, excerpt, comments settings and a table of contents (more on the last one later), and
- Block, which, once you’ve selected an individual block, will pull up the respective settings and customizations that can be made.
- Recent: A collection of your most frequently used blocks
- Blocks: Which include Common Blocks (i.e. images, lists, paragraphs), Formatting blocks (tables, pull quotes and preformatted text), Layout Blocks (such as separators/dividers, buttons and text columns), and Widgets (including a latest post or category feed, or shortcodes)
- Embeds: Options to embed various web elements from a number of popular platforms
- Saved: Stored blocks, saved by clicking ‘Convert to Reusable Block’
In its current form, Gutenberg has some awesome features that would certainly make a more contemporary user happy, however, this isn’t necessarily the case for developers and WordPress pursuits.
Even though Gutenberg presents a whole new offering to current and potential WordPress users, and the interface itself certainly satisfies its brief to offer a more intuitive and engaging content publishing experience, there is still a learning curve to the platform and those who are familiar with a more technical approach to content may not take to the new system as lightly.
Nevertheless, Gutenberg is still a while away, so time will tell whether it’ll completely replace the TinyMCE editor, or be offered as an option for content publishing.
Using Divi in a Gutenberg World
“These foundational elements will pave the way for stages two and three, planned for the next year, to go beyond the post into page templates and ultimately, full site customization.” – WordPress.org
A quick point to mention is that the Gutenberg editor feels a little bit Divi-ish as its block entry and customization process almost sort of echoes the front end builder. Divi users, particularly those who have been using the front end builder, may find Gutenberg almost familiar in a way, and as a result, may not have such a steep learning curve when Gutenberg is introduced.
Front-end builder or not, Divi users are naturally comfortable with the concept of creating layouts using heavily customizable modules (or blocks). As a result, Divi users will more than likely find it relatively easy to adopt Gutenberg as an interface.
As Divi users, we’re lucky to have options, so Gutenberg or not, Divi users can still choose to use the Divi Builder for page and post layouts.
Beyond building a site, If you’re a Divi designer who makes websites for clients that need to add and edit their own content, note that Gutenberg has been created to make even more people more comfortable with the WordPress platform, and they’ll probably take to this platform easier than TinyMCE if they’re first timer WordPress users. If you’d like to encourage your clients to publish their post exclusively with the Divi Builder, keep in mind that the front end builder now comes complete with baked-in documentation videos and walkthrough tours to help guide your clients along.
What are your thoughts on Gutenberg? Do you like the new editor interface, or would you prefer to keep the classic editor?
Share your comments or queries below – we love receiving your feedback!
Thanks for reading!
I’m sad to see WordPress turn away from its roots as a true developer tool into a point and click WYSIWYG with the release of Gutenberg. The new Gutenberg interface is “slick”, but so much valuable information like the page URL, revisions, and a bunch of valuable information is just plain harder to get to now.
Also, as someone who works closely with brands to develop clean, visually consistent web properties, I think that turning the WordPress content editor into something more akin to a design styling tool when it comes to things like headings means less visual consistency and no centralization of styles as they would be in a traditional, thoughtfully planned and designed site.
The big grey area, from what I can deduce from Gutenberg team responses to reviews, or rather the lack of them, when it comes to discussing page builders, is that we may be in for some surprises regarding Divi compatibility with WordPress in the future.
I found a link to this article on the the Gutenberg Times website:
https://wpgeodirectory.com/gutenberg-vs-page-builders/
It seem some who don’t like page builders are predicting the demise of page builders. The article, while alarming, has some merit in the points it makes and is a sobering read.
In the long term page builders will have to work with blocks. The blocks system has merit in that it will bring standardisation to WordPress with better conformity so that changing themes will be more seamless. With the eventual threat that short-codes may be deprecated and, with Divi using those to structure its box model, would be bad news. As it is Gutenberg has a very rudimentary box mode, only offering columns. Until that scales up to sections, and rows how can the Divi framework shoehorn into the blocks paradigm. Its a long road ahead so we will have to wait and see what happens. Divi as is will still work in WordPress 5 and by version 6 Gutenberg may have matured to accommodate more complex page builder overrides.
On Gutenberg itself, out of the box it is impressive what has been achieved but, it does not stand up to the attention to detail of what Divi can do. Its like the core team were asleep at the wheel for years, with other platforms like Wix and Squarespace stealing their thunder and the void being filled on the WordPress front by page builders.
Hi Stephen, thanks for sharing your thoughts and the article. It was an interesting read for sure and I think alot of what you point out and the article has merit. I do think the WP development community will be driving the adoption of Gutenberg faster than people expect. I think the smart page builder companies will never be obsolete, they are preparing for and they will embrace the change and adapt. Divi for example moved to a ReactJS front-end a while ago. That to me speaks volumes as to where they think WP is heading. Nick and team are pretty sharp as I am sure Beaver Builder, Elementor and the others are as well.
We will definitely be one of the early adopters of Gutenberg and have been working with it and developing with it since the beginning of the year. We have some pretty exciting things we will be releasing when WP 5.0 drops! After reading your comment I got all excited again about the future of WordPress.
I don’t get it. Paragraphs and subheadings are already block items. What, exactly, is the point of putting each inside another block?
Hi David,
Great post! Thanks for sharing a comprehensive overview of the new WordPress Editor Gutenberg. I love this new editor, but many would say that this new update is weak or clearly doesn’t have much support. But I see the new editor is a fine way to entice new bloggers to use WordPress instead of other CMS. For old timers, it may post a problem to them and their sites. I’d say, give it a try.
I think this is a great post, in part because it clearly let’s people know what the features are, what they’re for, and where they are. I’d recommend this post to anyone interested in Gutenberg.
I did try using Gutenberg (the plugin), and this post was bang on about everything; a VERY useful post! 🙂
Gutenberg itself, not so much… It was not very practical or user friendly (and this is a clear opinion, not a statement of fact). I’m concerned how this will impact the Divi theme? I do not use Divi’s visual editor (for me it’s a nightmare to use), instead I happily, and speedily love work using Divi’s “Divi Builder”, within WP Admin Backend Divi Builder = Fast efficient, practical.
I find that Divi’s front-end visual editor, options within options to drill through is frustrating; and it seems Gutenberg is similar with options that are found by clicking through, it was a steeper learning curve as well (I found Divi Builder quicker to grasp).
I understand from a lot of online discussion that apparently Gutenberg will be merged into WordPress core? If so, I hope it’s an optional feature (or better still, maybe add this as an optional feature of Jetpack).
More so, ultimately how is this going to effect Divi code and functionality (and Divi development)? Divi “blocks” within the new WordPress blocks? (I’m not a WP developer, which leads to a bit of concern, and likely some confusion).
Finally, (any concerns about Divi editor compatibility, et al aside, in my opinion Gutenberg seems more for people who are focused on content creation, blogging, journalism, etc., not a CMS that many of us use it for.
Between the lines, I can assume that WordPress perhaps is trying to attract more users. The problem, cater predominately to one sector, results in a mass exodus of others. Hence, it would be better to have this as an optional feature, so as to encourage more (and different) kinds of users.
Hi Roger, it seems that, from the recent articles released, Gutenberg will be part of WordPress 5.0, not an optional feature.
We think there are two ways to move forward and include new users: (1) for plugin and theme creators have to make sure that they are compatible with the blocks (that means re-writing their codes as soon as the final version of Gutenberg has been released to the public); or (2) to release a Gutenberg addon that can extend its current capacities, while waiting for WordPress 5.0.
From our end, we went with Option 2 (while waiting for the final version of Gutenberg), and released our first batch of Gutenberg addons — Stackable: Ultimate Gutenberg Blocks. This plugin adds 23 Gutenberg blocks in a single install (some of which are separators, icons, bars, etc.). You can check it out here: https://wordpress.org/plugins/stackable-ultimate-gutenberg-blocks/
I’m beginning to understand that it’s yet another page builder. How is it compatible with other themes? Does it leave artefacts just like Divi’s shortcodes?
Gutenberg UI and UX is still really weak.
totally agree Luke… I have a feeling it will improve quite a bit in the next few months
Thank you. Appreciate your post.
Thanks Allen, and you’re welcome.
Great Info
Thanks for your work
You’re welcome Hector!