My Gutenberg Experience: Part Three

It’s been about four months since the last time I shared my experience with Gutenberg. In that time, there have been sixteen releases. The more I use Gutenberg, the more nuances I encounter.

Disruptive Writing Flow

When writing a post, I press the enter key at the end of a paragraph. This creates a new paragraph block automatically. Sometimes however, I want the next block to be an Image block. The paragraph block does not have an option to be converted into another block.

No Option to Convert to Another Block

I end up having to remove the paragraph block, look for the add block icon, and add the image block. This process of rearranging blocks disrupts the flow of writing.

There are a few ways to get around this issue. The first is to not press enter at the end of a paragraph so I can add the block that I want.

The second is to type /image inside the paragraph block which will automatically convert it to an image block. This is convenient but it’s a power user shortcut that’s difficult to discover without someone telling you about it. It’s weird that using a shortcut can convert a paragraph block to an image block but the user interface option to convert it doesn’t exist.

Icons Not Associated With a Block Floating in Empty Space

In the image below is a CloudUp embed block that has a video and below it are three icons. I sometimes think these icons are related to the block above it but instead, these icons are part of the add block placeholder UI.

Block Icons Look Like They’re For Another Block

Granted, a list, image, and quote icon has nothing to do with embedding videos. At-a-glance, seeing these icons can lead to a bit of confusion. I don’t want to see those icons floating in empty space when I’m working on a block they’re not attached too.

Losing Content Due to Autosave Disconnecting

While writing a post working remotely, I noticed the Autosave button in Gutenberg was continuously flashing. I’ve experienced something similar in the classic editor and suspected that a connection issue must have happened although I was browsing the internet without a problem.

I finished writing the post, added meta data, and a featured image. I copied all of the content on the post, refreshed the page, and confirmed I wanted to leave the page. It turns out, my suspicion was right.

At some point, the autosave process stopped working and I lost half the post, including the meta data. I was able to paste the lost content into the editor and go about my day.

The current editor has fail-safes in place to prevent the loss of content, such as using a browser’s local storage. I’m unsure if Gutenberg has the same fail-safes in place. So far, this has been the only time where I’ve lost content in Gutenberg due to autosave not working correctly.

Digging Through the Junk Drawer

In the classic editor, the tool bar stays in constant view. In Gutenberg, there are multiple areas on the screen where UI elements appear and disappear depending on where the cursor is.

If you want to see the code version of the editor, you need to click the ellipsis on the top right corner and select it from a drop-down menu. To add a new block, you have to click the + symbol and either search or select from a menu.

The combination of visiting different parts of the editor, browsing through menus, and selecting from multiple things sometimes feels like I’m going through the junk drawer in the kitchen looking for a utensil. This feeling occurs multiple times depending on the length of a post.

There’s Still a Ways to Go

I’ve been able to get used to the block concept and actually prefer it over the classic editor. However, there are certain tasks that are easier and faster to accomplish in the classic editor versus Gutenberg.

For example, if you want to create a heading using existing text in Gutenberg, you have to select the text, click the Paragraph icon, select the heading block, and choose which heading you want. In the Classic editor, you select the text, click the preferred heading from an always visible drop-down menu and continue writing.

These nuances to the writing flow, the user interface, and the experience of looking around for things is where I believe Gutenberg needs the most improvement. The bar has been set by the Classic editor but it has more than 10 years of iteration behind it. Hopefully, Gutenberg can reach or exceed that bar before it’s merged into core.

