My Gutenberg Challenge Results

For my Gutenberg empathy challenge, I sought to re-create the Longreads article: “From Ghost Town to Havana: Two Teams, Two Countries, One Game” by Rick Paulas. Here’s the screen recording of my attempt:

The very first thing I did was copy over a subtitle, but then experienced a fair amount of confusion when clicking the whitespace outside the block didn’t de-select the block. I still don’t quite understand why text has a background color when its block is selected, regardless of whether the text itself is selected or not.

I wanted to center the text alignment on my subheading, but was disappointed that subtitles don’t get the same alignment options that paragraph text does.

Dragging in an image was easy, but then trying to make it larger stumped me for a solid 8 minutes. In the video you can watch as I click around in confusion, looking for bigger size options. I tried dragging the corners of the image to make it larger, but it just makes it smaller and does some weird stuff with text selection on the page. It feels like there are options in lots of different places and I’m not sure where I should be looking.

I tried making a cover image instead because that sounded like what I wanted, but that just gave me the same sized image with a dimmed background and the option to write text over it.

I tried opening the Gutenberg demo, but still couldn’t figure out why some images were larger; I could make them smaller, but couldn’t figure out how to return them to their original large size.

At this point I thought it might be a theme limitation, so I tried switching to Twenty Seventeen, which didn’t make a difference. I got tired and resorted to searching Google for the answer — shoutout to @tiagonoronha for his post where I found the Gutenberg theme. I managed to download the zip from GitHub, and after activating the theme, I found the size options I was looking for.

Next I tried to re-create the “this story was funded by Longreads Members” block. Trying to align two lines of text next to a small image turned into a nightmare that lasted almost 10 minutes before I gave up and moved on to the text of the article. Aligning the image with the lines of text was difficult, there was no vertical alignment option, and the preview looked nothing like what I saw in the editor (I figure this is just byproduct of it still being in development).

Once I moved past that, the rest of the article was a breeze! Changing image alignments, formatting text, adding captions, all of it was straightforward and fun to do.

There was one odd result; the text that I pasted in included some text in brackets [like this], one of those sets of brackets was turned into a shortcode; which had to manually be removed and the text put back into place. I’m not sure what the shortcode functionality is intended to do but it seemed to be too aggressive in this case.

The second specialized part of the article, the email newsletter signup, was a lot easier to re-create. Two dividers, some centered text, and the button block, which I love. Even updating the font style and colors of the button was super easy. Kudos to the team for this kind of interaction; it’s something I was just saying we should make easier during my Hogwarts empathy challenge yesterday. The only trouble I ran into was that the button block was created at the very end of the article, instead of where I was editing, so I had to do a lot of repositioning to get it the right place.

One minor issue was that I found that fairly frequently, I’d click outside a block to try to de-select it, and end up creating a new empty block right above or below it. This felt like it was slowing me down.

In about 30 minutes I’d gotten most everything done, which wasn’t too bad since that included the time I spent fighting with themes. I decided to go back and try again with the Longreads Member block. This time I didn’t even try to left-align the image, I just added some dividers, center-aligned everything, and called it a day. After an ill-advised attempt at hand-editing the CSS of a subtitle block to center it, I called it done at 36 minutes.

While this was somewhat frustrating in places and I’ve been radically candid with how I felt about what went wrong, know that I am hugely impressed by the work the Gutenberg team has done here; I know most of the trouble I experienced is temporary or related to my expectations as a particularly technical user.

On Designomattic, @joen asked us the following:

If you could change only three things, what would those be, and why?

Based on my experience today, it would be:

1. Making it easier to deselect a block — clicking anywhere outside a block seems like it should deselect it, but I often ended up accidentally creating a new block where I clicked, or the block just didn’t deselect.
2. Work on dragging things within Gutenberg without accidentally triggering the browser’s text selection mode (you can see this in my video when parts of the page turn light blue as I try to drag a corner handle to resize images). I understand that this may be browser-specific.
3. Make image size limitations clearer  if a theme doesn’t support some sizes. I’d rather see those options disabled with a note that explains why, than simply not be able to find those options. I know a balance has to be struck between keeping things simple and educating new users, though.

All in all it’s great to see how far Gutenberg has come since the last time I used it, and I’m excited about how much easier it will make it to create these kinds of long, visually engaging articles without having to know how to design or code.