Gutenberg Plugin Review

For this quarter’s empathy challenge, we were asked to pick a post from Longreads and recreate it. I used my own site, jancavan.com, and created a page on there. I have a fully customized theme, albeit it’s quite old, so I had to switch to a default theme (Twenty Fourteen) to make sure standard styling is being used. I have to admit though that I was tinkering with Gutenberg even before I had started doing the exercise, so some of my feedback are issues that I stumbled upon before I began recording my screen.

What I did to test:

1. Downloaded WordPress Gutenberg plugin version 2.4.0.
2. Picked a post from Longreads entitled, “Welcome to the Center of the Universe.”
3. Recreated this Longreads post using the Gutenberg plugin.

What I liked:

I chuckled when I first saw this tweet because it’s very familiar to me, not only in word processing applications, but also in online editors and the like. My frustration with editors is because they almost always mangle content that I’ve copied over from somewhere else.

My normal workflow is to write everything in Evernote. This way, I don’t have to worry about accidentally publishing my post, but I really also just prefer to write all my notes, blog posts, to-dos, in one place. Since my expectations of editors are quite low, I carefully copied my content paragraph by paragraph, but when I saw my co-worker, Davide, being able to copy large blocks of text and images all together, I was quite impressed! This cut the time down significantly using my normal process.

What could be improved:

• My expectation was to see a preview of the entire page as I’m editing it; that each block’s actual placement on the page is visible to me, but it seems like I am still in the regular editor, just that I am able to edit content in blocks.
• At first, I couldn’t figure out how to insert an image. I was looking for an “add image” icon. It didn’t show up for me at least in the very beginning, but it eventually did as I was creating new text blocks. I realized later on that I could just drag and drop an image pretty much anywhere in the editor, but this didn’t seem intuitive to me at first. I thought that dragging/dropping an image wouldn’t work and the image would take over the entire screen.
• It’s not intuitive to me how you can add a new block (apart from pressing Enter which I figured out later). I learned that I can do this by clicking either the bottom white space of a block or the bottom border of a block.

• There was a block of text that needed extra padding. I was able to do this by converting it to HTML mode then I added padding around it using CSS, but for anyone who doesn’t have any coding knowledge, I don’t know how they’ll make this work.

• I was expecting for a way to easily resize my text. I found out later that you can do this on the Block panel that appears to the right of the editor. This was easy to miss because it defaulted to the Document panel.

• I don’t know how to change the color of my links. I highlighted a link and wanted to change it to red, but this also changed the preceding text.

• I see what Block Alignment is trying to do and it looks like it’s supposed to determine my text’s alignment against the images, at least based on the icons, but it misaligned everything?

• It wasn’t intuitive to me that the up/down arrows were for moving content around. My expectation was to see a move cursor to be able to do this.

Here’s a video of me doing the exercise. Overall, it took me around 14 minutes to be able to recreate the entire page, but if I had not tinkered with Gutenberg beforehand, I’m sure it would’ve taken longer.

Although there are areas that could use some improvement, overall, I think this is definitely a step in the right direction! I’m quite happy with this improvement 👏 And oh, I also really like the dropcap feature.

Photo by Hannes Wolf on Unsplash.