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
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.
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.
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.
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.
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.
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.
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.
