For this edition of our empathy blogging, designers at Automattic were challenged to recreate a Longreads article using the Gutenberg plugin.
According to Netflix I have a thing for British drama and strong female leads so true to type I selected Queens of Infamy. About halfway through I realized that the article, while entertaining, is not exactly safe for work. So with that lesson learned, take two is a Toxic Tour Through Underground Ohio.
This video is technically my second attempt at recreating an article so it’s a little bit smoother than my first time around.
What’s working
I was impressed with:
1) How quickly I got the hang of it.
At first it was a little weird that each new paragraph break created a new block but was smooth sailing once I figured that out.
2) The copy and pasting experience.
Sometimes I find myself spending more time formatting a post I’ve copied from a draft in Google docs than I spent writing the post. Just for fun after I finished this exercise I took one of my Google Doc drafts for a cmd+c, cmd+v spin and did a little happy dance when it mostly looked like how I expected it to. 🎉
3) The little details.
It was a really nice touch to show a little warning after you change the background color to something incompatible with your text color.
One small improvement here would be to auto expand the text color selector when this is displayed. The notice makes it look like the area is already expanded and at first I couldn’t figure out how to change the text color because I thought I needed to dismiss the notice.
What tripped me up
Text configuration and styling
Text configuration and styling tripped me up in a number of ways. Overall I found myself wishing that I had more granular text styling settings regardless of the block type. With the header block, the differences between H1-6 didn’t mean much to me and I ended up converting many of the header blocks to paragraph blocks because I preferred the richer text editing capabilities that paragraph blocks offered.
One thing I found tedious in my quest to make things match, was bouncing back and forth between the advanced block settings and the text style settings anchored above the block and wished I could control everything from one place.
Wrangling columns
The article I chose had a unique header where the text and image were side by side. Replicating this created a number of challenges and I was ultimately unable to fully resolve it.
I was able to sort of get close to matching using a left aligned image block and three paragraph blocks. However the background color for each paragraph block is pronouncedly separate and I couldn’t figure out how to make that area look like a single unit and retain the text styling.
I did try experimenting with columns but if I went through with this approach I lost the ability to have different text styles.
Other miscellany
- I found that I had to be very precise about where I was clicking the enter the caption text on the image. I finally got the hang of it but it was frustrating until I figured out what was happening.
- When I was experimenting with the “experiential” column layout options I was disoriented by the circles being on the right rather than the left. It took me a bit to realize that the circle on the right was associated with the column to the left of it.
What’s missing
Visual output that matches the editor
I found myself wishing I could override my site’s theme with the styling options in the editor and was a little disappointed every time I previewed my post.
Keyboard shortcuts
I fully admit this is probably a power user thing but I was missing a few key keyboard shortcuts I’m used to in text editing applications. Most notably italicize and adding a link. Having to find and click the buttons threw me a bit because it’s so foreign to my normal workflow.
Recently Used
One area of opportunity might be to show “Recently Used” section within Suggested. I inserted a couple of dividing lines into my article and it was a pain to have to navigate to them each time. I know search is available but I’m not a big “searcher” because it requires moving my hand from the mouse back to the keyboard. (Although looking after writing this and looking back at the options in Suggested, the Separator is that list.🤔 I’m not sure if this updates based on usage or if I just totally missed it before and was working harder than I needed to.)
As someone who spends a fair bit of time working in Google Docs and the current WordPress editor experience, I’m really excited for the Gutenberg future after this test drive. It feels like a natural step forward and there’s enough to like about the current early experience to see the promise and potential that it has.
Many kudos to the team hard at work on this! 🌟
Photo by Amador Loureiro on Unsplash
Automattic Design 
Comments
I wanted to say thanks for this post. I also wanted to note that merge: https://github.com/WordPress/gutenberg/issues/6255, the background and text color panels has been made as an issue, this avoids the a11y check hovering disconnected and is also a better experience.