Recreating “Here at the End of All Things” in Gutenberg

It’s that time again — another Empathy Challenge at Automattic!

This edition’s challenge is to replicate a post to the best of our abilities in Gutenberg, the new editor coming to WordPress later this year. Because I’m a giant nerd and also because there was a variety of different content within the post, I selected “Here at the End of All Things” by Adrian Daub. I wanted to challenge myself, since I’m very familiar with Gutenberg.

It took me fourteen minutes to convert the post from its original format to Gutenberg.

What went well

Overall, I found the experience… kind of easy. I’ve used Gutenberg a lot, which likely improved the experience for me. Here are the parts that felt great.

Pasting content

I was able to copy and paste most of the content from the original post into Gutenberg, without formatting issues. This made moving the post over a very speedy experience.

Drag and drop media upload

Adding media is seamless — dragging and dropping media into Gutenberg works exactly as expected, and pasting in a video link embeds it directly in the post. No need to fuss with settings or embed codes. (Of course, WordPress already does this — but it feels like a faster experience in Gutenberg.)

Quote styling, and one add what you need

Longreads has two quote styles, and so does Gutenberg! That worked out rather well for me.

I also love that Gutenberg’s friendly about not completing fields in blocks. If I don’t want to include citations, I ignore the placeholder fields, and they doesn’t render on the page.

Slash command FTW

The “Slash” command is the best feature of Gutenberg, hands down. I feel like I barely had to take my hands off my keyboard.

Where I got stuck

My overall experience was positive, but I still encountered some issues. I found myself fumbling around every now and then to translate my intent into action using Gutenberg’s new design patterns. Even with prior experience, there’s a muscle memory curve. Specifically, I encountered:

Which block is this?

When I first started adding a block, “Cover Image” was in my recents. However, I wanted a regular image. Since they have the same icon, I had to mouse over the icon to figure out which block was there, since I wasn’t sure and wanted to double check. Luckily I did, because otherwise I would have had to delete the block and re-add the Image block.

You can’t replicate everything

I tried to include all the extra bits of the post, like the “This story was funded by Longreads Members” banner, but Gutenberg doesn’t have an easy way to create something like that using the default blocks. What I really felt like I needed was a section or container block I could put both text and an image into, and have it be contained.

Images didn’t always act as expected

The pull-out images in the Longreads post (which feel like a bug to me?) aren’t replicable in Gutenberg. While trying it, I also discovered that if you float an image, it automatically uses a smaller crop — and you can’t change that. But what if I want to float a large image?

Is this style or UI?

I kept thinking the background color behind italicized text that I pasted was styling inherited from the original post somehow. It took me a while to realize that it was an indication that I was editing something italicized.

What about links?

You can change text color and background color, but not link color. Struggling between what’s too much design control and what’s too little design control.

Note: there is an issue for this.

Pasting trouble

Pasting in text leaves your cursor at the top of the first block, instead of the end of the last block, which kept throwing me off.

Note: made an issue for this.


Just because it looks right in the Editor, doesn’t mean it looks right when rendered on the front-end of your site. My theme didn’t correctly style all the Gutenberg elements, which made my post look really weird. I switched themes and it looked better, but I’d still have to do a lot of custom CSS to get it looking exactly as I intended.

Every time I use Gutenberg, it feels smoother and smoother. Can’t wait to start exploring how we can extend Gutenberg so you can edit your whole site!


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s

%d bloggers like this: