How to add blocks is not obvious enough and only getting worse.

[carlhancock]

I'm submitting this issue because I think that issue #5074 doesn't quite go far enough in outlining just how poor the block insertion UI has become.

How to insert a block should be the single easiest thing for a user to understand when getting started with Gutenberg.

If we as developers and designers find this to be a confusing and poor experience... the end users are going to have absolutely no chance.

Issue Overview

A decision was made to remove the trailing insert blocks UI that appeared by default in Gutenberg at the bottom of any existing blocks. Adding blocks should be one of the single most obvious things to a user when using Gutenberg. It should not only be obvious but it should also be extremely simple. Right now with the latest changes it is neither.

Current Behavior

Let me tell you a little story about a user named Bob. He wants to create a page with a MailChimp subscription block so people can sign up for his mailing list. So he fires up Gutenberg.

He's a bit confused... because first of all he doesn't want to write a story. You see Bob is a business owner and he's using WordPress to power his business web site. But it say's write a story... and he thinks to himself even if he wanted to write a story where would he do it? But back to what Bob really wants to do. He wants to create a page with a subscription form for his mailing list. But right now he's a bit confused as to how exactly he would go about doing so.

He could click on the little plus icon up at the top... but it's so small disconnected from the location in the editor where he wants to place this magical block that he completely overlooks it.

He might get lucky and click on the "Write Your Story" placeholder text... even though he doesn't want to write a story... and then he might get lucky and see yet another plus icon with a few other icons that he doesn't really know why or what they do. So maybe he clicks on one. Or maybe he doesn't...

Instead he takes out his frustration and screams WHY IS THIS SO HARD?!

BUT let's assume Bob gets lucky. And he throws caution to the wind and clicks on that plus icon that previously appeared.... BAM! It looks like he's in business! Awesomeness. He clicks on the MailChimp block and adds it to his page.

Now Bob has a fancy new MailChimp block on his page... but you know what? He's decided he wants to add another block below it. But ummm.... it's not obvious how exactly he does that. He starts pulling his hair out. Which sucks because most of it was already pulled out trying to figure out how to insert the first block.

What is this? Bob accidentally moused over an area below the MailChimp block. What is this? It looks like a bug. But Bob is a risk taker so he's clicks on it anyway.

Awesome! We're back to the confusing place we were before....

Bob is not impressed. In fact he decides to use something other than WordPress because this user experience is just not good.

Expected Behavior

Inserting a block when you are in the Gutenberg editor should be one of the most obvious things there is on the screen. There should be absolutely no question as to how you add a block. Kind of like this...

Which is how Gutenberg used to work before the decision was made to ditch having a fixed block inserter UI that is always at the bottom of any existing blocks or the default block for new pages/posts.

Possible Solution

I can't stress this enough: Bring back the trailing block inserter. Not only bring it back... make it even more obvious.

Inserting blocks should be one of the central aspects of the Gutenberg design. There shouldn't be any question as to how to add a block. You shouldn't have to jump through hoops. You shouldn't have to make guesses.

[mathetos]

Inserting a block when you are in the Gutenberg editor should be one of the most obvious things there is on the screen.

I couldn't agree more. As more things have crept into the UI, the most important one has gotten more and more lost or subtle. While being able to just hit return to start a new block is fine, nothing about the UI currently instructs the user intuitively about that.

Well said @carlhancock Thanks for taking the time to put together a really constructive issue with detail.

[DevinWalker]

This is a great post and I agree with the Bob story. Some Bobs are more technical than other Bobs, but we should aim to please all Bobs regardless.

I put my 🤚 up as well for this issue to be addressed. Here's my take:

Treat Blocks Like First Class Citizens 🎩

Blocks are the main interaction point for all Gutenberg users. If it's going to shift from being an editor, to frontend page builder, blocks need to be easily accessible.

1. Drag-and-drop blocks from a "block bin" panel or similar in additional the quick modal
2. As a developer let me make my own block categories as not to clutter up the default ones (I believe this is coming).
3. Ensure my blocks look similar to the frontend backend

Perhaps think about a "Block button" that's more obvious to toggle a "Block" panel. If that sounds interesting I could throw together some concepts. Anyways, thanks for starting the conversation! 👏🏻

[boborchard]

As a Bob, I couldn't agree more. I'm just now coming back to WordPress after a two year hiatus and I would hate for us to miss an opportunity to put usability first and minimalism second and create the next generation experience WordPress needs to succeed.

I'm also willing to help make the experience better, if anyone wants additional help with it.

[ahmadawais]

I agree with that. In our meetup last month this was a concern raised by many 🙈🔥

[karmatosed]

Firstly, thanks for the well written post @carlhancock.

