Backspace doesn't (always) delete images

[koke]

Describe the bug

I can't delete images using the keyboard only when coming from below.

To Reproduce
Steps to reproduce the behavior:

1. Create a post with an image and add a bit of text after it
2. Place the cursor at the end of the text and backspace until the paragraph is empty
3. Backspace once to remove the paragraph
4. Backspace again from the image block

Expected behavior

I'd expect the last backspace (with the image selected) would remove the image.
Instead, the cursor is stuck on the caption and backspace does nothing.

Screenshots

Desktop (please complete the following information):

• OS: macOS
• Browser Safari
• Version 11.1.1

Additional context

• Tested in Gutenberg 3.0.1

[AtrumGeost]

Hi there,

I tested this with Gutenberg 4.0 and was able to reproduce the issue:

Tried the same with the classic editor and using backspace deleted both the text and the image.

WordPress 4.9.8 and Gutenberg 4.0.0 using Google Chrome Version 70.0.3538.67 (Official Build) (64-bit) on macOS 10.14 - Mac OS Mojave

[spencerfinnell]

Still an issue on 4.3.

[La-Geek]

Windows 10 64bit, Chrome browser, (all recent), WP (5.0-beta5-43907), Theme Twenty Nineteen, no Gutenberg installed:
Confirmed

[ellatrix]

Still an issue.

[adamziel]

Still an issue. It seems like a problem with the Image block - the caret is getting stuck in the Caption rich text and pressing backspace is only considered in context of removing letters from caption text (instead of removing the block).

[adamziel]

To ensure that the image will be deleted when backspace is pressed in an empty caption field, we'd need to handle onRemove or onMerge in the caption RichText here:

gutenberg/packages/block-library/src/image/edit.js

Line 693 in f8e4c9c

<RichText

A bigger question here is: should we do that? I imagine editing your caption only to remove the entire block with one extra backspace would be at least unexpected.

An alternative would be deleting the block when a backspace is pressed in the succeeding paragraph (instead of moving the cursor to the caption field). This feels a bit off too - maybe selecting the image block would be the right thing to do here? I'm not sure - let's discuss.

[mapk]

Hmmm... Backspace dropping the user into the Caption field is awkward. This appears to be inconsistent as well with other blocks. For example, when I Backspace from a Paragraph into a Quote block, it jumps into the Quote itself and not into the Cite portion of the quote. Sure, it's still odd, but my point is that the backspace doesn't drop me into the meta portion of the block.

It should work similarly to the Select mode when Backspace encounters a block that is not text.

1. Highlight the block on the first Backspace.
2. Delete the block when hitting Backspace again.

[paaljoachim]

Hitting backspace when a block contains letters should delete the letters. When there is no letters left then the block should be deleted. The meta field such as caption or cite should be skipped. So that means with the above example hitting backspace should not bring one into the caption or cite area, but go to directly selecting the block.

[paaljoachim]

I see that this issue is still valid in WordPress 5.7 beta 3 and Gutenberg plugin version 10.

Any thoughts on this one?
@tellthemachines @jasmussen @ellatrix

[youknowriad]

For me there's logic in "backspace moving to the caption" because it's just the "text" that is before the removed paragraph which means it behaves like any text editor.

that said, when the whole caption is emptied and you hit backspace, maybe we should remove the block?

[ellatrix]

that said, when the whole caption is emptied and you hit backspace, maybe we should remove the block?

That seems unexpected to me. Imagine the same with a quote or table. It doesn't feel right. Maybe backspace should select the block, and the block can be deleted with a subsequent backspace?

I also see that we're adding a button to add a caption for the block quote. Maybe that makes sense here too? In that case, backspace should only remove the caption. Cc @mtias.

[mtias]

@ellatrix agreed on backspace at most selecting the image block in that case.

[Trapsta]

I took a look at the RN android app and I can see backspace selects the image block, not sure where the UX diverged but from the discussion , it looks like that is the consensus @youknowriad I would love to work on this , should I work on a PR in that direction or do we need to discuss it further?

[paaljoachim]

Hey @Trapsta Jasper. If you'd like you can bring this up during tomorrows Core Editor chat (Open Floor) if you have not received any feedback by tomorrow evening and ask about it. https://make.wordpress.org/core/2022/02/28/editor-chat-agenda-march-2-2022/ (Add a comment to the agenda as it creates some additional attention.)

[youknowriad]

@Trapsta Indeed that seems like the consensus, please free to open a PR about it ❤️

[t-hamano]

The current Image block does not display the empty placeholder itself if there is no caption text. Then, when you press backspace in the next block of the Image block, it will work as follows:

• When the image has a caption: the cursor moves to the end of the caption text.
• When the image does not have a caption: Select the Image block

I feel like this is expected behavior, what do you think?

4ea01b9e6f83901a63c51821e3ea60ac.mp4

[jasmussen]

I feel like this is expected behavior, what do you think?

Agreed.

[t-hamano]

I would like to close this issue, but please reopen if you believe that the current backspace key behavior inthe Iimage Block is not what you intended.