Gutenwhat?

As many of you in the open source community will know, WordPress is moving towards a block-based post and page editing format in the nearish future.

Dubbed Gutenberg (yes, after he of the first printing press fame), this blockular (not a real word) editing approach is a pretty radical departure from the way things are currently over in WP Admin. It’s exciting – an engaging modular way to publish content, be it text or rich media.

[Gutenberg] will create a new page- and post-building experience that makes writing rich posts effortless, and has “blocks” to make it easy what today might take shortcodes, custom HTML, or “mystery meat” embed discovery.
– Matt Mullenweg

So now what?

Here at Automattic, we were challenged by our head of design, John Maeda, to test out aspects of the Gutenberg experience ahead of its official launch. Currently, it’s still in a beta feature plugin incarnation on the .org repo, but will one day be a part of WordPress core.

The challenge itself seemed fairly simple: choose an article from Longreads and then replicate it on a sandbox site as closely as possible, using the new Gutenberg editing experience. Right? Right.

The post I picked was written by Valentina Valentini, titled A Clarifying Dose of Reality (TV). Below is a screencast of my efforts (minus roughly 3-4 minutes where I erroneously managed to record my laptop screen instead of my external display. Amateur hour!)

How’d it go, then?

I found the blockular (again, nowhere near a real word) approach quite pleasing for the most part. However, I did hit a snag after adding my header image and trying to align its caption.

Try as I might, I could not get it to shunt left. Turns out that centring an image block and centring text was a little tougher for me to wrap my brain around.

The “Edit block as HTML” option gave me the ability to do so by shoehorning in some dirty inline CSS (please don’t hurt me); the preview in WP Admin, however, didn’t look great despite it appearing A-OK on my actual website itself.

I liked that an option to add a new block would appear right after I’d added a new content block, until it started to become intermittent. At times it would be there, below my last-inserted paragraph, hungry for more content. Maddeningly, it would often disappear after I added a pull quote or the text dividers from Longreads itself, and I wouldn’t be able to scroll downwards. Bah humbug.

I figured out that I could add a new block by hitting return with my cursor placed inside the last block of content I’d added.

My article had a fair few pull quotes in it, and I appreciated the two styles included in the relevant block for this. It would have been nice if Gutenberg could have remembered that I preferred style 2 for each new pull quote, instead of reverting to style 1 each time I added one.

In my naïveté, I wasn’t sure if I controlled some of the formatting of the content (link colour, font size, etc.) of if it was still governed by the active theme. This confusion was aided by being able to customize button colours using the Gutenberg sidebar – so I can customize that colour but not this?

A callout section with horizontal rules posed another challenge: how could I increase the width of said horizontal rule? I wasn’t able to figure this out, and moved on.

Re-ordering blocks was pretty straightforward, but could get a tad tiresome on a page with a lot of different blocks.

In conclusion

I think Gutes (my nickname for it) has huge potential, but still has its kinks to be ironed out.

I’m excited to see what the team do before it’s launch as part of WordPress core, especially when it comes to creating eCommerce products. Have you tried it out yet?