Using Gutenberg to recreate “It’s Time for Real Talk About Aliens”

For the latest design empathy challenge we were asked to replicate an article using the new Gutenberg editor. As a fairly new Automattician, I’ve been pretty unfamiliar with Gutenberg so I was excited to spend some time using it.

The Challenge

To complete this challenge I followed these steps:

1. Use the latest version of Gutenberg — currently 2.3.0.
2. Pick a post from Longreads. I chose “It’s Time for Real Talk About Aliens” by Aaron Gilbreath because I BELIEVE 👽.
3. Try to reproduce the content of the page as closely as possible.
4. Record and share your experience.

So what is Gutenberg anyway?

For those of you out there that are as unfamiliar with it as I have been, let me give you a quick summary. Gutenberg is a new publishing experience for WordPress and it’s named after another invention that revolutionized publishing, Gutenberg’s printing press. The Gutenberg editor uses blocks to create all types of content, replacing a half-dozen inconsistent ways of customizing WordPress, bringing it in line with modern coding standards, and aligning with open web initiatives. If you want to learn more you can continue reading about it over here. It’s also worth noting that Gutenberg is still in the beta and testing phase so I approached this challenge with that in mind.

Elements that I loved

• I felt comfortable landing in the editor and felt like I knew where to start. I liked that the permalink for the post is displayed for quick copying.

• I liked the various block settings and I loved being able to quickly see what the changes looked like inline.
• There were a lot of details that felt like someone had anticipated something that I might want or need before I needed it. One example was having the URL right below a button I added to quickly tell the button where I wanted the reader to go without adding friction to my experience.
• For the features that were included, the experience was easy, intuitive, and overall delightful.

Where I struggled

• When copy and pasting elements I was surprised to see content drop in on different lines.

• I struggled to get the writer’s image on the same line as the byline and eventually gave up.

• I wasn’t sure what a shared block was so I played around with it for a minute. I thought maybe it meant that I could have content and an image on the same line but realized that it was for saving styling for content blocks which is great even though it wasn’t what I needed for this post.

• I liked that the paragraph block had text settings but wished there were more options. Specifically I was unable to update the text color to perfectly match the color from the post and I also couldn’t find an option to update the link colors to match the red from the post. I wanted to be able to add the exact hex value for red rather than just selecting from the colors given.

• I wasn’t able to figure out a way to center the caption for the photo.

• When I copied over content into a block quote the editor didn’t keep my paragraphs intact.

• I wasn’t able to figure out how to remove the rounded corners or make the button go full width even after I played around with some CSS (can you tell I don’t code?)

Here’s a video recording of the work I did for this challenge. It took me about 9 minutes but I wasn’t able to make the content match 1:1.

Want to see more? Here’s Mel Choyce and Davide ‘Folletto’ Casali doing the same challenge.