I’ve been writing posts on this site using the Gutenberg editor plugin since August. As a writing experience it has felt like a big step forward over writing in the TinyMCE (classic) editor. I actually had been writing my posts in Bear App and then copying over to the TinyMCE editor.
Gutenberg on the other hand has worked very well for me writing posts. I do concede that I have more experience than the typical user. And the latest update seems to be doing something annoying where it removes the preceding space between words when I decide to change what I’m writing. Wow, I do this a lot. Be right back going to check the Github issues.
Ok. Now let’s get into experiences writing and developing a theme for Gutenberg.
On the Classic Editor
But first a note on the classic editor.
As I mentioned above I haven’t been writing posts with the Classic editor for well over a year now. Not that I’m doing anything fancy with posts1, I just didn’t like the experience.
I usually write on a 13″ inch MacBook Pro. And as I write a post of anything over a couple hundred words the editor fills my screen cutting off the Add Media buttons (and anything else) up top. Which always led me into some fun scroll issues where I would accidentally scroll within the editor and lose my position.
Now using keyboard shortcuts would be a better way to solve this, but they are not easily discoverable. I hadn’t even thought about it until I started using Gutenberg’s shortcuts.
Now I also build a lot of custom client sites with Advanced Custom fields and the Classic editor meta field experience is miles ahead of Gutenberg. Though ACF has some cool Gutenberg blocks to help in that regard.
On Writing with Gutenberg
As noted above most of my work on this site is writing posts. And in my experience, so far, Gutenberg has been great for writing. Minus this new backspace removing the preceding space before a word.
Now, I’m lucky enough to not rely on accessibility features when writing posts in WordPress. That is a big and important hurdle for Gutenberg to overcome.
So aside from minor bugs (see backspace thing) I’ve had a good experience writing posts with the Gutenberg editor.
My biggest issue to date was making a minor typo fix in a title with the WordPress app from my phone and having it strip all the spacing out of my code blocks in the post. Given I knew the risks I took when I made the edit since the WordPress app didn’t support Gutenberg posts. But I wanted to see what would happen.
On Page Building with Gutenberg
Where I’ve had more issues with Gutenberg is using it as more of a page builder. As in building non-blog type pages. The homepage of this very site for example.
It’s not a particularly complex homepage. It is built out of a few of the new Media + Text block along with a Latest Posts block and a Heading block.
I had to get a bit creative to build the layout I have using those existing blocks. As well as do some specific theme styling to achieve the look I wanted.
- The Media + Text block doesn’t stack on responsive by default and the CSS Grid rules are not easy to overwrite when using custom widths for the image.
- Creating the icon + title layout of my Themes and Plugins section required using a Columns block with a nested Media + Text and paragraph block.
- I wasn’t able to easily set the media within the Media + Text to a specific size. I’d like to keep my icons the same width to consistently style, but a way to do this wasn’t plainly obvious to me. The drag interface is nice and fast, but not as accurate as I’d like.
- Latest Posts doesn’t have a space for a title. Or I missed it. Instead I had to use a Heading block. Initially I wanted to left align the title, but my Latest posts grid used
alignwideand the heading block can’t do that. I got by adding a custom CSS class, but ended up going with a centered alignment instead. Which actually took me longer to see where to do that than I would like.
It’s not a huge list, but it is also a fairly simple page that had me scratching my head a few times as to getting it to do what I expected.
Now, some of this is going to be due to my experience with these specific blocks and improve as I use the editor. Some will be fine-tuned in the release candidates. But my experience so far is that Gutenberg has been a great improvement for writing posts, but a bit clunky as a layout builder.
Gutenberg has been a great improvement for writing posts, but a bit clunky as a layout builder.
I still do feel the Gutenberg editor will improve the page-building features over the current editor. Especially as more and more developers release custom blocks that do things typically controlled by shortcodes in the past. Atomic Blocks is a great place to start.
On Building a Theme for Gutenberg
I started putting together a theme for Gutenberg some time ago. Along with work obligations and the very dynamic state of some Gutenberg components I decided to table it for some time.
Once the November 19th release was announced (since moved to November 27th) I decided to pick things back up.
The Bad
My biggest concern has been with handling the new alignments. I’ve see-sawed between two-methods. Giving the content a containing wrapper with a max-width versus giving each top level item output a max-width. The Gutenberg starter theme went with the latter. And it seems Gutenberg has been developed in this regard.
At the time I had paused my development, this presented some issues with alignleft and alignright on certain elements. As they had no wrapper. A later version of Gutenberg added some fixes for this, but I had already gone with a max-width and negative margins.
As far as I know the Gutenberg editor has only recently introduced these changes. Which is a fairly large change to be making with the deadline breathing down the neck of a lot of volunteer theme developers.
That’s been my main concern. Not being completely active in Gutenberg development it’s hard to know all the changes being made to make sure I can account for them in my themes.
One being the addition of built-in responsive embed support. Initially this didn’t exist so I added it into my theme using fitVids.js. Which worked great until Gutenberg added their own version adding a giant whitespace above all my embeds. Oops. So I removed my method and went with the built-in features.
The Good
Gutenberg does make the connection between the backend and the frontend of the site much better than TinyMCE can. It is also a much better experience for inserting custom sections that would have to be done via shortcode in the past.
Where I would have previously needed to build out some custom customizer enhancements to build out my homepage for this site. I was now able to use core Gutenberg blocks to create something more quickly.
It does require a bit more from the styling standpoint. But that’s what a theme should be. Whereas the custom functionality for creating columns doesn’t need to be tied to the theme in anyway meaning it can port with a site from theme to theme.
Adopting Gutenberg
I’m taking 2 approaches toward Gutenberg adoption. For personal projects and my various open source plugins and themes I’m working to get them compatible with Gutenberg as soon as I can.
For client work, we’re taking a wait-and-see and advise approach. Since most of our client sites typically are built using ACF Flexible Content Fields, the Gutenberg editor is not a great experience. We’ve installed the Gutenberg Ramp plugin to disable Gutenberg per post type and will reach out to client’s the Gutenberg editor makes sense for to discuss upgrading.
A lot of our custom sites aren’t using the typical editor experience as is, so switching to Gutenberg is a big change. As Gutenberg is finalized we’ll start implementing that as our main experience for new builds.
Wrapping Up
The Gutenberg experience is a big step forward for WordPress. It bring a lot of extended functionality to building WordPress pages that used to only be possible with shortcodes and page builders.
I do hold out hope that the bugs are ironed out and the accessibility issues get their fair share of attention. Because WordPress has a much more diverse user-base than I can speak to with my experiences.
Gutenberg isn’t a perfect experience at this point. But the experience it is replacing isn’t a perfect one either. And it does feel like a step forward.
