Test Driving Gutenberg

As part of our latest Empathy Challenge, designers at Automattic were challenged to recreate an article using Gutenberg. Gutenberg is a new block based editor designed to simplify post creation and so I was happy to try it out! Here are my initial thoughts.
I chose to recreate this article from

Total time: 27 minutes

Things I liked:

The gentle learning curve

The whole thing felt intuitive to the greatest extent. The suggested block types gave me what I was looking for, the ellipsis menu was obviously placed, adding blocks between blocks behaved exactly as I expected.


One thing I noticed very early on is how I can copy multiple paragraphs of text and Gutenberg creates a new block for each one. This wasn’t the behaviour I expected but I was pleasantly surprised because paragraph text formatting was retained from the source it was copied. Pasting images also worked great! I could simply highlight an image and copy paste directly into Gutenberg which was also a nice surprise. It didn’t paste image captions though, but I would guess this is because Longreads uses a div for captions as opposed to something more semantic like figcaption.

Screen Shot 2018-04-18 at 16.59.32.png

Transform into

I ended up using this a few times and was helpful for not re-typing the text or fiddling with copy/pasting the text. However, I think I only ended up discovering this because I was testing. It could be helpful to surface this a little more.

Screen Shot 2018-04-18 at 17.00.30.png

Automatic image captions

I think Gutenberg was taking captions from images I had saved from the image meta data but this was a pleasant surprise to see!

Screen Shot 2018-04-18 at 16.58.27.png

Things I struggled with:

The post title

I wasn’t able to center the post title despite it appearing as a block, albeit a block that was somehow different because it was un-deletable. For this reason I wasn’t able to replicate the post exactly without using custom CSS to center the title text.

Screen Shot 2018-04-18 at 17.01.06.png

Adding blocks between blocks

Although, as I mentioned before the behaviour was intuitive. The performance in practise wasn’t as great. I found it difficult to click the little line that popped up when hovering the pointer between blocks. So instead I was clicking after the last character in a paragraph and pressing enter which added some friction to the experience.

Screen Shot 2018-04-18 at 17.01.37.png

Additional CSS classes

I would really like an autocomplete/dropdown here. Especially for all the classes I have created in my custom CSS. Also it wasn’t clear if I could add multiple classes or not. So maybe once I select the class or press the spacebar after typing a class it would become a ‘tag’ with a background colour.

Screen Shot 2018-04-18 at 17.02.07.png

By Sylvester Wilmott

Mobile designer @ Automattic