Testing a new editing experience with Gutenberg

With the upcoming official release of Gutenberg, a call was put out to all Automattic designers to test and review the experience. Gutenberg is a plugin that changes the page and post editing experience of WordPress to a block-based format with the promise of enhanced capability and flexibility.

The challenge was to choose any post from Longreads and try to replicate it using the Gutenberg enhanced editing experience. I chose Rules for Departure by Rachel Z. Arndt.

---

Reviewing Gutenberg

When you hear many people in the WordPress community (but not all) talk about Gutenberg, there is a palpable excitement, and understandably so. The WordPress editing experience has been unchanged for years. When you compare Gutenberg’s editing experience to the current, it does feel faster, more flexible, and more powerful.

That’s a dangerous thought though, to compare your own product’s experience to its new one. Aside from the core, avid WordPress community (notably, not a small contingent), customers and the future customers of WordPress won’t do that. Their experience is going to be grounded in the ability to meet their needs quickly, delightfully, and without limitation. And when we fail at that, they’ll find an experience that does.

At Automattic we subscribe to Radical Candor, challenging ideas directly because we care personally about the products we create and the people creating them. So I won’t state here that I fell in love with the new editing experience. I didn’t. And me stating anything otherwise wouldn’t help improve the experience. 😀

Front-end like control, back-end view

With significant presentation control, the editing experience changes from being a content form to a design tool. This is a significant context switch worth examining.

The current WordPress editing experience is intentionally clear that it’s a prep space for the actual page or post. There is no attempt to resemble the front-end presentation. This indeed creates a laborious loop of editing and previewing but it is obvious.

The Gutenberg experience blurs this line. I found several times as I was recreating the post that my brain instinctively switched to “design mode”.

“I don’t want a black border on the left of this quote … Quote style 1? Oh there are different options! Let’s see quote style 2. Oh that’s what I want.”

Only later to discover that decision had little impact on what it actually looked like:

Now, having a background with WordPress I knew this. Yet still I found this editing experience making me think, “oh maybe I can control the design here now.”

The Gutenberg editing experience seems to want to be a front-end editor yet is still hand-cuffed to the theme. This is bigger than just the editing experience of a post or page. We have to consider the impact this has on the entire customer journey.

The editing experience

I shared above a significant and fundamental design challenge and the primary one I see facing the Gutenberg team. Looking beyond that I wanted to share some other thoughts on the editing experience.

• The block UI was clear and presented most of the options I was looking for. The most notable one missing for me was text color. I actually thought I had no control over color because I didn’t see it in the block UI. In writing this post I later found color options in the sidebar.
• As noted in the previous bullet, I found color options later. However, I then discovered that it didn’t work for the primary reason I needed: link color. Now perhaps this is less of an issue had I customized my theme first but nonetheless it wouldn’t be clear to others why changing the link color wasn’t working.
• I had trouble with getting the image to display as I wanted. I was expecting to be able to make the image stretch full-width (I recall having seen this as a feature in a demo). Yet I wasn’t able to accomplish this. I tried to make it a cover image, which made it slightly wider but not close to full-width and also gave an effect I didn’t want.
• It took me a bit to figure out how to add a new block at the bottom. I expected to find an option after my last current block to add a new one. I ended up clicking in the current last block and hitting enter.
• Moving block arounds was pretty simple and intuitive. 👍
• The button block UI confused me a bit. The placeholder text through me off (I was trying to highlight and replace). Also I don’t understand what the “Apply” arrow button did or does.

Here’s a video of my entire 13 minute editing experience:

It was fun and exciting to see a new approach to editing in WordPress. As I pointed out, there are still big decisions to made an more work to do but no design is ever done. I know this will continue to evolve and I’m equally excited to see what that next evolution brings.

Thanks to the Gutenberg for your hard work on this. Keep at it!