Reproducing a Discover feature in Gutenberg

Gutenberg is rapidly getting better and better. I’ve been digging into its relationship to themes, and have been experimenting with its role in content as well. In that vein, I took on a Gutenberg challenge this month:

1. Use the latest version of Gutenberg — currently 2.4.0.
2. Pick a post from Discover or Longreads. I chose Selling on Your Site: Tips on Using the Payment Button by my colleague, Cheri.
3. Try to reproduce as closely as possible the content of the page using Gutenberg.

This was an especially fun exercise for me because I designed most of the article styles on Discover. 😄

I’ve been deep into Gutenberg-land lately, so this exercise turned out to be fairly simple for me. Recreating the article took me just a little over 7 minutes, and I ran into only a few issues. Here’s a sped-up video of the process:

What went well:

• Most of the in-article styles were pretty simple: full-width images, divider lines, paragraphs, and headers. Those all have 1:1 equivalents in terms of Gutenberg blocks, so putting this page together was fairly trivial.
• Most of the Gutenberg text styles were very similar to the text styles on Discover, so the overall feel is pretty similar. 🙂
• Slash commands were really helpful. Once I get more into the swing of using Gutenberg regularly, I think I’ll rely heavily on them.

What didn’t go well:

• Floating the author image to the left of the attribution text looks like it was easy in the video, but that was actually just luck. 😄 I actually have no idea how it worked. Did the image block merge with the paragraph block when I changed the alignment? It looks that way. If so, that breaks my mental model of what a block is.
• I wasn’t able to add a dropcap to the introduction.
• After pasting text in, my cursor kept showing up at the beginning of the block, before the pasted text. This didn’t make sense to me — I’d have expected it to be placed at the end, so I could move on to the next paragraph and/or add another block. (I noticed my coworker Mel filed a bug for this. 🙌)
• The biggest issue was more of an overall impression: compared to other editors I’ve used, Gutenberg felt fairly intrusive to me. Every time I moved my mouse around, little arrows, boxes, buttons, and controls appeared all over the place. It felt a little like UI overload, and didn’t make me feel calm and focused in the way a more traditional text editor does.

All in all, I was impressed with the page-building aspects of Gutenberg. I was able to create something decent in just a short period of time. I’m looking forward to seeing Gutenberg grow and evolve as more people begin to use it.

Read more: Mel Choyce and Davide ‘Folletto’ Casali tackle this challenge.