WordPress has been working for a long time on a new post editor, which they’ve named Gutenberg. The folks at WordPress.com are slowly rolling it out to users, allowing them to opt in to test it. As soon as it was available to me I took the plunge, and have written several posts with it now.
I remember the last time they rolled out an all-new editor — it broke all of my workflows and frustrated me for weeks until I learned it.
Gutenberg didn’t. That’s not to say it’s like any past WordPress editor; it’s not. It doesn’t offer Microsoft Word-style editing like every other editor in the universe. Each paragraph, photo, everything is its own element known as a block.
I thought this would be the most overthought editor design ever. But then I started typing my first post, and the majority of things I wanted to do fell right to hand or were quickly discoverable.
I make software for a living. Let me tell you — the quick learnability they have delivered is no mean feat. Within a couple posts I didn’t want to use the old editors anymore. I even converted my in-progress posts to Gutenberg.
To add any kind of content, you press Enter to create a new block. If you want a text element, just type. If you want any other kind of element — image, YouTube embed, pull quote, anything — hover over the block with your mouse, click the plus-in-a-circle icon that appears, and choose the kind of content you want from the list that opens. The block will then give you every clue you need to create, link to, or embed that content.
Moving blocks around isn’t a cut-and-paste operation, as it is in every other editor. You hover over the block with your mouse and some controls appear that let you drag and drop the block, or move it up or down in the document.
There are a few quirks yet that I hope they iron out.
First and foremost for me: you can’t directly embed Flickr images. You’d think you could use “Insert from URL,” but it doesn’t work for Flickr (yet?). Fortunately, there’s a workaround: create an image block and hover over it. A toolbar pops up. Click the icon that looks like three dots stacked vertically. From the menu that appears, choose Edit as HTML. You’ll see some block code in there; triple click to select it all. Then paste in the image’s HTML embed code from Flickr. Then click away from the block. You will get a message about it not being in block format. Click Resolve, and then scroll down and click Convert to Block.
A helpful commenter explained that you can insert a Flickr image simply by pasting its embed code into an empty block. Bam! Easiest Flickr embedding ever in WordPress!
This is far easier than it was in the old editors, which had limited Flickr embed functionality. I always switched to HTML view and pasted the embed code there, which was more a pain than the workaround method in Gutenberg. But still, here’s hoping that WordPress streamlines this even more.
Another quirk is that while typing, if you delete the first letter of a word it also deletes the space before it. I have to assume this is a bug.
On my theme, at least, paragraph spacing is different (it’s most noticeable before and after images, as the image isn’t evenly spaced with the surrounding paragraphs). And image captions are centered, where the old editor left-aligns them.
There also isn’t a way to set the text Publicize uses when it sends your post to your social media accounts. I’ve been going back and doing that in the old editor; it seems to hold the formatting okay. Gutenberg creates code that is very different from the old editor’s so that wasn’t a given.
Again, I’m shocked by how easily and quickly I’m taking to Gutenberg. I look forward to WordPress improving on these quirks and adding missing functionality.