Fresh look into Gutenberg for WordPress. A usability walkthrough

 

A first look at Gutenberg for WordPress

Over the past year I’ve heard quite a bit about Gutenberg on channels like Twitter, Facebook, and various WordPress news outlets. I also was fortunate enough to see a brief demo of Gutenberg by Matias Ventura during the State of the Word at WordCamp US in 2017 (Demo begins around ~33:00).

Although I’ve seen Gutenberg in action on the big screen, up until now, I haven’t really tried to use it to create content or layout. This 53 minute long walkthrough is my first real in-depth attempt at utilizing Gutenberg to create a blog post. I found a great post about cherry blossoms in Tokyo by Nano B., which was featured by the editors on discover.wordpress.com, and decided that trying to replicate it would be a great route to take.

The video above, along with my notes below, seek to document my journey through the entire experience—good and bad. Enjoy the stream of consciousness in the video!

Video Table of Contents

1. Gutenberg installation & activation — 1:15
2. Creating a new post with Gutenberg — 2:30
3. Adding a title, text content, and my first image — 2:35
4. Tinkering with the Subhead element — 7:15
5. Embedding a Tweet — 18:40
6. Setting a featured image — 20:58
7. Uploading a gallery of images — 22:13
8. Transforming a gallery into single images — 29:15
9. Changing arrangement of blocks — 30:58
10. Investigating the Gutenberg code editor — 43:40
11. Adjusting the style & size of text blocks — 46:45

Aha! Moments

During my initial dive there were a few moments of blissful surprise when I discovered some particular functionality that was unexpected, yet very useful. You’ll notice my gleeful reactions in the video walkthrough above.

• Ease of use of adding / transforming / deleting blocks: My first time really experimenting with Gutenberg and I was incredibly surprised at how simple it was to create and manipulate the content blocks—so much nicer than the visual editor of WordPress core. Personally, I’m still fairly partial to the editor on WordPress.com, which self-hosted WordPress customers have access to through Jetpack. The clean visual style of the Gutenberg editor matches that of the editor on WordPress.com, but with superior functionality.
• Formatting translation: I accidentally copied and pasted the entire page I was trying to duplicate manually, into Gutenberg. It was very intelligent with keeping the formatting on all the elements I pasted in—including comments and meta data.
• Multiple block selection & arrangement: Being able to select multiple blocks within Gutenberg and move their location on the page simultaneously is incredibly helpful (31:14 & 36:58 in video)
• Adherence to responsiveness & theme styles:  I was initially apprehensive about how the images I added would appear on mobile devices. Without good reason of course. All the content I created automatically adhered to the theme styles of the Hemingway theme and were responsive to multiple device sizes. It was awesome to see.
• Markup behind the scenes: I switched from the visual view to code editor view of Gutenberg and was amazed at the cleanliness of the markup. All the blocks are created by some shortcodes / tags that are similar to HTML comment tags. It’s very easy to see the organization of the elements upon a quick glance and even easier to move them around. Caveat: I did not try to write HTML or CSS in the code view.
• Design nuances:  It’s evident that a lot of care has been taken by the Gutenberg team when creating new block elements and IA.
  • The Gutenberg document outline is amazingly cool and useful for authors.
  • Subtleties like being able to add a drop-cap to the beginning of an article without touching code is classy.
  • As you re-arrange blocks, Gutenberg has a really nice way of moving them up or down within the post or page
• Accessibility: Gutenberg can be used to its full capacity with just a keyboard. Really awesome to see and a staple for proper a11y.

Pitfalls / Bugs / Unexpected Behavior

Throughout the experience I ran into some quirky situations where Gutenberg got a little wonky on me or didn’t behave in a way that I expected it to.

• Fumbling between blocks: At a couple of points I started to fumble around and had a slightly difficult time trying to select a different block from the one I was in (3:43 in video), trying to remove a block, or trying to unselect a block. After a short time I was able to accomplish those goals, though.
• Tweet Embeds: I attempted to embed a tweet (18:40 in video) and copied the “embed tweet” code from twitter and pasted it into Gutenberg. It transformed it into a simple blockquote and stripped out all the JS and such associated with the embed code, rendering the tweet unrecognizable. Which I might add is a nice thing Gutenberg does so there’s not strange JS hanging around and causing problems. BUT, I think it would be prudent to communicate what it stripped out to the user, so it doesn’t leave them wondering why it’s not working.
• Block menu troubles: Some items in menus not accessible unless you scroll around in Gutenberg. For instance, as I attempted to delete a block (20:21 in video) in my post, half the menu was hidden behind other elements. So I had to de-select that particular block, scroll up, and then re-select the block and its menu to see the “remove link”
• Heading element confusion: Early in the video, around 17:00 I got a bit confused with the “Heading” element and “Subhead” element. It’s not until later that I figure out that the heading element contains the option to choose H1, h2, h3, h4, etc. I was initially under the impression that the “Subhead” element would contain h2, h3, h4, etc. When I got an error that the “subhead” element could only be used once, I was perplexed.
• Spacing between blocks: I wanted to add some spacing between an image and a subhead and couldn’t really find a way to do that (9:25 in video).
• Editing an image: When I clicked on the edit button on an image it was a lengthy process to finally get to the image editing tools (3+ clicks) (14:28 in video). The flow is a little broken since it drops the user off in the media library area.

UX Notes

Here’s a small list of some quick little improvements I think can be made to enhance the overall UX of Gutenberg.

• Admin location jump: When I initially activated Gutenberg and went to the “Demo” area (2:12 in the video), I didn’t realize that it actually jumps to a demo post right away. Not a huge disruption, but it felt a little weird. In the video I suggest making note that the user has been moved to a new location within the WordPress admin—some kind of a call-out maybe.
• “Textual Alternative” in image settings doesn’t really explain what it is—it simply tells the users what to write there (5:12 & 12:28 in video).
• “Additional CSS Class” in image settings doesn’t explain what it is or how to use it (there’s at least a note until the text alternative area). Not clear at first.
• Block placeholder text: I noticed that sometimes when I added a new block it was blank and other times it had some “Add text or an image” placeholder text. It was inconsistent (9:35 in video)
• Image loading notice: I think that a loading icon is needed when a lot of images are added into Gutenberg (drag and dropped). Otherwise the screen just sits there and I was unaware at what it was doing, if anything, for a little while (29:10 in video).
• Delete icon: There’s an icon to add a new block next to every block, but not icon to click to delete a block. It’s not evident how to do this (30:22 in video).
• Code editor: Wasn’t immediately clear as to where the code editor version of the editor is or how to switch to it (43:40 in video).
• Inserting a link: When I selected an image and attempted to give it a link, the link box has a bunch of scroll bars (45:12 in video)
• Post update notice: Notice alignment is actually _too good_, I almost closed the wrong thing! (48:20 in video).

Conclusion

Gutenberg as come a long way in the past year. I still see a few quirky bugs and some UX tidbits that could use a little improvement. For the simple things like adding blog posts, it’s phenomenal. I think there still needs to be a lot of work done addressing & enhancing more complex iterations of page templates and plugin additions (that’s a bigger conversation occurring right now)—but that’ll happen all in due time. At this very moment, if you’re a blogger, photo blogger, or the like, and you’re looking for a clean and intuitive way to create content on WordPress, Gutenberg is ready. For more complex stuff, we’ll have to wait and see—but it’s turning out to be an indispensable addition to the WordPress experience.

 

Credits:

• The blog post I duplicated was Tokyo’s best places to see Cherry Blossoms by Nano B. This post was featured on Editors’ Picks on Discover.WordPress.com
• Featured image printing press background photo by Raphael Schaller