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!