We are very grateful to Rich Tabor of ThemeBeans for joining us last week to speak about WordPress theme development and how it is likely to change with the release of Gutenberg.
Below is Rich’s slide deck as well as a partial recording of his presentation (there were a few technical difficulties with the recording equipment).
“Gutenberg” is the codename for the 2017 WordPress editor focus. The goal of this focus is to create a new post and page editing experience that makes it easy for anyone to create rich post layouts
Gutenberg Handbook
Gutenberg is, in simplest terms, a replacement for the TinyMCE editor (aka the “default” WordPress editor). If you’ve ever used WordPress, you’ve almost certainly used TinyMCE.
A screenshot of this very post in the TinyMCE editor
Gutenberg uses “blocks” of content which can be arranged and customized to give users more control over how their posts and pages look. On the surface, it’s not unlike the editing experience of Wix, SquareSpace, and existing WordPress page-building plugins like Elementor.
Currently, Gutenberg has blocks that handle all of the features you’re used to in the WordPresss editor now: paragraphs, headings, lists, images, galleries, media embeds, etc. Plugin and theme authors can also create new blocks for different types of content, and some plugins are already “Gutenberg aware.”
How to Use Gutenberg
Install the plugin from https://wordpress.org/plugins/gutenberg/. Note that, at the time of writing, this plugin is not ready to be used in production (live) websites.
Why Use Gutenberg
Simply put, Gutenberg gives you more control over how your site looks than the current TinyMCE editor.
When Is Gutenberg Available?
As stated above, you can install Gutenberg as a plugin right now if you want to test it. Gutenberg is currently scheduled to be packaged as part of WordPress core starting with the 5.0 release. When is the 5.0 release? Well, we don’t know yet.
Why Not Use Gutenberg
At the time of this writing, there are some issues that could arise if you were to update your website to a version that includes Gutenberg instead of TinyMCE. Mainly, Gutenberg may break your editing experience if you are using a theme or any plugins which use custom fields to store and display content. It is up to each plugin and theme author to update their product to be compatible with Gutenberg. You could lose the ability to edit your content’s custom fields (because Gutenberg doesn’t use custom fields – it uses blocks).
How to Not Use Gutenberg
Install the Classic Editor plugin, which detects for the presence of Gutenberg on your site and circumvents it. Note: at the time of writing, this plugin is not ready for production so it would be better to make a note of it now and only install it if needed.
Further Reading
Official Gutenberg Site: https://wordpress.org/gutenberg/
Gutenberg News, A collection of Gutenberg tutorials & resources: http://gutenberg.news/
WP Tavern’s Collection of Gutenberg Conversations, Resources, and Videos: https://wptavern.com/a-collection-of-gutenberg-conversations-resources-and-videos
This change impacts everyone using WordPress, from general users to those working with clients and developing solutions on top of WordPress.
If you haven’t tried out Gutenberg for yourself, I’d highly recommend you give it a try. It is important to familiarize yourself with the user experience in order to be able to make sense of all the ways you can integrate with it.
Ultimately, many things that are currently managed by custom meta boxes in WordPress can likely be replaced with custom blocks in Gutenberg. A block is essentially a stand-alone editing component. Examples of existing blocks are an image block for inserting and managing images, a text block for standard text content and a gallery component for managing collections of images. At the meetup, we covered how to create a custom block, which we called ‘Gutenbook’; a block that allows you to insert a book title, description, and author in a card view format. View the code on GitHub.
The Gutenberg editor has a few layers to it. First, the primary technology behind it is React; Facebook’s JavaScript view library. Second, there is a new WordPress JavaScript API that layers on top of React that you will use to create Gutenberg blocks. Finally, there is the code you will write to leverage all the tools that Gutenberg provides to create your own blocks.
Suggested Resources
If you are interested in how to create your own Gutenberg block, take a look at these helpful resources:
