Gutenberg Emphatic Empathy

The goal for this empathy challenge was straight-forward: re-create a Longreads article by using Gutenberg. If you’re not familiar with it, here’s what the new Gutenberg editor promises:

Get ready to make your words, pictures, and layout look as good on screen as they do in your imagination, without any code.

I picked the article “Did Brian Easley Have to Die?” by Aaron Gell, and it took me just under 19 minutes to copy and paste the text and images, style them, make some adjustments, write some CSS (more on that later), and customize the theme to make it look like the original article as close as possible.

What I loved

Gutenberg got the basics covered and it performs beautifully.

1. Copy and pasting content is a fantastic experience

Links, quotes, and even basic styling is preserved. This is great for people working from an external document and pasting it on their site.

2. Drag and drop works flawlessly

Images in particular just snap into place!

3. Flexible styles

I like how we can use the paragraph block options to quickly make a size adjustment (among others), or how there are multiple quote stylings.

4. Sandbox-y CSS edits

As a designer, I found myself jumping to CSS edits pretty quickly because I’ve used Gutenberg before and am aware of its limitations. Though you should never rely on inline styles, I like that the block gets converted to an HTML sandbox type of block and all edits are self-contained and the code highlighted. Before we just had Visual or HTML editor, and this bridges that gap quite nicely.

My wishlist

1. Not everything is what it appears

For a WISIWYG editor, there are still a bunch of things that we could be doing better. Gutenberg tries not to be prescriptive in the style it applies; but in the case where a specific style is selected, shouldn’t it?

For example, when using quotes I started with this:

Selected Quote style 2, and got a much more fitting styling:

Just to find out the frontend was showing a weird mix of both because of theme inherited styles. Also notice the lack of italics:

2. Walking a thin line between editor and styling interface

Why are certain things part of the Gutenberg experience, and others are delegated to the theme code? Wide images are the prime example of something Gutenberg should do out of the box without needing this:

add_theme_support( 'gutenberg', array(
     'wide-images' => true,
) );

Why is image alignment or resizing a image on the fly treated any different from a wide image?

3. Can’t change multiple blocks at the same time

When multiple blocks are selected and they’re all of the same type, why can’t I change their common properties at once?

4. Can’t see images source easily

I like that the options for the image block are succinct, but being able to see where the image is hosted without having to jump over to the code editor (and scrolling a lot in this case) is a must have, in my opinion. This is particularly true when dragging and dropping from a different website, which is very useful, but doesn’t highlight the image is stored elsewhere and could break.

5. Unify shortcuts on different blocks

Pressing the enter key at the end of a paragraph block creates a new one, and I somehow expected the same shortcut to work on a quote block but it didn’t.

6. Square brackets are instantly converted to shortcodes

The article I picked had text enclosed in square brackets — [on how to respond] —, and these are a pretty widespread device used in writing, so I’m not sure the decision to convert every iteration of square brackets without additional checks is good.

Screen recording

Here’s the uncut walkthrough of my experience: