An Introduction to the Gutenberg Editor

Posted on August 28, 2017 by in Resources | 28 comments

An Introduction to the Gutenberg Editor

In some ways, WordPress has changed drastically from its early days as a blogging-focused platform. However, a few elements have been altered little from its inception – such as the way the editor works. The community has offered alternate editors for some time, but now there’s a new option on the horizon. The WordPress core team is hard at work on a new project, the Gutenberg editor, which aims to revolutionize the way you create content.

In this post, we’ll discuss the Gutenberg editor in detail – its history, goals, and what it does (so far). Then we’ll look at the plugin ourselves, and see what new functionality it offers. Let’s jump in!

Why You Might Want an Updated WordPress Editor

The default WordPress editor.

The default WordPress editor is a familiar sight to anyone who’s worked with the platform.

If you’ve spent any time at all using WordPress, you’ll be very familiar with the standard editor. It enables you to create posts, pages, and other content types for your website, and comes with two primary options – visual and text. The visual editor includes buttons to help you format your content, and offers an approximation of what your post will look like on the front end. On the other hand, the text editor shows you the raw HTML code, and offers ‘quicktags’ you can use for formatting.

Many people find both of these editors intuitive and easy to use, and they’re uncluttered and beginner-friendly. However, some find the default editors lacking in functionality and options. As such, they turn to various plugins and other tools to help them enhance the editor to better meet their needs.

What’s more, WordPress is also now directly competing with various website builder services such as Squarespace, Wix, and Medium. These platforms provide their own comprehensive editing features that can make WordPress’ default offerings look insufficient. This means the time has come for an update, which is why a team of WordPress developers are working on Gutenberg – a re-imagined editor built from the ground up. The project is still in beta and isn’t ready for use on live sites yet, but it’s still worth getting onboard now.

Introducing the Gutenberg Plugin

The Gutenberg editor plugin.

Every year, WordPress developers decide on a number of ‘focuses’ for upcoming development. One of the major goals for 2017 is to update the core platform’s editor. Gutenberg is currently available to test in plugin form, but will eventually be included in WordPress’ core.

The overall goal of Gutenberg is to create a new, updated WordPress editor that provides a better user experience. It’s intended to make the process of content creation simpler and more intuitive for the average user, and to reduce reliance on shortcodes and custom HTML.

To do this, Gutenberg employs a number of ‘blocks’ you can use to customize your content and layout in the editor. This is similar to the way a page builder enables you arrange pre-built elements and personalize them to meet your tastes. So far, this functionality appears to play well with Divi, although it remains to be seen how compatible the two will be when the final version drops.

Key Features:

  • Offers a new standard editor you can use to create posts, pages, and other content types.
  • Provides various ‘blocks’ you can arrange and customize to build your content visually.
  • Enables advanced formatting and layout options, without requiring any coding.

Price: The Gutenberg editor is currently offered as a free plugin, for testing purposes only. As it is still in early beta, it is not advised for use on live sites.

How to Get Started with the Gutenberg Editor

To try the Gutenberg editor out for yourself and see what all the fuss is about, you simply have to download and install the plugin on your website. However, given that it’s a beta plugin, use a testing site to be safe!

To create a new post with Gutenberg, navigate to Gutenberg > New Post in your WordPress dashboard. Or to work with an existing page or post, hover over its title and click on the new Gutenberg option:

A page in the Gutenberg editor.

You’ll see that your content is arranged into ‘blocks’, and you can create new ones by clicking on the Plus icon at the bottom of the editor (or by selecting Insert in the top right corner). There are a number of block choices, including Text, Image, Gallery, and List, each with its own set of options. For example, if you create an image block, you’ll get a pop-up bar that enables you to change the picture’s size and alignment, edit the original file, and add a link:

An image block in the Gutenberg editor.

You can rearrange blocks by clicking the up and down arrows next to each one. The sidebar also offers some additional options depending on the type of block selected. For example, you can choose whether to enable drop caps for a text block.

You can still switch to the text editor if you want, by selecting that option in the top left corner. This version of the Gutenberg editor still makes use of blocks. However, it displays them as code rather than as visual elements:

The Text editor in Gutenberg.

Finally, you’ll discover that your general post or page-related options are now organized in a sidebar under the Document tab. This is where you can change your content’s status, add categories and tags, select a featured image, and more.

The Future of the Gutenberg Editor

So far, users have had very mixed reactions to the Gutenberg editor. You can see this in the wide variety of reviews left on the WordPress.org Plugin Directory page. Some people love the user-friendly design and modern update. At the same time, others feel that the editor isn’t intuitive and doesn’t offer enough new features.

