Shelley Bassett



Using the new Gutenberg editor in WordPress

Using the Gutenberg Editor

November 9, 2018

I've installed WordPress's new Gutenberg editor on a few of my websites now. Here's how it interacted with my current and custom themes

WordPress’s new Gutenberg editor has been a controversial addition to the platform since its announcement. But after experiencing the editor with the optional plugin, I’ve come to love it. It’s a refreshing experience to the WordPress editor.

One of my biggest concerns with Gutenberg was if it would change how I develop for WordPress. I love the flexibility of the platform, and often enjoy making site with WordPress that don’t look like a WordPress site. It has amazing functionality, and after using a few other CMS’s, I don’t want to leave the platform.

The new update with the Gutenberg editor is directed more at end users than developers. It’s going to give everyone the power to custom build each page, and has revolutionised the way that posts are written. None of this is bad. WordPress is appealing to developers for a vast number of reasons, but writers often struggle with the very technical feeling interface.

The new Gutenberg editor UI

The new block editing style of Gutenberg makes the composition of posts and pages dead easy. And it hasn’t eliminated themes, which was a concern when the update was announced. Instead, it’s refined how they’re used. Nothing will replace good design and well through layouts, but for quick changes and customisations, Gutenberg is the way forward.

Custom Themes

I use WordPress daily. For this site, client sites and just generally to experiment on. And the themes that these website use have all been developed from scratch. So when Gutenberg was announced as an overhaul of the editing system, I was understandably nervous. I didn’t want to activate it on this site until I was sure that there would be no strange interactions with the code.

My fears were for naught though, and I’m currently running Gutenberg on almost every site I manage. Which puts me in good stead for the WordPress 5.0 update.

The block editor is eerily similar to what I deal with every day in my code. I just refer to them as tags rather than blocks. And the sheer number of blocks available really makes no difference either. All the text ones are covered by the typography rules in the CSS. And the additional ones are no more complicated to edit than a plugin.

Purpose Built Gutenberg Themes

As expected, Gutenberg has already changed how I develop themes, specifically around pages. The new editor allows blocks to be dragged and dropped, and I find myself enjoying the ease that it lets me edit.

Prior to Gutenberg, I used to build pages like the front page almost entirely in the theme files, and allow custom and dynamic content via tagging and filtering. It worked well, but I did spend a lot of time going back and forth between the code and the content.

Some of the block Gutenberg allows in posts and pages

Gutenberg has eliminated this workflow for me. Instead of creating complex templates with files for each type of layout, I can make a plugin that includes a number of blocks specific to the theme. It’s meant rebuilding a lot of my homepages, but the added functionality is beyond worth it.

Preparing for the Update

After converting some of my sites, and spending some time getting used to the editor, I feel ready for WordPress 5.0. The new Gutenberg editor feels like a wonderful step to forward, with excellent usability and the power of the WordPress community supporting it. I’m exited. The new editor brings new possibilities, and we all know how much I love to experiment.

Writing is also a dream. Yes, it’s different from the old tinyMCE system that experienced users will be used to. But it’s a much more real feeling WYSISYG (what you see is what you get) editor, that feels like you’re really crafting something beautiful, beyond just words on a page.