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 longreads.com
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.
Pasting
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.
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.
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!
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.
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.
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.
Automattic Design 