10 Most Exciting Features of Gutenberg, the New WordPress Editor

WordPress 5.0 is inching ever closer to release, and with it comes an entirely new way of creating content. While the classic TinyMCE editor has become second nature to many users, it’s soon being replaced by the new Gutenberg editor.

While this has divided the community, it’s hard to deny that Gutenberg comes packed with some impressive new features. In fact, there’s a lot to love in the new editor — warts and all. Even though it’s still very much a work in progress, Gutenberg is showing a great deal of promise.

In this article, we’ll start by discussing the basics of the Project Gutenberg, including its history (and the reasons why it exists in the first place). Then we’ll explore some of its most interesting new features. Let’s get started!

A Brief Introduction to the Gutenberg Editor (And Its Current State)

By now, most WordPress users will at least be aware of the Gutenberg editor. You might have first heard about it when the “Try Gutenberg” callout was added to WordPress 4.9.8, which encouraged users to download the visual editor and give it a spin for themselves.

Gutenberg is the current name for the new upcoming WordPress editor. We’ve discussed it in more detail in a previous post, so we recommend you check that out for a more in-depth description.

To summarize, Gutenberg is going to replace the current TinyMCE-based editor with something radically different.

With the current WordPress editor, a lot of people end up using shortcodes or HTML to create their dream website. Gutenberg aims to change that. The ultimate goal is to create a distraction-free, intuitive content creation interface that’s more in line with modern sensibilities and easier for beginners to pick up.

Gutenberg is planned to be released as a part of WordPress 5.0, which is itself scheduled to appear at some point during 2018. The Try Gutenberg callout was something of a soft-launch, to make the wider community aware of the editor’s existence and imminent addition to the core platform.

While reactions from the WordPress community have been decidedly mixed, there’s still a lot to be excited about with the new Gutenberg editor. In fact, it contains many additions to WordPress that users have wanted for a long time. We’ll look at some of those later on. First, however,we’ll show you how you can go for a Gutenberg test drive right away.

Related: What Is WordPress Full-Site Editing? And How Will It Affect Your Site?

How You Can Try Gutenberg Today

As we mentioned, most WordPress users will have already seen the Try Gutenberg callout. Following that link, you can download and install the Gutenberg editor for yourself on your WordPress website. You can also find Gutenberg in the WordPress Plugin Directory, and install it like other plugins.

Once you’ve activated the plugin, you can start using it to create posts and pages right away. If you create a new piece of content, you’ll notice that you can now choose to use either Gutenberg or the classic editor.

Selecting Gutenberg will open up the new editor. At this point, whenever you choose to create a new post or page, your site will use Gutenberg by default. However, you can switch back to the old post editor at any time using the drop-down menu.

You can also see which posts have been created in Gutenberg on your Posts screen (the same applies to pages).

Before you proceed, it’s also important to remember that developers are still hard at work on Gutenberg. As such, it’s not recommended that you use it on a live WordPress site, as it could behave unpredictably and potentially cause problems. Instead, you’re best off trying it out using a staging site for now.

This also means that the editor is subject to change, as it’s not officially released yet. Therefore, some of the features we’ll be discussing next may look and work very differently once Gutenberg is official.

10 Exciting New Features of Gutenberg

Now, let’s take a look at some of the most exciting new functionality Gutenberg brings to the table. This isn’t an exhaustive list, but it represents what we consider to be the best new features in Gutenberg.

1. Blocks

If you’re familiar with Gutenberg, you’ve most certainly heard about its ‘blocks’ as well. Blocks are an integral new addition to the WordPress ecosystem, and the name is apt as they are literally the building blocks you use to create content.

Every individual piece of content in Gutenberg is its own block. This includes text paragraphs, images, embedded files, headers, featured images, and so on. You can add a block to a post or page by clicking on the button marked with a plus sign, and selecting the type you want.

This represents a vast departure from the classic WordPress editor, where you added all content into a single area. The main benefit is that it’s now much easier to edit blocks individually, enabling you to set block-specific settings and formatting.

It’s also simpler to organize and re-order content within your posts and pages.

There are already a huge number of blocks available by default. Also, thanks to the ability to create custom blocks, you can add pretty much any type of content to Gutenberg easily. In fact, you can even port meta boxes into Gutenberg blocks.

2. What You See Is What You Get (WYSIWYG) Editing

We’ve already discussed the general look of the new editor, but it’s worth repeating just what a massive change it represents for the way we create content in WordPress. Gutenberg introduces a full What You See Is What You Get (WYSIWYG) interface, which ensures that you always know exactly what the layout will look like once it’s published.

If you make a change in the editor, what you’re seeing there is much closer to what will appear on the site’s front end. This removes the dissonance that comes with using an editing interface that doesn’t tell you what your content will look like. Gone will be the days when you had to save and preview your work constantly, just to make sure it looked right. Now, you can remain in the editor’s distraction-free environment the whole time.

For some, this change may be too abrupt, at least initially. It’s true that the old-school editor has become second nature to many. However, it’s also hard to deny that in the long run, Gutenberg’s visual editor provides a cleaner and more intuitive way of constructing your pages and posts. This is the editing experience of the future.

3. Dynamic Options

Another change that the WYSIWYG interface brings is a new method of handling content options. Instead of a static toolbar coupled with numerous settings strewn around the main editor, Gutenberg will only show you options related to the specific block you’re currently editing.