Our own experience with the editor suggests that it offers some promising features. However, it still has a long way to go. There’s more space for writing in the new design, and it conveniently organizes your post or page-related settings in one simple sidebar. The blocks system is also intriguing, as it mimics many popular page builder tools. However, Gutenberg is more cluttered and less intuitive to use than the default editor. Plus, it currently provides very limited options when it comes to customizing your blocks.

Ultimately, this editor is still in early development, so it would be unfair to judge it too harshly. It is a promising step forward, but needs work before it’s a viable replacement for the default WordPress editor. There are plenty of features in development, such as support for custom post types, drag-and-drop functionality, and editor styles. There will also be a Classic Text block that will essentially reproduce the current text editor as a single block. This will come in handy for those who prefer the old system.

At the moment, Gutenberg’s developers are projecting that it will be ready for inclusion in WordPress 5.0. Until then, we recommend keeping an eye on the project to see how it develops over time, and reserving final judgment for the finished version. Of course, you can also get involved if you’re interested in shaping the way the Gutenberg editor evolves!

Conclusion

One of the best things about an open-source platform such as WordPress is that it’s constantly evolving. The Gutenberg editor is an attempt to spruce up one of the platform’s key features. This project aims to provide an updated WordPress editor that is more user-friendly and flexible than the current system.

As we’ve discussed, the Gutenberg editor works by providing ‘blocks’ you can create and manipulate to build pages and posts. In that way, it’s similar to many existing page builder plugins. It’s limited so far in what it can accomplish, but a lot of additional features are still in development. While this editor is currently in early beta and far from ready for general implementation, it’s an intriguing endeavor that’s worth watching (and getting involved in if you’re so inclined).

Do you have any questions about the Gutenberg editor and how it might change the WordPress editing experience? Ask away in the comments section below!

Article thumbnail image by Ingaga / shutterstock.com.

