Blogosphere

Using the WordPress Gutenberg editor

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.

Here’s a random image from my WordPress media library, easily inserted as a block.

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.

Empty image block

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!

At Coxhall Gardens
Embedded image from Flickr.

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.

Advertisements
Standard

34 thoughts on “Using the WordPress Gutenberg editor

  1. Heide says:

    Yours is the first positive review I’ve read, Jim. Some of the functionality you describe sounds fantastic — but dragging all those boxes around sounds rather tedious. Still, you at least give me hope that it’s not as horrible as I feared based on others’ initial experiences.

    Like

  2. I used it for my last post but didn’t like it, adding a title and description to photos didn’t look good and so I reverted back to the old editor. Probably me, I’ll give it another try soon.

    Like

  3. I’ve been hearing a lot about this from around the blogverse. I don’t think it’s been offered to me yet – nice to have this quick instructional guide for when it does come my way! :) Thanks for posting!

    Liked by 1 person

  4. I, on the other hand, will cling to what I have known with the ferocity of a man who still finds MS Word wholly inferior to Word Perfect. If only I could do blog posts on my old Underwood portable. Sigh.

    Like

  5. Glad to hear you’re enjoying it! Nice to see comments from photo blogs I follow talking about Gutenberg that I’ve worked on. Here’s a tip for the Flickr image, try just pasting the URL and it should auto create the embed.

    Cheers!

    Like

    • My hat is off to the entire Gutenberg team, this is a home run delivery.

      When I use the “Insert from URL” button in an image block, and then paste in the Flickr URL, I get a blank block. When I go to HTML view on an image block and paste in the Flickr URL, I get an image — but narrower than the column it sits in. I want images to fully span the column width. The workaround I described keeps whatever dimensions you chose at Flickr.

      Like

  6. analogphotobug says:

    I tried it for an day and told them that I couldn’t use it. I’m going to be travelling and blogging a lot in the next few months and I don’t have time to learn something new.

    I’m tired of being forced by Google and now Word Press to upgrade against my will. Great fr all of you, but I’m not joining the parade.

    Like

    • It is challenging and upsetting when companies make big changes to software you already know how to use. Most of us don’t want to learn new interfaces – we just want our stuff to keep working.

      Like

  7. Thanks for this Jim, I’ve had the editor invite come up for the last half a dozen posts I’ve written and have been ignoring it! Think I’ll try it soon.

    For embedding Flickr images currently I copy the url of the size image I want in Flickr (nearly always the 1024px version) then Add > Media > Add via url then just paste in the link I’ve copied and click Insert. Takes about 10 seconds. I’m hoping this is still available in some form in the new editor.

    Like

    • The image block works with the media library differently and Add>Media>Add via URL is gone. You can just click Insert from URL in the block and paste in the URL of the Flickr image at your desired size. The Flickr embed code doesn’t count as a URL. Hence my workaround.

      Like

  8. Tested it some months ago.

    It was quirky to use and it destroyed some of my posts created with the ‘normal’ editor, even it offers to switch between the two.

    I noticed that there were several updates in the meantime and maybe it’s worth giving it another try.

    Thanks for remembering me ;)

    Like

  9. Pingback: Embedding Flickr images in the WordPress Gutenberg editor | Down the Road

Share your comment

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.