Thank you for telling this feedback as a user story, that's important and helps. Whilst I understand the 'story of Bob' as a collection of your well informed insights from users (please correct me if it's a real user), have you got direct user feedback? I would love to see if you have videos or insights direct from users. The same goes to you @ahmadawais as you say you had that feedback in the meetup. I would like for us to usability testing this exact flow, whether we do that with some iterations or not is something to consider. This doesn't dismiss 'Bob's story' but it gets us data and right now and beyond, data is what should fuel our changes here.

As far as fixes go I have a few things going around my head right now we could try. The first is to use on first load and show the block interactions. This could still be done with the same visual we have today. You would see this on load:

I actually think the iterations to the icon interface is an improvement and I would not like to revert that design, that's not saying the flow is the right one, just the changes to placing and form. It's worth noting there is an issue for icon order and '+' visibility as has been mentioned: https://github.com/WordPress/gutenberg/issues/5074.

Visual wise there was a long while ago some exploration into animating various UI's for attention, I'd like to explore that a little and see how on loads and also in various actions we can improve the attention grabbing of interactions. One experiment I did a little while ago into this was with a button that 'coughed' out of eye view. I think we could add for some users (those that see animations) a flourish like this:

https://codepen.io/karmatosed/pen/meeNoM

I also standby Tips being a solid option for us going forward: https://github.com/WordPress/gutenberg/issues/3670. This would provide us with a NUX and guiding beyond that experience. I don't see it as the only solution but I do see it as bolstering what we can iterate.

@DevinWalker this seems a different idea from the flow of adding. I have to say that I don't think a 'block bin' helps discoverability, it could easily just become yet another icon. I am also not sold that another panel gets us closer t this point, that's not saying we can't explore the idea, I would like to focus though on how the flow can get iterated and then access from there.

Just to note, I myself have some ideas for the block library that I will be putting into an issue this week, maybe we can focus iterations to that there. I'll loop back with an issue when that happens, thanks for thinking about this Devin.

@boborchard all help is gratefully accepted, are you able to help with any issues I've added here? What type of things would you like to help with?

[mtias]

Please, I suggest taking a step back and seeing the whole evolution of the UI in the project since the first few versions before jumping to general valorizations.

Stage 1: Focus on blocks as the main interaction

Gutenberg initially optimized for both block presentation and block insertion heavily. This was necessary as the block was the entity that would structure the whole experience. We knew this was at odds with what many people expect from a writing environment, but we bet on our ability to overcome the issues while highlighting the benefits of manipulating the content as blocks. Our blocks had clear outlines that were visible as soon as you hover them and showed the boundaries of each block very clearly.

During this stage the advantages were:

• Easy to identify blocks to interact with them from an editing perspective.
• Evident how to add new blocks at the end of a post.
• Evident how to add blocks in between other blocks.

While the disadvantages were:

• We had a very UI heavy editor.
• It weighted heavily in favor of using the mouse.
• How to continue writing at the end of a post was not without effort.
• Blocks felt like little cages.

Stage 2: De-emphasize the block and improve the writing experience

With the basis of a block editor that had proven the basic concept, we moved towards restoring the feeling of a simple to use editor while writing and using the keyboard. This saw a focus on micro-interactions, the addition of the / inserter on any empty block, lowering the visual weight of block boundaries, adding the ability to navigate across blocks with arrow keys, multi-selection interactions like the following, etc:

The improvements here showed we could have an editor that got out of the way when writing but was there for you when you needed to edit, manipulate, or add different kinds of blocks. Writing experience got a lot more fluid. We still got feedback that it wasn't trivial to just continue writing, though, and that things like the trailing inserter were getting in the way a bit — at least visually.

Stage 3: Find the right balance

This is where we are now. We know a lot more about the advantages and disadvantages of both extremes and we have to work from both sides to reach the right spot the project deserves. In this process, we might at times go a bit too far in one direction (the removal of the sibling inserter is meant to be temporary) and it's good to highlight from a personal perspective what feels unclear or hard to use. Great usability is very dear to us all, we just need to be cognizant that there are multiple coexisting needs, contexts, and experiences to balance. Ultimately, users don't care about blocks.

At the moment, we have various configurations that change based on the context, notably the isTyping mode. The main goal is that we can surface block insertion tools when you need them, but get them out of the way when you don't.

I liked the trailing inserter (if anything, I did the first implementation of it!) and also the sibling inserter (I proposed we implemented it). I was also aware both got in the way at times for people so we are iterating on them. The current "insertion area" with the quick shortcuts for blocks is a combination of the trailing inserter and the trailing writing area. For example, some items discussed but not implemented yet:

