Gutenberg 2.6 Empathy Challenge

One Automattic designer’s experience copying a Longread’s post to recreate it with Gutenberg.

Today I took Gutenberg 2.6 for a spin. I was eager to jump back in to see how it was coming along, it had been a few months since I’d looked at it last.

Video edited for brevity, actual record time was 33 minutes.
Soundtrack thanks to BoomBox, track: Stereo

My notes:

  1. I couldn’t find the cover image setting to make image full width. I knew based off my previous experience this should be a setting. I later found out it’s theme dependent and the theme I was using, 2017, does not yet have this as an option.
  2. I wanted/expected to be able to left align the caption on an image.
  3. I had issues multiple times with multiple empty paragraph blocks. In one example I had to move text from one paragraph block to another. Moving the text resulted in an empty paragraph block. I got frustrated trying to figure out how to delete an empty block, there was no option to remove. I eventually figured out I could hit backspace, but it seemed inconsistent, felt like I had to hit backspace 2x to actually get it to remove.
  4. It took me a second to figure out how to remove a link from text. I didn’t notice the option was on the bottom attached to the URL box, I expected it to be the top link icon. 
  5. I couldn’t adjust the URL embedded images how I wanted, so I ended up embedding instead. After embedding it did not give me the exact image positioning control I wanted.
  6. I expected to be able to make the link text color red. Block styling didn’t seem to override the theme style like I would have thought with the option showing.
  7. Had an issue with center alignment not copying over from the original post.
  8. Couldn’t extend the width of the horizontal rule, assumed this was because it was theme styled, but would have been nice to be able to decide (maybe could be the same as the new separator pixel control setting?)
  9. Expected to be able to convert a paragraph block to a button block. Tried to copy the ‘Sign Up’ text with link to paste in the button, but this kept the link text styling on the button (blue underlined text), which I did not want. Could not remove the blue link text, got frustrated, and deleted the button block.
  10. After previewing the post and reloading my post edit page my embedded images were blank. I think this is a bug. 🐜

Quote Styles

I didn’t mention this in my video but I am still questioning the 2 quote style setting, since we had so many issues with that in the WCUS usability tests. I’m not confident that the icon represents the idea of 2 different quote styles.

I wonder why we keep this around, or if it would make more sense to have quote style options in the block inspector on the right where we could more visually represent what the quote style actually looks like. I suspect this will be theme dependent. It feels more consistent to me to keep text styles (aside from justification, bold, italic) in the block settings inspector.

Finally, it feels a bit ironic to be writing this post about using Gutenberg, not using Gutenberg. As we saw with the usability tests at WordCamp US, it does add an extra layer of complexity asking someone to recreate a post that’s already published vs. writing a new one on your own. Certain styling tweaks that might hold someone up trying to copy a style are not as likely if they are writing from scratch. On the other hand, it does help us discover areas we might not have considered otherwise. And of course, it gets us using it and sharing feedback, which is the most valuable aspect of an empathy challenge such as this!

I encourage you to try this with someone else, watch how it works, or doesn’t, for them. If you notice a bug, you can search open issues in the Gutenberg GitHub repository to see if it’s been reported before. If not, you can open a new issue, describing what was expected and what actually happened.

Also, be sure to follow the development progress on like this April 5th update from Matias Ventura, lead developer of the #Gutenberg project.


Comments are closed.