Test Driving the Gutenberg WordPress Editor

Hey there! have you heard? A new editing experience is on it’s way to WordPress. It’s called Gutenberg. In an attempt to build empathy for humans on the other side of the screen, many of the designers and developers at Automattic (The parent company of WordPress) are test driving Gutenberg and documenting their experiences along the way. Sounds fun right? Of course it does, because it is!

What’s that you say? You’ve suddenly been stricken with an acute case of FOMO? You want to shape the future of WordPress too? Fear not my friend. Getting in on the action is easy. Gutenberg is a work in progress and open source. You can read all about it in the Gutenberg handbook, and follow it’s development on GitHub.

To get started, download the plugin. Install it on a WordPress site, and give it a shot. If you’re feeling spicy, dive in and contribute via GitHub. If GitHub isn’t your thing, use this nifty form to submit feedback.

Addressing the task at hand

We were tasked with re-creating an article (to the best of our ability) from using the Gutenberg plugin. The whole test was to be timeboxed into a two-hour block. For my test, I selected the article: “The Quest for the Colission Zone: An Arctic Expedition”.

I’ve had a bit of exposure to Gutenberg, so things like basic text and image formatting were pretty straightforward. In 18ish minutes, I was able to get the article 90% of the way there. However, the remaining 10% was an insurmountable task without resorting to complicated, custom CSS – which in my humble opinion, defeats the purpose of a visual, block-based editor.

For posterity, here’s my entire attempt condensed into 30 seconds:

And here are two back to back screenshots of the original article, and my re-creation.

The original post
My re-creation

I think it’s worth noting that some of the more noticeable differences in the images above are things I’d consider theming issues. Most of the links in the Longreads article were red. The title text style was dramatically different. That begs the question: Should I, as a user of Gutenberg be able to recreate a completely different theme, style for style in a single post? I’ll leave that one to the philosophers for now.

Getting started

To begin, I figured I’d try to copy and paste the entire article directly out of Longreads into the Gutenberg post editor. One command-C, and one Command-V later, the whole thing was in the Gutenberg editor. Wow. That was kind of amazing.

Each paragraph of text was neatly broken into its very own paragraph block. Images had copied over as image blocks, and the pull quotes and asterisks used as separators came over in their own blocks as well. I was impressed. I was 30 seconds in. I figured I was home free… but there were some seemingly small issues that ended up taking up a significant chunk of the remaining 17 and a half minutes I spent working on the post.

Formatting text

For the most part, the text copied over as expected, with a few exceptions. Text alignment and italic styling had to be applied manually if the text was supposed to be center aligned. This got a bit tedious with all the pull quotes and asterisk dividers.

Screen Shot 2018-04-16 at 8.39.11 PM
Left-aligned asterisk dividers and pull quotes needed to be centered manually

Changing the color of the text was easy enough, as long as I wanted to apply the color to an entire block of text. This worked out fine in the case of the asterisk dividers.

Changing the color of a few words of text in a paragraph block wasn’t possible. It was all or nothing. I also wasn’t able to change the color of my pull quotes, but fortunately, they were already grey in my theme.

Screen Shot 2018-04-16 at 8.55.33 PM
Attempting to change the color of a link changed the text color of the entire block

Applying a color repeatedly also became tedious. Each time I had to highlight the text, click text color in the block editor, select the color picker, and paste in the appropriate value. The ability to save a color swatch for later use in the post, or elsewhere on the site would be a nice touch. Along those same lines, it might be nice to pull in preset colors defined elsewhere in the theme.

The biggest formatting misfire came in the block directly below the opening image. The first link copied over as an h2 in its own block. The second link was regular paragraph text, also in its own block. The little image was nowhere to be seen.

Screen Shot 2018-04-16 at 9.06.53 PM.png
The results of copying and pasting.
Screen Shot 2018-04-16 at 9.07.38 PM.png
Formatting in the original post, for comparison.

This block gave me more trouble than anything else in the test. In the end, I wasn’t able to replicate it. More on that later.

Images and captions, and blocks that won’t go away

I appreciated that all the images copied over easily without much fussing. I was able to resize the hero image at the top quickly.

