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:
- Use the latest version of Gutenberg — currently 2.4.0.
- Pick a post from Discover or Longreads. I chose Selling on Your Site: Tips on Using the Payment Button by my colleague, Cheri.
- 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.