My Gutenberg Empathy Challenge

This quarter we were asked to recreate a Longreads article using Gutenberg.

For the past couple of months I’ve been co-developing the WooCommerce Gutenberg Products Block, so by now I feel like I’m pretty familiar with how Gutenberg works inside and out.

Since I’m familiar with the interface, and I know how most blocks work, this made this challenge a bit, well, challenging. 😅

As you’ll see in the recording below, where I try to recreate the “Coachella, Underground” article, I’m very aware of the limitations of the editor, and I’ve sometimes unconsciously skipped sections of the text that I knew were not possible to recreate without custom CSS.

My notes

• When pasting a block of text that contained a word in square brackets, a “Shortcode” block appeared. It should only convert if a shortcode that matches the word is available.
• It was nice to see that when pasting multiple paragraphs of text, they were correctly converted to separate blocks.
• Adjusting individual settings for blocks, such as text size and color, is super intuitive
• Although the default block after a new line is a paragraph, multiples times I noticed that I was still manually going to the “block insertor” to pick the block. Perhaps it’s not clear that the new block is a paragraph?
• After pasting a block of text, sometimes the block inserter line under the block didn’t show up. I had to manually go to the top and hit the plus button.
• The difference between center block and center text is not easy to understand.
• Themes with full support for Gutenberg are still scarce. I tried to look for compatible themes in the directory, but ended up installing the Gutenberg starter theme.