Test Driving Gutenberg

Last updated on September 28, 2018

Why write about writing in a different editor?

I’ve got a few other blog posts lined up, but they need a lot more work. As WordPress is moving to use Gutenberg soon, I decided to take it for a spin. I don’t want to mess up my in-progress stuff using the beta version of it! This opinion post that is largely inconsequential, but I did encounter a bug. Luckily, the Gutenberg editor was stable enough to throw up a screen to prevent me from using it further, so no need to worry just yet. Writing an article about Gutenberg is also a short and sweet way to get familiar with it. Plus I get to work on my writing skills. Win-win! New experiences can be a little scary, especially if you have established a comfortable routine using the tools and processes of your choice. As a programmer, it is my duty to my craft to challenge myself and try new things. Now that Gutenberg is in Beta I must try it – I owe it to myself and my web development clients!

The right tool for the job

Editors are vital to me. Being a programmer, I use a bunch of different editors throughout my day. Each has a different feel, maybe even a different focus. Not unlike cars. While all cars have four wheels, an engine, various controls, seats, windshields, safety systems and a host of other systems in common, each car feels different to the driver. Every driver must grow accustomed to handling their vehicle and may find some vehicles suit better than others. For general coding and scripting, I enjoy using vim and Sublime Text. For larger development projects I go with IDE’s for heavier lifting (e.g. JetBrains IntelliJ IDEA, Visual Studio). For writing WordPress blog posts, I reckon that I have a less than typical process. I usually start a blog post using vim, formatting using Markdown as I write. Then, once I have some skeleton of the blog post, I’ll copy it over to a new WordPress post. From there, a Markdown plugin would take my pasted markdown text and do it’s magic, making it appear as markdown in the Text mode while WordPress keeps an HTML version of the post in its database (in case I disable/remove the plugin). As it turns out, this process does not work with Gutenberg – for the moment at least. The markdown plugin I’ve tested is not compatible but is also no longer supported with updates (even though it is part of Jetpack). I suppose that if I fancied markdown support enough, I could develop a plugin. However, the world is home to a sufficient number of WordPress Plugins developers who also enjoy Markdown. I wager that Markdown support (via plugin or Gutenberg block) will be developed, by someone who isn’t me, within a year of Gutenberg’s full release.

Visual vs Text

Initially, my primary interest was in the “Visual” mode and the “Text” mode.
Classic Text mode has earned my trust My time spent administering WordPress sites for various folks has made me trust only the Text mode in the Classic editor, for good reason. Permit me to indulge in a brief explanation. The Classic editor’s Text mode reveals all the markup used throughout the post – even elements later added by WordPress like automatically added <p> tags. My WordPress clients would generally prefer ‘Visual’ mode, which hides the markup and shows a friendlier version of the post to edit – though not exactly what you see on the publish site (that’s what Preview is for 😉 ).

Classic Visual mode has caused me pain

On occasion I would be called upon to investigate an issue with a page or post that has broken, the cause is generally some issue with the HTML. Mostly perpetrated by some elements missing correct markup caused through copy-pasting a snippet of text or HTML from elsewhere. You can quickly identify and fix such errors using the Text mode. I suppose this honest-to-goodness mode gives me comfort – one clearly sees the HTML source and can easily predict it’s behaviour. This clarity has made the Classic editor Text mode my personally preferred mode for writing. Naturally, I had to test this.

Gutenberg’s Text mode gave me a little fright

Gutenberg’s Text mode is intriguing, as it exposes the HTML Comments inserted and (presumably) used by Gutenberg’s block system. Seeing this code is fantastic because I can see how blocks interact, like HTML. However, regarding the gratuitous quantity of HTML comments, I instantly feared that Gutenberg would cause trouble with SEO on my site. This fear was dispelled almost immediately as I found no trace of them in the front-end source. Fair play! However, using Text mode to write the post felt odd because of all those comments. I suppose my preferred mode of writing would change with Gutenberg.

Gutenburg’s Visual mode

Gutenberg wants you to use ‘Visual’ for writing – that’s where it shines. Writing in its Visual mode also has some sense of being a little ‘closer’ to the source than the classic mode. Call it intuitiveness or something; it is earning my trust through the blocks system. I had built up some resentment for the Classic editor’s ‘Visual’ mode over the years, but now it had to be dropped. Luckily for me, I’m more than happy to let go! Since starting to use Gutenberg for this blog post, I have found it to be a lot of fun, if at first a little weird.

Great vision, but we’re still a ways off yet

Gutenburg has the look and feel of a modern web app. In many ways, it reminds me of writing documents using Quip – my preferred office document app – which is a Good Thing for me. I have experienced a bug on publishing this very article, which caused an error that stopped the editor from loading. As a result, I had to finish this article off in the Classic editor. What a shame! I don’t know if I will end up writing exclusively in Gutenberg once it is fully released, but I can imagine that WordPress bloggers and authors will grow to do just that. If you experience any gutenbugs, this article tells you how to go about reporting them (I shamelessly robbed that guten-pun too): https://jasonyingling.me/reporting-gutenberg-bugs/