WordPress officially released version 5.0 in December 2018 with its major feature being the brand new editor—Gutenberg. If you’re a person who works with WordPress, odds are you’ve probably heard about this.
The classic WordPress editor is a straightforward text box with some rich-text editing capabilities, but with Gutenberg, WordPress has rebuilt the editor around the concept of ‘blocks’ from which pages and posts can be built.
While we will freely admit that this new editor threw us for a loop and it took us a while to get used to it (we might have cried a little bit), the place we’re at now is one of love and happiness. Let me explain how we got there.
A history lesson
WordPress has become a very popular and powerful general purpose CMS (it runs 32% of the WHOLE INTERNET), but it started out as a humble blogging engine. The classic editor reflects this heritage in that it is first and foremost a tool for editing text, providing only a few basic formatting options and the ability to add images.
But as h*ckin’ fancy web designers, we need the ability to build more complex page layouts—ones that move beyond the standard blog format for which the classic editor was built.
But what’s the best way to do that? Kobot has built many sites using page-specific templates that are quite rigid, with lots of the formatting hard-coded in. We’ve also made more fill-in-the-blanks type layouts, either using custom fields or “Reusable Text Blocks,” allowing for editing of bits of text. We have spent lots of time building custom shortcodes either for formatting or outputting highly customized blocks, e.g. staff listings, tables of resources, and logo gardens.
While all of these approaches allowed us to build out some fancy layout, they’ve all left something to be desired in terms of ease-of-editing, long-term maintenance, and re-usability. Over the last year we’ve started using an approach very similar to Paper Leaf’s Layout Engine, where we create a set of basic building blocks that we can then use to build every page.
We’ve grown to love this approach, so it is exciting to us that WordPress has moved to a native block-based editing experience. Which brings us to…
Why Gutenberg is awesome
So what about Gutenberg, specifically, is so awesome?
Gutenberg removes the disconnect
In the classic editor, you might have to hunt around various screens throughout WordPress to edit all of the pieces of content that make up a single page. In Gutenberg, every part of the page is right in front of you. It’s not quite WYSIWYG (What You See Is What You Get), but you do see everything in top-to-bottom order on one screen as it will appear on the website.
Gutenberg keeps things discoverable
Gutenberg shows you a categorized list of what Blocks are available. Blocks and formatting options that might previously have only been known to the site’s developer are now available, front and centre, right inside the editor. As the site’s creators, we can choose to expose a block’s various attributes as dropdowns, checkboxes, and radio buttons, making it plain to see what options are available and easy to tweak them as needed.
Gutenberg makes it easy to reduce, reuse, recycle
Because we are exposing design patterns in the back-end as blocks, it becomes way easier to build out new pages. A website administrator can compose pages from scratch much more easily since we’ve broken the site down into its basic building blocks.
We force ourselves to build the pages in exactly the same manner that the client will edit them, instead of focusing on building out page-specific templates. In the process, we empower our clients and give them much more control over the long-term growth and maintenance of their website.
It makes sites way less fragile
While Gutenberg lets us use shortcodes like before, it’s a better approach to define blocks to take their place. Where we would have created a shortcode to, for example, output a list of staff or board members (e.g. [staff-list-maker category=”leadership” read-more=”false” layout=”compact”]), we instead register a block that presents all of its attributes as form fields, dropdowns, checkboxes, or radio buttons. These blocks become self-documenting and the site’s editors don’t need to learn to type in arcane attributes and parameters. Blocks under Gutenberg are almost foolproof, and it becomes very hard to use them incorrectly.
Since the release of Gutenberg, we’ve been hearing a lot of resistance to it and frankly, we definitely felt the same way at first. BUT, apart from the fact that it dovetailed perfectly with the direction our workflow was already heading, there are lots of other benefits to Gutenberg (especially now that they’re starting to work out the bugs).
From a design standpoint it’s far less clunky and gives us more freedom. At this point it’s basically the Wild West out here—you can do anything! But we think far and away the most important part of Gutenberg is the accessibility it provides for our clients. The new editor is not only more flexible, it’s more approachable for non-web-design users. And for us, making sure our clients are empowered to update and love their website even after we hand it over is an invaluable asset.
This blog post is based on a recent episode of Ask Kobot Anything, our weekly Instagram Live where we let you ask us, well…anything! Questions or comments about this post, or just want to see something discussed on the show? Email us! And catch Ask Kobot Anything every Friday at 11:30 MST on our Instagram.