Gutenberg editor plugin is under rapid development, and each release brings new, exciting features. One of the easiest ways anyone can contribute to the project, is by using Gutenberg, and giving feedback on your experience. And this is exactly what we were asked to do for this quarter’s empathy challenge.
- use the latest version of Gutenberg plugin (currently 2.4.0).
- pick an article from Longreads or Discover’s Editors’ Picks.
- re-create it as closely as possible using Gutenberg editor.
I picked a Longreads article titled “The Way We Treat Our Pets Is More Paleolithic Than Medieval”. The process took me about 11 minutes, and overall I found it quite easy and actually fun! Putting together an article with text, quotes, links, and media is were Gutenberg shines, and it makes me very excited for the future when it becomes a site builder.
What I struggled with?
Text that uses italics has a grey background behind it. This was confusing, as I wasn’t sure if it means my text is selected, or if it actually has grey background. I had to go into block settings in the sidebar to verify that there’s no background color set. Turning off the italics removes the background.
Dealing with left/right aligned elements is clunky – the controls overlay each other and it’s hard to see which belongs to which element. I was also not able to stack two right aligned buttons.
The solid grey line that appears when the cursor is near the bottom of a block confused me. I kept thinking it’s for inserting a separator, but it adds new empty block instead.
In general, adding a new block was a bit of a hit or miss – I kept clicking on the empty space below the last block expecting it to automatically insert a new block.
It was a bit frustrating not being able to change link color. The text color setting seems to working on text only.
As I’m composing this post in WordPress.com’s Calypso editor, I’m already missing the contextuality of Gutenberg. Although imperfect, and a bit pushy with it’s toolbars, the experience of composing an article feels much more natural and powerful at the same time. But most importantly, it made me want to keep writing. ❤️
Cover photo by Mr Cup / Fabien Barral on Unsplash
Automattic Design 
Comments
Thanks for this post. I see you say that on copy and pasting there was italic and grey background. Could you give me more details on this please?
This is a phase two issue but logged under that project, changing a link color is something people want – 9 challenges reported this as desirable.
> I see you say that on copy and pasting there was italic and grey background.
I don’t think copy-pasting had anything to do with this. The issue was, that the italicized text has a grey background when in focus. I just tried this with Gutenberg 2.7 by adding a paragraph, and italicizing one of the words:
https://cloudup.com/ci5HLmCwOfo
The same thing happens when other text styling is applied, like bold or strikethrough, and I find it equally confusing.
Mark reported the same behaviour in his post: https://automattic.design/2018/03/25/testing-gutenberg-an-empathy-challenge/