Gutenberg 101: What You Need to Know About the Update

Jeremiah Bratton, Senior Front-End Developer

Ahh fall. Seasonal drinks, regrettable and ironic costuming decisions, a full version update to WordPress. Swaddled in the autumnal bliss of hearing your friends and relatives complain about the sheer audacity of the sun’s absence; so suddenly disabused from memories of nearly roasting alive hardly three weeks earlier… you may find yourself thinking… “What the eff is this Gutenberg thing that the shut-in developer at work keeps mumbling about?”

Send your anxieties to a lavish winter resort friend for I, that mumbling, shut-in developer, am here to provide a brief overview of what you can expect from the upcoming release of WordPress 5.0 and its new content editor riding gleefully in the passenger seat.

About Gutenberg editor

3 Content Strategy Lessons from Seattle Interactive Conference 2018 - Tim Mehta on stage with a microphone and sneakers

Gutenberg is the code name for the redesigned content editor in WordPress. This new editor will become the standard in WordPress 5.0 which is expected to show up November of 2018. This editor will replace that big ole text box with something more akin to a canvas to which you will add pieces or blocks of content.

If you’ve published work on Medium this new interface should feel just like home. For those familiar with editing content in WordPress this should be a welcome, but very different experience.

Our review of Gutenberg’s capabilities

The Portent development team has kept a watchful eye on Gutenberg and tested the development plugin in a few different scenarios to see the effects. Aside from a few small bumps in the road the addition of Gutenberg to various client sites (so far) has been a non-issue. Especially true for standard post content. The WordPress Community has always focused on backward compatibility for new features and Gutenberg appears to be adhering to that principle. If you would like to give the new editor a try, the plugin is available to install for free from the WordPress plugins repository.

Getting started

Before you run off and start furiously downloading I want to stress something semi-obvious: every site is unique. Even though we’ve found Gutenberg to be more-or-less harmless thus far I advise caution when adding a plugin that presents such a significant change. I also cannot speak for themes or sites that rely heavily on visual page building plugins such as Visual Composer, Divi, or Elementor. In these cases I would recommend having a developer do a diagnostic on a staging server or local machine to see how Gutenberg affects your particular site.

Handling existing content

The requisite doomsaying of the previous statement is a big reason that I wanted to write this post. Not everyone has a staging site to play with or the technical ability to spin up a local development environment for testing.

I have brought up Gutenberg in conversations at work numerous time over the last year (I’m pretty popular at the lunch tables), but perhaps you work in a “normal” office and have had only heard about this in passing with no real sense of what’s heading your way.

My goal here is to show some of the bigger changes that affect content workflow so that when you sit down with Gutenberg for the first time, you have an idea of what to do.

Now, this begs the question “What happens to my existing content?”

Format preservation

Once Gutenberg is present, content for existing posts will be placed in a block called ‘Classic’. The classic block will preserve your formatting, HTML markup, and shortcodes. You won’t need to rush out and frantically update all of your content into the new block format.

Screen cap of a shortcode block in Gutenberg
gutenberg-shortcode-block

Shortcodes are still available, they are just a block now

Working within shortcodes

Neither HTML markup or shortcodes are going away with Gutenberg. Both still have their place in content creation. Both HTML and Shortcode blocks come standard in Gutenberg. Current shortcodes will still work and will continue to display as you move into block based layouts.

Gif showing the Edit as HTML option being usedin Gutenberg
gutenberg-edit-as-html

When the need to tinker arises you still have the option to edit as HTML

”Convert to blocks” feature

That you’ll build all your new articles and pages in Gutenberg from 5.0 on is a given, so this won’t be part of your standard workflow. But what of your legacy content?

I mentioned earlier that all existing content will be placed in a ‘Classic’ container allowing you to come back and update your posts to block layouts should you choose. There’s also a helpful extra option in Gutenberg that can provide you with a head start when converting your posts.

The ‘Convert to blocks’ option for the classic block will attempt to separate your content based on semantic HTML used in your copy. If text is wrapped in a blockquote it will be converted to a quote block, UL: unordered list or OL: Ordered list to a list block, or a header tag like H2 to a header block.

Gif showing the convert to block option being used for a classic editor block
gutenberg-convert-to-blocks

Using the convert to blocks option can give you a head start when converting older content

Adapting to Gutenberg

That’s enough about old content, let’s talk about new features that will affect your workflow.

The current standard for WordPress writers is to build their content in one large document. Paragraphs, headers, lists and other textual HTML items are manually entered. By contrast, in the new block-based editor content will be formed out of individual pieces. Pieces that can be moved freely, duplicated and adjusted in the editor.

Gif showing various content blocks being added to the editor in Gutenberg
gutenberg-add-blocks

Build your content the way chinchilla’s see the human body… in pieces

”Add Block” feature

Unlike HTML and Shortcodes, blocks are active elements. When a block is selected contextual options will become available on the right-hand side of the editor.

For instance, before Gutenberg if you needed to change the color for a portion of text you would do so in raw HTML. When working with shortcodes you add attributes in the text. Neither option would update within the editor. Anyone that has spent time working like this in WordPress knows the save-preview-edit shuffle.

Gif showing a WordPress gallery updating in the editor when block options are changed
gutenberg-options

Manipulate your co-workers with options… instead of emotions

”Transform to” feature

A feature available to WordPress developers which extends Gutenberg functionality is the ability tell a block what it can be transformed into.

A real-world scenario would be: you are writing an article and you add a paragraph block which later needs to become a blockquote. That paragraph block now has the ability to be transformed into a blockquote block. The important part here is: transformations allow you to quickly fix mistakes or change whole sections to another style without having to think too long about the least painful or most elegant way to do it.

Gif showing a block in Gutenberg being transformed from one type to another

Pro-Tip: This will be especially handy when using the ‘Convert to blocks’ option mentioned above.

Not ready for Gutenberg?

In preparation for the release and inevitable misgivings, the WordPress community has placed a plugin named Classic Editor on the plugin repository. The Classic Editor plugin will preserve the experience you have known and loved… at least since the last time it was updated. If you’re not quite ready to move ahead with Gutenberg but still need to update to WordPress 5.0 this plugin is the best option.

Just as not everyone was ready to stop triple tapping their flip phone keypad, not everyone will welcome a new experience and toolset in WordPress. That said, we hope you’ll be more excited and prepared for the coming changes after reading this.

As always, let us know in the comments if you have questions or anything to add from direct experience with the upgrade.

Jeremiah Bratton, Senior Front-End Developer

Jeremiah Bratton

Development Team Lead
Development Team Lead

Jeremiah has more than 20 years of experience combining the art of design with the art of web development. As Portent's development team lead, he works closely with the entire development team to bridge the gap between creative aesthetic and technical implementation, building functional and efficient sites that meet client needs while delivering a positive user experience. Jeremiah takes a user-focused approach to web development, and is passionate about making the web accessible to as many people as possible.

Start call to action

See how Portent can help you own your piece of the web.

End call to action
0

Leave a Reply

Your email address will not be published. Required fields are marked *

Close search overlay