For example, if you’re editing a text paragraph, you’ll only see the formatting choices and other settings that are relevant for that block.

If you start editing an image, the choices in the sidebar will change.

This enables you to quickly get a feel for what options are available to you at any given time. You’re only ever looking at what you need, which helps to avoid confusion in the long run.

Of course, this feature may also lead to some initial confusion, as users may struggle to find a choice that is currently hidden (since it doesn’t apply to the current block). While settings relating to the whole document are always available, it can be tricky to get used to this change at first. Once you do, however, you’ll benefit from a more streamlined experience that’s free from clutter.

4. Document Outline

The features we’ve talked about up to this point have been some of Gutenberg’s larger-scale changes. Now, let’s focus in on the most interesting smaller additions this editor offers.

First out of the gate is the new Document Outline feature, which is a minor yet beneficial addition. This feature becomes available when you add at least one heading to your content, and you can see it by clicking on the information button in the top-left corner of the editor.

As you can see, not only will this display your document’s word count and how many blocks it contains, but you can also view all of the headings you’ve added.

The Document Outline serves as a handy table of contents, and you can even click on the headings to instantly navigate to each block and edit it. This is a feature the classic editor lacked entirely, and helps make it easier to get a quick overview of your content’s structure.

5. Anchor Support

Another Gutenberg feature many users have longed for is the ability to add HTML anchors to your content. You can now add anchors to blocks, which lets you link directly to a particular block from anywhere else on a page or post.

Imagine that you wanted to link back to a specific heading later within one of your posts. You can just add an anchor to that heading block, using the HTML Anchor field.

For example, let’s say that you specify “heading-one” as an anchor for a block that appears in a post with the permalink “text-post.” You could then link to that anchor by using the URL https.//yoursite.com/text-post#anchor-text, anywhere within the post. This is particularly useful for long-form content, and also comes in handy if you want to create your own table of contents.

6. Tables

Tables are a common feature in most content creation tools, but they’ve historically been quite challenging to use in WordPress. What previously required a plugin or HTML code is now conveniently available as a Gutenberg block.

All you have to do is add a Table block to your page or post. Then, you’ll be asked to select the number of rows and columns you want it to contain.

Once you’ve done that, the table will appear, ready for you to fill with content.

It should be said that this block is still somewhat lacking in features. For example, you can’t style it, or change the number of rows or columns afterward without manually editing the block’s HTML. We’re hoping that these features will be added with time, but even in its current state, this is a tremendous improvement over the classic editor (which lacked a table option altogether).

7. Buttons

Another relatively basic feature that WordPress has so far been lacking is the humble button. Fortunately, Gutenberg has introduced a button block that lets you add this feature to your content with ease. When you create a button block, you’ll be able to edit its text and link.

Then you can apply a basic style to your button, and select the colors you want for the text and background.

Another handy feature is that if you select a color combination which could potentially be difficult to read, a message will appear to let you know.

As with tables, we hope that this block gets expanded with more styling options in the future, as the choices are quite basic right now. However, at least you don’t have to rely on third-party solutions anymore if you want to include a button on your site.

8. Text Columns

While this feature is currently still in beta, it’s one we’re particularly excited for. This is a variation of the standard text block, which lets you split your content across responsive columns.

You can currently choose between one and four columns.

Each column can contain its own blocks as well. This lets you create complex layouts, like this one that includes three columns with differing content.

Since the text columns are still a work in progress, they can be a little difficult to use right now. For example, it can be challenging to find the options for the column block itself, rather than the individual blocks contained within it. However, once the team of developers known as WordPress contributors think the editor is ready for prime time, this feature will be a very welcome addition for many users.

9. Easily-Adjustable Font Sizes

Gutenberg is all about ease-of-use, and making every option as intuitive as possible. This even extends to something as simple as the size of your text. You now have multiple options for how small or large you want your fonts to be.

Here, for example, you can choose from one of four preset sizes.

You can also specify a custom size for your text, either by using the slider provided or by entering an exact size manually.

Finally, you can also add a ‘drop cap’ to your text.

This makes the first letter larger than the rest of the paragraph, which can be a stylish and attention-grabbing touch.

10. Full-Width Alignment

Finally, we come to an option that’s been prominently featured in the official Gutenberg demos. This is the ability to create wide and full-width content. In other words, your content can now stretch the entire width of the page.

To use this feature, you will need a theme that’s compatible with full-width styles. Fortunately, there are plenty of full-width themes available. You can find many suitable themes in the WordPress Theme Directory.

If your theme does support this functionality, you can apply a wide or full-width style to an image by simply selecting it from the alignment options.

This enables you to create some stunning designs and gives you plenty of freedom over how your images are styled.

The New Gutenberg Press

Change isn’t always easy, but sometimes it’s necessary. Such is the case with the Gutenberg editor. While millions of content creators have grown accustomed to the classic editor, it’s hard to deny that it’s starting to feel antique, especially when compared to what many competitors are now offering.

In this article, we’ve discussed some of the best new features that users can look forward to when Gutenberg becomes a part of WordPress core. These include both significant changes, such as the addition of blocks and a distraction-free, user-friendly interface, as well as more minor but still very appreciated functionality, like the option to add text columns, buttons, and tables.

Have you tried the new Gutenberg editor yet, and if so, what are your thoughts about it? Did you like the user experience? Head on over to the DreamHost Community and let’s discuss!