Unfortunately, each image caption came over as it’s own paragraph block. It appeared directly below the image, rather than as a caption associated with the image. I had to copy the text out of the blocks, and paste it into the proper image caption.

This presented me with a new issue… at first, I tried to cut and paste the text from the block into the caption. Once the text was cut from the paragraph block, I couldn’t remove the block. The controls that let me remove a block were only visible if there was text inside the block.

Screen Shot 2018-04-16 at 8.13.49 PM
The menu toggle allows for the removal of a block.
Screen Shot 2018-04-16 at 8.14.25 PM
Deleting text from the block removes the menu toggle, and the ability to remove the block.

I know what you’re thinking… just copy and paste the text into the caption. Don’t cut it. Then delete the block you don’t need. I figured it out eventually.

I also eventually discovered (while writing this post a few days later) that you can remove an empty paragraph block by clicking “delete” on your keyboard when the block is in the focus state. A nice touch. However, this ended up presenting its own challenges.

Screen Shot 2018-04-16 at 8.15.10 PM
Clicking undo after clicking “delete” on my keyboard to remove a paragraph block

After deleting in this manner, then clicking undo, I ended up with a strange text layering bug. My only escape was refreshing the page.

I wasn’t able to change the alignment of captions. The original post featured left aligned captions. Gutenberg only allows for center aligned captions.

That right aligned book cover image

The second biggest stumbling block came in the form of the right-aligned book cover image, part way through the article.

Screen Shot 2018-04-16 at 9.43.59 PM
The book cover and caption in the original article

To begin, I selected the image and chose to align it right. The caption was in its own paragraph block directly below the image. When I re-aligned the image, the caption jumped up and positioned itself directly next to the top of the image.

It took me a while to figure out how to delete the caption paragraph block. In the process, I deleted the book cover image. I probably should have just clicked undo a few times, deleted the unnecessary block first, and added the caption to the image before messing with the image alignment. Hindsight is 2020. Alas, that’s not how my brain was working in the moment.

Eventually, I figured out I could bump the position of the unwanted box up a row using the up and down arrows floating in the left margin adjacent to the block.

With the block moved up one row, I could remove it clicking the menu toggle, and selecting “remove”.

My next hurdle was adding a caption with a link. It was virtually impossible to select just the caption text. Attempting to select it would end up selecting all the text in the adjacent paragraph block. In the end, I had to make the image full width, type in the caption text, then convert the text to a link with the provided controls. When I switch the image back from full width to right aligned, I momentarily lost my place and had to scroll back up the page to find the image.

Like the rest of the captions, I wasn’t able to align it left. Also, because of the text formatting issues, I wasn’t able to make it red.

Lastly, there were two subtle pinstripes above and below the book cover that I wasn’t able to add.

The “Funded by Longreads Members” block

With the bulk of the formatting out of the way, I returned to the top of the post to try to tackle the “Funded by longreads” members box. In the end, I was unsuccessful in recreating the block.

Screen Shot 2018-04-16 at 10.40.12 PM

I tried adding a column block, and the advanced column block.  Neither option allowed me to vary the width of the columns, it was always split 50/50 right down the middle.

Many of the block editor plugins I’ve used for WordPress in the past allow a user to vary not only the number of columns but their arrangement as well. This would be a very useful addition to the column block.

Screen Shot 2018-04-16 at 10.45.10 PM
Column options in Visual Composer plugin

The second stumbling point came in the form of the background color, and the subtle one-pixel borders on the top and bottom of the container. It was not possible to change the background color of the entire “columns” block (it was only possible to change the background color of individual columns within the block.) I was also unable to apply the 1px top and bottom border to the container.

The ability to add a row, and control its properties (Width, background color, margin, padding, borders) would be a great step towards solving this problem. An improved columns block nested in such a row would provide the functionality required to layout the “Funded by Longreads Members” block pictured above. Solving for the text formatting issues detailed above would complete the puzzle.

Looking ahead

Gutenberg probably represents the single largest change to the WordPress experience since it hit the internet in 2003. Getting Gutenberg to this point has been no small task, but clearly big challenges remain. More than anything I’m excited the Gutenberg team is challenging the status quo every day. The future looks bright!

By David Levin

Designerly things @ WooCommerce


You’re welcome! I’ll see if I can re-create the text layering for you.

Comments are closed.