Don’t block the box

In order to give the new WordPress core editor Gutenberg a test drive I tried to recreate the formatting of the Longreads article A Farewell to Fuckboys in the Age of Consent Culture by Minda Honey on my own test site. It took me about 26 minutes to get the hang of most of it, and I kind of quit once I realized I wouldn’t be able to recreate every last stylistic detail of the Longreads header and footer without copying over their css or theme to my test site. Here’s a screen recording of my attempt:

What is great about Gutenberg

1. Much of it is intuitive and the editor predicts exactly what controls you’d like to have given the current context.
2. Pasting, as most people have said, is great. It’s easy to do and gives you a good starting point to finesse things.
3. The obvious controls are right near the content, the less obvious ones stay out of the way in the sidebar.
4. Lots more that I took for granted as I worked with it. It’s easy to take for granted very quickly.
5. It’s this good and it’s still in beta.

What was challenging about Gutenberg

1. The empty state of the editor is almost too minimal. There’s no toolbar, no invitation to do anything. It could be misconstrued as a bug or a loading state at first. I’ve heard similar feedback about the WordPress.com editor. It doesn’t have that same Google Docs word processor feel.
2. Extra space creates a new block, sort of annoying. It was hard to click on these empty paragraphs to clean them up.
3. Editing a link’s color was confusing when the link was inside a paragraph. I tried to make a link red and it make the paragraph text red. The editor couldn’t ‘guess’ the correct context for me.
4. Writing some custom html converted a block to an html block and lost other dynamic editing capabilities. I didn’t expect this—I’d only tried to write some html because I couldn’t do what I wanted in the sidebar with its customization options.
5. Using the ellipsis menu to delete a block was cumbersome. I wished I could click somewhere on a block to highlight the whole thing and hit the delete key.
6. Selecting things that weren’t normal text got a little confusing. I kept trying to ‘cut’ an image and it wouldn’t remove it from the page. Eventually I realized I could copy it then delete it, but got stumped for a minute.
7. Some of my confusion stemmed from not knowing which wysiwyg metaphor I was in. There are so many of those metaphors—google docs, keynote, adobe illustrator, sketch, other contextual editors like medium or dropbox paper. I didn’t know which universe I was in regarding how much direct manipulation was possible. I imagine that goes away after a few uses.
8. Trying to do ‘columns’ before I realized there was an experimental columns block got a little crazy:
   https://cloudup.com/chGskDc3vcO
9. I tried to do some of the header / footer formatting, but it didn’t feel like the editor was the right place to do it. If that content were to be visible in the editor I would want it to feel ‘locked down’ and only there for context. If I started editing a global block that would change it for multiple locations I would want to see my ‘local’ content dim out while I did it. Some separation of ‘the post’ and ‘the site’ would make me feel more secure.

Overall it feels like we’ve come a long way in a short time and I’m very much looking forward to Gutenberg taking over more of the WordPress experience. Customization shouldn’t only be available to those that can code.