Welcome to Gutenberg: Introducing the new WordPress Editor

Oct 24, 2018

The world of WordPress is about to get turned upside down.

This isn’t a bad thing. Although it may cause some web developers to enter panic mode when dealing with the unfamiliar interface and compatibility issues, it will revolutionize the way writers create content.

Part of the reason why is that content is really no longer limited to just words. Today’s Internet is filled with media-rich content that includes everything from interactive Javascript objects to full-scale video and audio clips.

It simply makes sense for WordPress to recognize this fact by introducing a content editor that makes it easier for people to generate and broadcast rich content.

The current WordPress editor comes from a different age. It forces users to utilize shortcodes and HTML to get things done. Even the writing interface looks like a fossil – because it is. Just look at the TinyMCE toolbar icons.

TinyMCE took its icons from Microsoft in the 2000s, who took them from Corel in the 90s, who invented them all the way back in the 80s when WordPerfect became the go-to processor for MS-DOS.

It was about time for a change.

But that isn’t all – not by a long shot. Gutenberg streamlines the editing experience for media-rich web pages and makes creating these pages easier for generations of users who have no idea what MS-DOS stands for.

And best of all, you can try it out right now.

Install Gutenberg as a Plugin

Right now, users of WordPress 4.8 and above can get a taste of Gutenberg by installing the latest beta version as a plugin. You can find it here, but don’t get ahead of yourself and install it on a live site – use a test site or use your host’s staging environment first.

Alternately, use the sandbox-style Frontenberg to play around in the new editor right now. You can’t save posts or upload images, but otherwise, it’s a faithful replica of Gutenberg.

If you’d rather not use Gutenberg as a plugin, you can now test the WordPress 5.0 beta in its initial release, as well.

If you do this, the first thing you’ll see is that all of your Posts now have a “Gutenberg” link beneath them. This lets you bounce back and forth between the current visual editor and Gutenberg in order to see how the upcoming editor will function on your existing posts.

It’s highly recommended that you take some time to check this out. Once WordPress 5.0 is out, Gutenberg will become the default editor. You will still be able to install the classic editor for compatibility issues, but you won’t want to keep using it for long.

Gutenberg: A First Look

Web developers who are familiar with Medium will feel at home with the Gutenberg interface. It offers a great deal of writing space – ideal for writing on small mobile screens – and features far fewer distractions.

You can reduce the number of distractions and widen your writing space even further by clicking on Post Settings and removing the right-hand sidebar. Most likely, users will be able to toggle distraction-free writing mode using Shift+Alt+W upon official release.

Web developers eager to get into Gutenberg’s inner workings will immediately find the Text Editor option in the top-left dropdown menu. This will show make HTML code appear on the screen.

The first thing that web developers might notice is that HTML comments describe individual text blocks. This is how Gutenberg arranges text into handy blocks that users can place on the screen according to their aesthetic wishes. The text block code looks like this:

At the graphical interface level, when you highlight a block, you instantly see options for moving it up and down, deleting it, or further changing its individual settings. Again, Medium users will be familiar with this functionality.

If you went ahead and installed the Gutenberg plug-in on a test site, try it out on a mobile device. You’ll find that writing and inserting images or other media on a smartphone is much simpler than it used to be.

While the TinyMCE toolbar no longer sits above the text, the core editing engine is still a major component defining editable content in Gutenberg. The difference is that the toolbar functions we all know and love are now consolidated into various blocks. For instance, the Classic Text Block is basically the TinyMCE editor.

Gutenberg: New Kid On the Block

Blocks are the primary units of display within the Gutenberg interface. Text blocks contain text, table blocks contain tables, and live HTML blocks contain – you guessed it – live HTML code that runs right inside the block.

This can make the process of creating interesting, dynamic websites much easier for developers. Instead of switching back and forth between the visual editor and text editor mode, you simply summon the appropriate block for whatever you want to insert and move on. Block-by-block previews serve to help users verify the results.

Every block has certain settings, primarily defined by whatever the block is supposed to do. Certain blocks will allow you to add CSS classes to the block’s contents, making design easier than ever before.

You can define blocks according to a Table of Contents and automatically create clickable links that let users jump to various sections of your page. This will be very useful for long-form content, which you’ll be seeing more and more of.

You can set anchors on specific blocks, as well. This lets you link to a certain section or header within a page. This is perfect for creating jump-to menus in SERPs and for calling attention to specific sections when linking to and from websites.

Embedding Done Right

Above all else, one of the major usability factors that most Gutenberg users are going to like is easy embedding. Accessible embedding options are now one click away from your writing space.

Gutenberg users can embed media content from YouTube, Twitter, Reddit, SoundCloud, Hulu, Spotify, Instagram, and much more directly from the user interface. Yes, you could embed all of these things before, but many users never knew it because the visual editor never showed anything to make it apparent – you have to just know.

Stay Tuned for Gutenberg Compatibility

You’ll want to get used to using Gutenberg because it stands to radically change the way WordPress users create and post content. But the first concern in most working web developers’ minds is compatibility.

With the next post, I’m going to cover some of the potential compatibility issues that Gutenberg will force on WordPress developers, and what you can do to prepare for them. Find out what steps you should be taking now, while there’s still time to plan ahead.

Unlimited WordPress Tasks One Simple Flat Rate

Have questions? Leave us a comment, we’re here to help.

ronik patel

After building my web agency JD Softtech in both Boston and Ahmedabad, India, I wanted to find a way to help other agencies.

So we took our team of highly qualified website developers and web designers and launched UnlimitedWP, a white-label WordPress partner for growing agencies.

If you’re frustrated by how much time working in WordPress takes, consider UnlimitedWP.com.

For one low monthly fee, you can create and assign an unlimited number of tasks to our team of WordPress experts—with a typical turnaround time of 24–48 hours.

Subscribe For Updates

Subscribe to our newsletter now and our delivery will bring you our best deals, ideas and news about UnlimitedWP.

    First Timer Here?

    Sign up to receive 20% off on your first month with us.