28 Comments

  1. The Big question for the elegant themes community here is how does it impact the DIVI and Extra theme here.

    Another thing is how does it impact plugins like Yoast SEO, ACF, and Shortcodes Ultimate.

    We already have a so called classic text block in Gutenberg, BUTT that does not include or may never include the add image function.

    I know Matt and the Gutenberg team want to make sure it is right before it makes it into core, but all I see is a blown WordPress 5.0 release here.

    • Nathan B. Weller

      I think it’s still too early to say how it will affect Divi. It’s definitely something we’re paying attention to and we’ll continue to engage in the conversation. When a version that’s more likely to end up in core comes out we’ll know better how we need to update Divi for compatibility. Which, it should be noted, is something we have to do for every major update of WordPress anyways.

      • users of wordpress may have reached its peak that is why wordpress developers are trying to attract more non-developers/regular non-techie people like many of us (people who can use facebook, youtube & instagram users)… wordpress maybe is dying, why? decreasing engagements (users) because of complicated user-interface & (eeehem expensive) plugins — WORDPRESS HAS BECOME A TECHIE DEVELOPERS WORLD, IT HAS LEFT BEHIND REGULAR NON-TECHIE PEOPLE!… easy-to-use wordpress means more regular users of wordpress… and here comes gutenberg, it may just be the iceberg that will sink the titanic wordpress tsk tsk

        • Nathan B. Weller

          I think it’s too early to say exactly how Gutenberg will impact WordPress. In theory, it will open up page building and site building to a much larger audience. On the surface, it looks like it is a direct “attack” on existing page builders. But the one thing I haven’t heard many people talking about is the fact that all of the most popular page builders didn’t spring up overnight. They’ve been around for years, refining their user experience, adding features, etc. It’s going to be a long time before Gutenberg can match the power and flexibility of the major builders already available. So it’s possible that (especially at the beginning) Gutenberg will pique the interest of many WordPress users, getting them excited about the power and ease of page building. In effect, funneling them into the use of more mature premium builders.

          • That’s a reassuring attitude. I am soon to be launching my Divi website and glad to see these sentiments.

            A good comparison is the free\bundled anti-virus Windows Defender. It certainly hasn’t put anti-virus companies out of business.

            Ultimately it should be good for the consumer as it it forces page builders to keep innovating to stay ahead of the standard word press page building functionality.

  2. It’s nicer and full of gimmicks but I can’t see myself not using the good old TinyMCE. Just like Photoshop, I know there are nicer, newer, better tools I just can’t get them out of my system 🙂

    • I’m with you Cornel, I used to use WP Edit Pro on my site and all client sites and now, nothing. The developer has disappeared and I think it’s due to health issues. Switched to Advanced TinyMCE and it works just beautifully.

      • Advanced Tiny MCE is a nice plugin, but without changes it will not work at all with Gutenberg.

      • You’re right! Also, for the clients, the more fancy stuff I gave them to play with, the more pain in the a** I have latter when trying to migrate to newer versions or fixing what they’ve broken.

  3. The problem with TinyMCE is that it messes up the spacing between and tags if there are div tags in between.

    For me, it is not a problem because I am a coder. But for my client who are not IT-savvy, is a pain in the butt. I ended up having to help them add extra space or remove space.

    I am not sure if Gutenberg can fix this. I do hope so but we shall see.

    • John Hughes

      Hi Cliff, thanks for your comment! You’re right; there are a lot of features where we’ll have to wait and see if they’re implemented.

  4. If done correctly and user friendly, I can see some use for this. For very small assignments, sometimes even the simplest version of a Divi site is too much, in which case I turn to a basic theme. But often I find the lack of any page lay-out in the WP editor too constricting. The option so far was to install a very basic page builder like the one from Site Origin. But if Gutenberg works out nicely, I think this could be the tool to spice up these sites a little.

    As for all the Divi websites I build, I don’t see any benefits.

    • The option so far was to install a very basic page builder like the one from Site Origin.

      ____________

      Solid idea imo. I do not think Matt and the Gutenberg team have GIVEN us a real good reason we need this.

  5. Off Topic:
    I think the thing that irritates me the most of the DIVI text editor, is the fact that the control bar scrolls, and does not stay static on top. I use this part of DIVI often.

    Or is there a way to lock the control bar of the text editor?

    • OMG that drives me nuts too! I submitted it as a feature request long before Divi 3.0 was launched.

    • +1

  6. I really like this new look for the WordPress editor. It’s definitely a step forward, and in the right direction. Kudos to their development team, it looks great at the moment.

    The big question here, though, as already mentioned by others, is how it will affect the Divi Builder plugin. Will the Gutenberg editor be applied to text editors in the Divi Builder?

    • especially this part)

      Theme developers won’t need to bundle tons of plugins or create their own page builders. There’ll be a standard, portable way to create rich layouts for posts and guide people setup right in the interface, no 20-step tutorials or long videos needed. Every theme will be able to compete with multi-functional premium themes without locking users into a single theme or compromising their experience.

      • Yeah I saw that link. Matt says we are only at 28.5% according to one link, but it is not limitless. That same link shows WordPress STILL growing at much faster rates than any of the other CMS/services listed in the link.

        The link you posted stated:
        Their churn rates will go down: they’ll stop bleeding customers to Wix, Weebly, and Squarespace,

        Well Wix and Squarepace are barely growing and Weebly has had no growth for the past few years.

        I say WordPress can easily get to 50% without Gutenberg though.

  7. The article says Gutenberg is targeted for WP 5 and, “There are plenty of features in development…custom post types, drag-and-drop functionality, and editor styles.” It’s clear this is a delayed reaction to the main DIY platforms, eg: Wix, Weebly, SquareSpace. IMO, Divi is the best WordPress theme offering similar DIY design-build capability. My prediction is that post WP 5, WordPress will continue evolving in Divi directions. WordPress.com absorbed WooCommerce. Current trajectory, looks to me both like ET could make a great WordPress acquisition target and, conversely, not inconceivably, could swap out under-the-hood infrastructure to become a major DIY competitor in its own right.

  8. This new Gutenberg editor certainly ‘looks’ pretty – but if you are already using the Divi theme / builder for both pages and posts, I don’t really see a need for it. On the flip side, if a client is wanting to lay things out on a page / post for a site that is NOT using the Divi theme / builder, I can see these new layout options offered by the Gutenberg editor being beneficial to the not-so-tech-savvy. I do hope that they still leave the other two options though – Visual / Text, but I am guessing there is a high probability that the Visual editor will simply be replaced with the Gutenberg. Time will tell!

    • John Hughes

      Hi David! You’re right that with a solid builder (like Divi), there’s arguably less need for an update like Gutenberg.

  9. I do not think Gutenberg editor is something new. But then I realize that is because I have been using Divi. For non Divi users, I think some would really appreciate it. Especially those who switch themes a lot. Since Gutenberg is to be built within the core of WordPress itself, it should maintain whatever the user has built on her page/post on previous theme when she is switching to another theme.

    Not entirely a new feature but welcoming.

    • John Hughes

      Thanks for your comment! It does seem like Gutenberg has a ways to go before it can compete with established page builder tools, although the fact that it’s a built-in option is a plus.

  10. Will divi plan on integrating its “blocks” into the new Gutenberg editor & approach rather than via a completely separate approach?

    • John Hughes

      Hi Chris! It remains to be seen exactly how Divi and Gutenberg will interact in the final version. If you have any suggestions or requests, please let us know about them in the forums: https://www.elegantthemes.com/forum/. 🙂

437,821 Customers Are Already Building Amazing Websites With Divi. Join The Most Empowered WordPress Community On The Web

We offer a 30 Day Money Back Guarantee, so joining is Risk-Free!

Sign Up Today

Pin It on Pinterest