Taking Gutenberg for a spin

Full disclosure: I’ve been using Gutenberg a bit with my work on the WordPress.com Theme Team, but I haven’t used it in this particular way. Yesterday I would have told you that I knew my way around Gutenberg, but this exercise forced me to re-think a few things and use some blocks I hadn’t considered before, as well as uncovering some issues with using it to re-create an existing post.

Usage is like oxygen for ideas.

That quote comes from an article Matt Mullenweg wrote in 2010, and it’s a part of the philosophy at Automattic: you’ll learn a lot about your products if you use them yourself.

This quarter, all of the designers at Automattic were tasked with using Gutenberg to re-create a post from LongReads. I chose The Strike: Chemicals, Cancer, and the Fight for Health Care and re-created it on a local install of WordPress. Overall the process took about an hour and 5 minutes, not counting 10 minutes or so of prep time where I copied the images from the original article, installed WordPress, Gutenberg, and downloaded Joen’s minimalist Gutenberg-friendly theme Navi. The video below is a screencast of the process, sped up 8x, so the total run time is a little over 8 minutes.

Overall, my experience with re-creating an article with Gutenberg was really positive. There were a few minor bumps and glitches, but they’re nothing that can’t be sorted out with a bit of polish. Already, Gutenberg allows us to layout content in WordPress in ways that weren’t possible before without additional plugins or custom CSS, and the workflow is getting more and more streamlined.

A few issues I noted:

• Editing tables didn’t have the granularity I was hoping for, but I haven’t really found a WYSIWYG editor that does tables well, so it wasn’t unexpected. When I tried to re-create the “help support LongReads” block at the top of the article, I realized that a table was probably the quickest and easiest way to get the formatting I wanted without a bunch of CSS. I had to write some custom CSS to match the look of the original article. It’s a hack anyway, but one of the first things I struggled with.
• I was a little confused about whether I should use quotes, pull quotes, or sub-head blocks for some of the content, but this is mostly my own ignorance about the terms, and I imagine it might be confusing to other users as well.
• The bottom of the editing window has some shortcuts to add blocks, but it only seemed to show up after an image block, not after I’d pasted a bunch of text blocks.
• I kept running into the WP-Admin UI, where being imprecise with my mouse led me to stray into drop-down territory across the top or side of the editor.

A few areas that Gutenberg really shined:

• Copying large blocks of text was super easy. I really liked that blockquote formatting came through automatically (which saved me a bit of time). I was pleasantly surprised to discover I could drag and drop an image directly into the editor, and it would upload and create the image block automatically.
• Gutenberg was pulling image captions from somewhere, maybe image meta data? I was surprised because it was happening automatically, but confused by where the data was coming from.
• The HTML block editor has some neat features, like tag autocomplete and inline error checking.

There’s been a bit of a discussion on the theme team, and in the community at large, about how Gutenberg will change how people build sites with WordPress, and how themes in the future will need to be different. There’s more than a little truth to that statement, but this exercise has shown me some of the gaps that themes will still need to fill until Gutenberg has matured.

 

 

 

 

Overall, I’m left with a better understanding of Gutenberg, more ideas of how themes and Gutenberg can work together, a couple of ideas for some new Gutenberg blocks, and a list of improvements I’d like to share with the Gutenberg team. I’ve been excited about Gutenberg since it was announced, and I’m really happy with the direction it’s heading!