37 Comments


  1. I would agree with your comments. Today I turned Gutenberg off in order to add a form.

    I installed Gutenberg more than a month ago and it to be pretty good. I even created repeatable blocks and even reused them. I’m a jump-in, early adopter because I figure if the tech is good enough to release I’m going to try it. I figure it’s easier to learn new things as it’s rolled out.

    I have, oh, 15-30 posts created with guttenberg that I will have to fix if turning off guttenberg broke them.

    I’m no developer and have called for help only a few times in almost ten years of simple blogging but the user friendly echo-space adds a feel to WordPress you can’t get elsewhere.

    So, I’m a wptavern and blog follower but have never commented.

    It seems the Gutenberg ui has to be easier when it goes core.

    Don

    Report


    1. Just FYI, typing a / as the first character of a new block will allow you to convert it to ANY block, not just an image. Type “/twi” and hit enter and you’ll have yourself a twitter embed block.

      Report


    2. I’ve been testing Gutenberg for the past several months and I didn’t know about it either. It certainly speeds up the block creation process but my favorite part is the automatic conversion to another block.

      Report


      1. You can also click the + icon to the left of a hovered empty paragraph block to open the block ui and convert it to any block. It’s just not in the right side more options menu.

        Demo: http://www.giphy.com/gifs/mIQHnBGelLRxvNUwUd

        I do think the / command could be easier revealed. If you have a blank paragraph block that isn’t actively focused it does have placeholder text of “Add text or type / to add content”. But the problem is when hitting enter after a paragraph that doesn’t show because the block is focused.

        Report


      2. Actually, in the most recent version of Gutenberg, the convert block option is now the left most icon on the toolbar. It’s no longer on the right side for any block.

        Report


  2. This is the best

    > sometimes feels like I’m going through the junk drawer in the kitchen looking for a utensil.

    Report


    1. I’m glad you got a kick out of that statement although it’s unfortunate that it’s true.

      Report


  3. The more I see Gutenberg develop the more I think it could stand to learn a tremendous amount from Notion.so. If that was close to the editing experience of WordPress, I certainly wouldn’t mind!

    Report


    1. I’m not familiar with Notion.so but I’ll take your word for it. There’s a bunch of third-party editor apps out there but I usually stick with the WP-Admin. Though the Calypso desktop app for WordPress is pretty darn nice. Super fast too.

      Report


  4. it’s a power user shortcut that’s difficult to discover without someone telling you about it

    Getting things done is not always straightforward and Gutenberg is not yet intuitive enough.

    Report


    1. The funny thing is that most of these nuances has been reported since a long time ago and discarded by the core team even with all the constructive critic attached to the ticket. Most of the time some Automattican enters the ticket and just kills the discussion. I’ve read a lot of tickets at github where this is the case. One example is the discussion over the need to double click to actually publish a post.

      Matt and Automattic (wp.com) already know what they want and will force it on everyone regardless.

      Report


      1. This is quite frustrating to be honest. Devs constantly say that they want user feedback but when people provide it they ignore it. It’s either “we already discussed this before so we are not going to change it now”, “we are not seeing the use case here”, “we like it this way” or a variation of them.

        Report


      2. I totally forgot about the double click to publish; very annoying as hell. When testing Gutenberg (again), I went to create a new post and went to publish it only to discover it wasn’t published until you clicked a button again.

        @Bastian Many agree with this and it continues to be a very common consensus that the team really does not want feedback, even when feedback is constructive.

        I did a comment on this article https://wptavern.com/gutenberg-3-5-0-released and then later went to github to offer the suggestion and basically the lead dev replied, but in some ways it was basically thanks for dropping by, Ticket Closed.

        Report


      3. I have a plugin installed that displays a prompt that confirms if I want to publish a post or page. I’ve been burned in the past by it being one click. Since I have a plugin that does that, I suppose double-clicking the publish button is a hindrance.

        Report


  5. I was really excited about Gutenberg when I first started seeing news about its development. But since having tried it twice now, I like it less and less. It definitely has a lot of room for improvement before it becomes the new norm. I’m glad I’m not alone in that boat.

    Report


  6. Hi, Jeff

    Great job outlining this stuff. I think posts like this help make Gutenberg better.

    My experience with Gutenberg is actually pretty good. I’ve been using it for a while, and I think it’s OK so far. In some aspects it’s better then classic editor, and in some it’s annoying. I’ve actually write a pretty big post as introduction to Gutenberg .

    I actually think Gutenberg will be good for WordPress, once it becomes mature and stable. People complain about it a lot, but they forget it’s still pretty much work in progress. I mean, classic editor has been in development for years, and it has become quite stable. I expect the same to happen with Gutenberg.

    I’ll make sure to share this post. Keep up the good work!

    Report


  7. Gutenberg still does not work in WPMU..

    not good :(

    Report


    1. Are you sure about that? I created a new test site that was a WordPress Multi-site install, network installed and activated the Gutenberg plugin and it worked fine.

      Report


      1. I keep testing every version, and I keep getting blank screen when I try to create or edit posts/pages. :(

        maybe mine is an isolated site issue, which I guess, makes it worse to resolve

        Report


      2. Try visiting https://trywp.site/ and create a free WordPress Multi-site install for free. Once the install is complete. Network install and activate Gutenberg and see if it works. That’s the site I used.

        Report


      3. For what it’s worth I can confirm it works as well in Multisite as it does on a single site.

        We were using it in production for a week or so on a single subsite until issues with adjusting images and paragraph blocks together.

        Up until that point the workflow seemed pretty good.

        Report


  8. And I can only imagine the problems and headaches I’ll encounter trying to teach/re-teach my clients how to edit their websites. I am loathing the future.

    Report


    1. This is a big blind spot for Gutenberg.

      It’s a feature being forced upon small business owners who have no reason for wanting to switch.

      “Everything works great, so why change?” they ask.

      I’ve detailed my experience talking to
      my WordPress customers about Gutenberg
      .

      And fwiw, I was an early adopter of Gutenberg and think it’s a good thing big picture for the WP project… Just bad for small business owners.

      Report


  9. Gutenberg does a lot of things right, but these UX gotchas are killer.

    I almost lost an entire post last week because of the autosave disconnect. (Thankfully I copied/pasted the content of my post into a local .txt file.)

    Block quotes, especially dealing with citations, are problematic as well. I’ve removed citations from quotes only to find them still appearing on the front-end of the site.

    Then, when I look at the source in the HTML Source view, I’ll see the tag is still there, with like one character of the original cited source lingering there even though it’s not visible in the Visual editor view.

    They’re not deal breakers, but they’re annoying enough to throw you out of the writing flow.

    I’m getting into the habit of just writing my work elsewhere — Ulysses, Evernote, Word, whatever — and then using WordPress to stage and publish the content after it’s written and edited.

    That’s a bit much to ask of the average user, though.

    Report


    1. Well then, I’m not the only one who ALMOST lost content due to AutoSave. I mentioned this issue to someone and they said that Gutenberg does not use the browser’s LocalStorage when a disconnect happens while the classic editor does. I tried to confirm this by looking through Issues and Trac tickets but I didn’t come up with anything.

      Report


    1. I spotted that as well. Says a lot. They should just remove the star ratings then and change the name from Reviews to Positive feedback only.

      Appollogies, Rod I stabbed the report button by mistake on my tiny screen. Didn’t mean to do that.

      Report


      1. @Jeff did you see the moderator’s tagline?
        “Brute Squad and Volunteer Moderator”

        The Princess Bride reference alone earns extra internet points from me.

        Report


  10. Gutenberg and the editors in same category (Medium, DropBox Paper, Notion) are very pleasant for writing experience granted you’re willing to learn a few keyboard shortcuts.

    The slash command is awesome. And block transformation keyboard shortcuts would be awesome too (go from list to heading to a blockquote with one shortcut).

    Report


  11. I see no reason to install or use Gutenberg. I just want to type my content, add pictures, and publish. I don’t want to mess with blocks, or any such stuff.

    All I have read about Gutenberg is that it will get in the way of what a write wants to do. I have not seen any reason or justification that will indicate that Gutenberg is such a wonderful, second-coming thing.

    Report


  12. Let’s not forget, that with the keyboard shortcuts of the current editor, we can convert a line into a header simply by prepending ## (h2), ### (h3), etc …

    With the current editor, this shortcut does not exist, and some of the shortcuts of Gutenberg that have been devised are almost the same as playing Twister … fingers are missing in the hands to press so many keys at once … awesome!

    Report


    1. ## and ### converts lines to headings in Gutenberg as well.

      Gutenberg actually has pretty good support for writing in markdown. Like * or 1. to start lists. And — to add a separator. Also > to create a blockquote.

      And my personal favorite “` + enter to add a code block.

      Report


  13. Just seen two 1 star reviews removed this morning (22nd August 2018). One was a bit critical of page builders but did make valid points. The other was eminently sensible and went into thorough detail where it was problematic.

    Report

Comments are closed.