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.


Comments

33 responses to “Using the WordPress Gutenberg editor”

  1. Snapped by Dinjii Fashion Blog Avatar

    I think I may try it for my new blog post today…

    1. Jim Grey Avatar

      Good luck!

  2. Moni Avatar

    Thank you for this! I just started using it and am getting used to it, and like it for the most part, but was frustrated by the Flickr embed thing. :)

    1. Jim Grey Avatar

      You’re welcome! This was the whole reason I made this post, to share this workaround as I know others will want it too.

  3. Heide Avatar
    Heide

    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.

    1. Jim Grey Avatar

      I’m just astonished by how discoverable all of the features have been so far. The dragging of paragraphs isn’t quite as good as good old cut and paste, but it’s not unbearable either.

  4. conspicari Avatar

    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.

    1. Jim Grey Avatar

      Photo captioning is different. I preferred the way my theme did it in the old editor but the way it does it in the new editor isn’t terrible.

  5. M.B. Henry Avatar

    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!

    1. Jim Grey Avatar

      Good luck with it when it does come your way!

  6. mostlymonochrome Avatar

    I’m still using the old editor.

    1. Jim Grey Avatar

      Is the new editor available to you? It’s being rolled out in stages.

  7. J P Avatar

    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.

    1. Jim Grey Avatar

      You’ll get to cling only so long, as WordPress will eventually rip the old editor right out of your hands. So sorry, my man.

      1. J P Avatar

        I know. You know that face little kids make when they do what their parents make them do but they’re still mad about it? That will be me.

  8. Marcus Kazmierczak Avatar

    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!

    1. Jim Grey Avatar

      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.

    2. Jim Grey Avatar

      Marcus, I stumbled upon what you must mean in your comment — pasting the Flickr embed into an empty block does insert the Flickr image perfectly!

      1. Marcus Kazmierczak Avatar

        👍 It works for any link that can be embedded, Twitter is another good example.

  9. Chris Cocca Avatar

    I’ve been using it a good bit. I agree, a pretty quick learning curve.

    1. Jim Grey Avatar

      Which is pretty amazing. The last new editor was so hard to learn.

  10. analogphotobug Avatar
    analogphotobug

    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.

    1. Jim Grey Avatar

      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.

  11. seatacphoto1951 Avatar

    I have been offered the opportunity to use it but I am not software savvy so I have postponed the inevitable. I wonder if I can change my mind if during my first post with it I get confused?

    1. Jim Grey Avatar

      Eventually the current editor will go away, I understand. Hopefully you can figure it out before then.

  12. JoHawkTheWriter Avatar

    I am putting it off until after the first of the year. My mind can’t handle one more thing at the moment. I hope the transition will be as easy as you have described. Thanks for the info.

    1. Jim Grey Avatar

      It’s a different editing paradigm. I hope everyone finds it as discoverable and learnable as me.

  13. Dan James Avatar

    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.

    1. Jim Grey Avatar

      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.

      1. Dan James Avatar

        So why do you use an embed workaround when you can just paste the Flickr URL in a block? Sounds even quicker than it is now?

        1. Jim Grey Avatar

          I don’t know, I’m just adapting my past habit to the present reality, much as it sounds like you want to do yourself.

  14. Reinhold Graf Avatar

    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 ;)

    1. Jim Grey Avatar

      It’s 95% ready for production use now. It may still not do everything you want/like but it’s at least substantially complete and working.

Leave a Comment

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

%d bloggers like this: