Taking Gutenberg for a Spin

As part of our quarterly empathy challenge, I attempted to recreate this Longreads post, “Hey, Can I Sleep In Your Room?”: Studying Love with Elizabeth Flock. Beyond copying and pasting the article itself, I attempted to recreate the entire page — site header, content, and footer — to see how far I could push it.

For some background, I’ve used Gutenberg on my personal blog to compose regular posts and pages with images and galleries, so I have some experience with the editor. What I hadn’t tried was creating a whole site experience. I decided to record the process from start to finish, and I included myself talking throughout so it’s clearer what was going through my mind as I worked. You get to see all my clicks and keystrokes and many, many mistakes. (Watch me forget how to float an element with CSS!)

The setup took me just over fifty minutes, and the result is about 70% of the way there.

My most notable takeaways from this experience:

The awesome stuff

• The preservation of formatting on copy/paste is fantastic; especially useful for italics, bold, and quotes. I expect this works when copying/pasting from another document format (Word, Google Docs) as well.
• Gutenberg works well for composing very basic posts or pages; paragraphs of text with the occasional image or gallery come together beautifully.

Stumbling blocks

• Text in brackets [like this] were converted to shortcodes and had to be fixed throughout the text. This seems like a very “WordPress” problem, as in, only WordPress would think text in square brackets is a shortcode and not just text.
• Floated images are difficult (if not impossible) to select; I had to delete them and reinsert multiple times, often accidentally deleting or moving surrounding content in the process.
• It seems arbitrary as to which blocks convert to which blocks. I expected to be able to convert a heading into a button, or a cover image into an image, but I can’t! I can convert a cover image into a heading, though. These selections didn’t always feel intuitive and left me asking, “Why not?”
• I spend a lot of time clicking, not certain if my cursor is in the right spot. There’s a lot of guesswork involved.
• At the 27-minute mark, when I do edit some blocks, there’s a lot going on, and the sudden appearance of a bunch of arrows, icons, etc. often makes the screen feel crowded.
• Around the 28-minute mark, I copy and paste a link into the text area of a button, and it stays styled as a link with no way to remove the link.
• I never figured out a way to remake the site header in Gutenberg, because I can’t put anything above the document title, and creating links in columns proved tricky. I suppose I could have put it below, but that wouldn’t have made sense in context.
• I forgot I could make columns until the very end of this attempt. They didn’t quite meet my needs, as you’ll see in the video; text columns are easier to work with, but offer few customization options, while the experimental columns are nearly impossible to work with beyond 2 or maybe 3 columns wide (perhaps a limitation of my 13-inch screen?)
• Much of the overall style is determined by the theme; changing link colors or heading backgrounds or separator styles, for example. That made it very difficult to match the article completely.

Until now, I hadn’t done more than compose blog posts with Gutenberg. Attempting to use it as a site builder was illuminating, and highlighted areas that may need attention when the focus shifts from content editing to customization.

All in all, I’d consider the experience frustrating, but promising.