• Maybe always show the quick blocks on the last empty block at the bottom.
• Show the quick blocks on the last empty block at the bottom on hover.
• Don’t show the ellipsis menu on an empty paragraph block.
• Consider moving + to the left, replacing the "movers" on an empty paragraph block, to emphasize the +.
• Consider showing the + with recent blocks closer to how it was but hide it all when typing.

For the sibling inserter, ideas are:

• Show it as a simple line that when you click expands to be an empty text block with the inserter.
• Use a delayed hover interaction to expand the area between blocks showing the empty text space with the inserter.

Are there more ideas? (Drag and drop to insert is a good one, and already has work in progress if you'd like to help with it.) Please, share them, prototype them, and let's keep tweaking these details until we get them just right.

[DrewAPicture]

Stage 2: De-emphasize the block and improve the writing experience Stage 3: Find the right balance

Oof. I think the "de-emphasize the block" (emphasis mine) and "improve the writing experience" sort or translate to a lot of people as "we need a cleaner interface for writing" a la Distraction Free Writing (DFW), which I think ultimately proved to be a much lesser-used feature than originally intended.

I think an important question to consider is what happens later when Gutenberg decides to tackle building pages that very clearly emphasize composing a page with blocks vs writing? I agree with @carlhancock that we seemed to have traveled backward in terms of usability of adding blocks.

I worry that we're placing too much emphasis on one particular style of composition (writing) in lieu of a wider use case (page/site building).

I'm going to cherry pick some excepts now, so please forgive the inevitable loss of context ;)

Ultimately, users don't care about blocks.

Is there research somewhere that supports this assertion?

I recognize that this is the focus of Stage 3 in finding a balance, but there are very clearly users and testers in the community and in this very thread of the opinion that the current system of adding blocks is at odds with how it might be expected to work in general.

It can't be hard to add a block; It just can't. It currently is hard.

Maybe always show the quick blocks on the last empty block at the bottom.

Would this "quick blocks" include a + button?

Consider showing the + with recent blocks closer to how it was but hide it all when typing.

Please don't do this. See the failure of DFW as a mainstream editing experience as an example.

---

I didn't want to string out the reply longer to the point of muddling the points, but I may return later with more.

[carlhancock]

@DevinWalker I also agree that blocks should be treated as first class citizens. I also agree that a "block bin" style UI would likely solve a lot of these issues and make things more obvious to the user. There is a reason why so many applications in the CMS and web site builder space use this UI convention... because it works. But I fear one reason why this route will be avoided is so many competitors already use this UI convention and they are working around that to make Gutenberg unique.

@karmatosed Thank you for the detailed response. My feedback isn't meant to in anyway degrade or complain just for the sake of complaining. I truly want to see Gutenberg succeed. My business and my employees, like everyone who make a living in the WordPress ecosystem, need for Gutenberg to succeed. I think you understand that.

I would say anything like animations such as making the insert block icon shake briefly, etc. are niceties and look cool but ultimately shouldn't be looked at as a solution to the current issue.

The Tips example is also a great one and would be cool for NUX. I would say it would be a great addition to Gutenberg. But again, it is something that would be great to have but isn't an actual solution to the current issue.

Ultimately inserting a block should be extremely obvious from the get go without having to use whiz bang animations or fancy tooltips UI to accomplish this.

@mtias "Ultimately, users don't care about blocks." I don't think you could be anymore wrong than you are with this statement. WordPress is not about blogging anymore. It hasn't been just about blogging in years. It's used as a CMS. It's not just about "Write Your Story".

Ultimately, users will absolutely care about blocks. Blocks are going to be the primary way people interact with Gutenberg. Blocks are how people will accomplish what they want to do with WordPress. Everything they want to build in Gutenberg is going to be done with blocks. Every WordPress plugin developer is going to embrace and produce a myriad of blocks. Users are going to buy blocks on marketplaces like CodeCanyon. Bocks ARE Gutenberg.

I hope that the balance is found Stage 3 as you mentioned.

@DrewAPicture +1 to everything you said. How you add blocks to a page in Gutenberg should be the most important and easiest UI interaction there is. It's the entire purpose of the editor. I was taken back by just how poorly the block interaction became with the latest changes. Especially at this stage in development and how far along Gutenberg is. This has to improve in Stage 3.

[spencerfinnell]

In this process, we might at times go a bit too far in one direction

Definitely feels like we've gone to both extremes at this point.

After upgrading to 2.2 I was lost on how to insert a block (I've been testing since the start and follow Github development as closely as I can). It took me a solid 15-20 seconds to figure out how to do anything other than start with the default paragraph placeholder.

Clicking the (+) at the top of the page has no context to the current cursor position in the editor. And when you are writing a paragraph (which you're forced to do in a lot of instances -- but I know this is mentioned elsewhere as well) it's never clear how to insert anything other than another paragraph, and even that is a little bit of a guess.

I don't have a concrete suggestion on where the middle ground is, but just wanted to voice that I agree with the sentiments here. As someone who has been using and developing WordPress for many many many years, has been following and using Gutenberg since the start, and who has been recommending Gutenberg to new users and watching their reactions -- it is very confusing at this stage.

[ahmadawais]

@karmatosed We didn't collect any data so to speak. The meetup was about introducing Gutenberg and most of the attendees themselves started giving feedback after the meetup about stuff like this. — Made me realize I could have easily set up a Google Form for them. Maybe we'll try it on our next meetup. 🙌

[bph]

I find the discussion fascinating. Thank you! After building quite a few posts and adding hundreds of blocks on Gutenberg Times, I agree with Carl. Adding a block can't be guess work. After I upgraded to 2.2, I had a hard time figuring out how to add a block between other blocks. When using the top + for inserting a block it always landed at the bottom and not where I needed it and I had to move it up to where it belonged. When writing a longer piece, I would like to finish my writing and then go back and add additional assets. I have not yet figured out how to add a new block between to paragraph blocks. With the inserter available between blocks, I was much happier in my quest to assembling the pieces. I am pretty sure, even if I had not known how it is using the block inserter between the blocks, I probably would make it a feature request. Traveling the blog posts up and down when adding images, audio and tweets, at the right spots can be quite cumbersome.

[mellis32]

Although I like some of the layout and design changes that went into 2.2, I have also found it frustrating to add a new line, particularly challenging to add new line between existing blocks now.

It is impossible to add a new line after this image, unless I insert my cursor at the very beginning of the next block and hit enter:

I am not arguing for bringing back the trailing inserter as some are - I wish it worked more like a word processor, or like gmail. In Gmail a blinking cursor next to the image indicates that pressing enter will insert a new line:

Right now in gutenberg, with the image selected, hitting return has no effect.

[youknowriad]

Right now in gutenberg, with the image selected, hitting return has no effect.

@mellis32 In my testing, it creates a new paragraph after the image just like a word processor. If it doesn't then it's a bug.

-- I suspect a lot of people already familiar with Gutenberg found this release frustrating because it changed their habits. The in-between inserter and trailing inserter were handy.

But I also suspect that for people not yet familiar with Gutenberg at all, the new workflow is more natural to them than if they were introduced to Gutenberg in previous versions.

[carlhancock]

@youknowriad My opinion of what works and doesn't work well in Gutenberg has nothing to do with being familiar with previous versions of Gutenberg. It has nothing to do with having to change my habits. I have no habits to change because I haven't formed any habits related to Gutenberg.

Product development is what I do. I don't get attached to UI conventions or concepts because I fully understand that software evolves and changes. I embrace change when it comes to software.

The reason why I found this release frustrating is really very simple: it made the user experience worse than it already was.

Rather than making how to insert blocks more obvious and the focal point of the UI, the core team working on the project seems intent on downplaying the very concept of blocks in favor of composing text above everything else. I think that is a mistake. There needs to be a balance. And right now that balance is out of whack.

I hope that in Stage 3 that balance that @mtias mentions above is discovered. Because while it appears the opinion of the Gutenberg core development team is that "users ultimately don't care about blocks", nothing could be further from the truth.

In the same way that themes and plugins made WordPress what it is today, blocks are going to make or break Gutenberg and by extension WordPress and the entire WordPress ecosystem.

[carlhancock]

@youknowriad @mtias @karmatosed I think this issue can be closed for further comment. No point leaving it open for it to just become a place for arguing semantics. It doesn't do anyone any good.

I think it's clear to everyone involved that the current iteration needs work and the block interaction user experience as a whole needs to get better. Ultimately we all want Gutenberg to get better.

The process of actually making it better can take place in other issues and pull requests.

[ahmadawais]

🎯 Seriously folks, adding blocks has become very hard now. I personally don't like it as well.

👉 E.g. here're two blocks

1. Cover image
2. Gallery

I wanted to add a spacer block for space between them and I can't do that.

GIF ↓

This used to be quite simple.

[mtias]

@carlhancock sorry, seems I didn't explain myself clearly. Of course blocks are fundamental — that's the whole premise behind Gutenberg. Without getting into semantics, when I mentioned users don't care about what we call blocks it was more about how "blocky" they look. They care about inserting all the content blocks represent, which goes beyond text, and that has to be intuitive.

The feedback here has been very useful, specially knowing that people found the sibling inserter useful! (We hadn't heard much about that feature before, and we didn't showcase it much.) I think we should bring back the sibling inserter and tweak the behaviour.

I'll close the issue as it seems — semantics aside — that we are on the same page and that the things that have become harder are clear.

[bph]

Thank you @youknowriad & @jasmussen #5055 is a fabulous solution:-)