Gutenberg: Suggestion: make it easier to delete blocks

[andfinally]

Is your feature request related to a problem? Please describe.

When I'm composing a post I very often want to delete blocks, and the Gutenberg UI makes it quite a mission. I have to:

• Click in the block to get the contextual menu.
• Find the right edge of the contextual menu with my mouse (which may not be the same distance from the margin every time, depending on the block type).
• Click the ellipsis icon to open the block settings menu.
• Move my mouse down to the bottom of the menu and click "Remove Block".

An immediately accessible delete button is an extremely common pattern - it seems counter-intuitive not to include one.

Describe the solution you'd like

I'd like to suggest a delete button in the top right corner of the block, which appears whenever the context menu is visible and deletes the block. That's a very common position for buttons that do this kind of removing action (the close button in Windows is a familiar example).

Aligning it on the right, and not at some position in the middle of the block width that varies according to block type, would make it much easier to find, and so make it simple to delete several blocks in quick succession.

Describe alternatives you've considered

I've just discovered there's a keyboard shortcut to delete a block, but a mouse is the most favoured input method for novices like me. It shouldn't take me three clicks to delete one.

[mtias]

An immediately accessible delete button is an extremely common pattern - it seems counter-intuitive not to include one.

We used to have one.

[simison]

This.

My personal hack is to click on “drag handle" to select the block and press backspace.

If I need to remove multiple blocks next to each other, I choose them with shift and press backspace.

[gsallman]

That's really cool. It ought to be in the documentation.

[karmatosed]

We used to have one.

On watching hunting to work out how to delete, should we bring it back? I've seen this in quite a few usability videos also. As an additional point, once people find the delete options they are comfortable with them.

[gsallman]

1. For me, the delete key combination is impossible to remember (and bears no relationship to any software I'm familiar with).
2. You cannot delete a block unless it has content (okay maybe with the delete key combination I cannot remember) The menu doesn't show unless there is content, so if you accidentally create a block you have to type some text before you can delete it.
3. I've obviously forgotten the highlight block and backspace method, which would indicate it is not intuitive (I use WordPress and Gutenberg daily).

None of the above are optimal user experience scenarios.

[mapk]

You cannot delete a block unless it has content

While still not completely intuitive, you can delete an empty block by hitting or .

Moving the delete option into the popover forces it to be an intentional action. If we were to move it back out, another option that ties in with how the movers are styled might look like this:

[skorasaurus]

2. You cannot delete a block unless it has content (okay maybe with the delete key combination I cannot remember) The menu doesn't show unless there is content, so if you accidentally create a block you have to type some text before you can delete it.

None of the above are optimal user experience scenarios.

+1'ing on the ability for the toolbar to appear when selecting an empty paragraph block; this issue arose with multiple trainees at my workplace who were unsure of how to delete the empty paragraph block.
I worked around this for them by instructing them to first insert any character into the paragraph block (and the keyboard shortcuts).

It is noteworthy that this behavior isn't consistent with other blocks:
An empty paragraph block's toolbar does not appear (so the user is unable to delete the empty block) but for other blocks (heading, quote, list, button for example), the editing toolbar for that block immediately appears when the block's content is empty.

(This behavior is as of Gutenberg 7.2.0; written as a CPL employee).

[MichaelArestad]

Let's try adding a delete button in a more immediate location. Perhaps something that could be incorporated into the block toolbar since it has been getting some nice design iteration. @pablohoneyhoney or @jasmussen, did either of you explore this when you were iterating on the block toolbar?

[pablohoneyhoney]

Good call!

We haven't yet. We could consider this in the context of the movers as well and treat them as global actions for the block. I'm afraid adding an isolated _remove button_ would clutter again the UI around your content, though we can collectively come out with some good alternatives.

Worth to note that currently there are four ways of removing a block:

• Select Block type + Delete
• Escape to select + Delete
• Ellipsis, Remove
• Shortcut ^⌥Z

[MichaelArestad]

We could consider this in the context of the movers as well and treat them as global actions for the block.

I was thinking that as well. My only hangup would be if it was too close to the movers, it would be possible for me to accidentally delete a block when trying to move it.

[jasmussen]

It's been a while since this ticket was opened, and it has helped inform lots of development since then. Better focus/highlighting of which block has focus (so you know you can press delete to remove it), more compatible shortcuts, cleaner menus, new tools.

All of this has resulted in there being numerous ways to remove blocks now. Pablo outlines them, and I'll add GIFs to demonstrate.

There's the menu, and shortcut:

There's the select tool where any selected block can be deleted by just pressing Delete:

And there's my personal favorite which has you flowing in and out of the edit and select modes with Escape to select and Enter to return. Basically, as you type and decide, this paragraph is not to be, press Escape to select it, Delete to remove it, Enter to start editing again:

Because of these, I'm going to close this ticket as addressed! It will stay in the archive so the discussion can be found, and if need be, we can always revisit. Thanks!