Gutenberg: When using the delete key to remove blocks, the caret is positioned incorrectly

Created on 14 Aug 2018  路  6Comments  路  Source: WordPress/gutenberg

Describe the bug
When using backspace to delete blocks, the preceding block is correctly selected after the removal takes place.

However, when using the delete key, the behaviour is the same and the preceding block is still selected. To be consistent with how the delete key works normally when deleting text, the start of the next block should instead be selected

To Reproduce
Steps to reproduce the behavior:

  1. Create a new post
  2. Add four paragraphs of text
  3. Select the middle two paragraphs
  4. Press the delete key (you may need to use fn+backspace on a laptop)
  5. Observe that the caret is placed in the first block

Expected behavior
The caret is positioned at the start of the last block

Additional context

  • Gutenberg 3.5
  • The code that handles the delete event is in the component EditorGlobalKeyboardShortcuts (this seems to be triggered for multi-selection) or BlockListBlock (when there's only a single block selected). Currently, they trigger the removeBlocks action, but the removeBlocks is not passed any data about the direction of the delete event. Delete and Backspace are both handled in the same way.
  • It would be beneficial to add test cases to the block-deletion e2e test when fixing this.
[Feature] Writing Flow [Type] Bug

Most helpful comment

@designsimply - yep, I think the same thing :)

It might be easier to say that if I delete the second block using the delete key (fn+delete on a macbook), the cursor should be at the start of the new second block.

It is really confusing that Apple calls the backspace key 'delete'. On the full keyboard there are two 'delete' keys and they both do different things:
https://www.apple.com/shop/product/MQ052LL/A/magic-keyboard-with-numeric-keypad-us-english-silver

All 6 comments

To be clear, is this primarily affecting multi-selection?

Yep - good to clarify. It seems to be both multi-selection and wrapper selection.

  • Multi selection is handled by EditorGlobalKeyboardShortcuts deleteSelectedBlocks.
  • Block wrapper selection seems to be handled by BlockListBlock deleteOrInsertAfterWrapper.

To be honest, it's very subtle, and so probably an extremely low priority issue.

Adding a note about backspace vs delete because it confused me at first. My expectation would normally be that Backspaceor Fn+Delete should remove content to the left of the caret and Delete should remove content to the right of the paragraph鈥攈owever, this is reversed on macOS! (heh)鈥攚here the delete key removes content to the left of the cursor and fn+delete or backspace removes content to the right. Here is another macOS explanation:

The delete key keeps the cursor position in the same place. Backspace moves the cursor as it deletes.

Source: https://ux.stackexchange.com/a/106115

Expected behavior
The caret is positioned at the start of the last block

When removing multiple blocks, I would expect the cursor to land either in the same place in an empty paragraph (this is how the classic editor currently works) or at the end of the prior block. Why would you expect the caret to be positioned at the start of the content previous block after deleting the block just after it 馃槅 or are we possibly saying the exact same thing in different ways? (2m6s)

[UPDATE: oh yep, we are saying the same thing and it's super super clear in #8961 馃槉]

Also see #9041.

@designsimply - yep, I think the same thing :)

It might be easier to say that if I delete the second block using the delete key (fn+delete on a macbook), the cursor should be at the start of the new second block.

It is really confusing that Apple calls the backspace key 'delete'. On the full keyboard there are two 'delete' keys and they both do different things:
https://www.apple.com/shop/product/MQ052LL/A/magic-keyboard-with-numeric-keypad-us-english-silver

Confirmed this is still an issue as of May 31, 2019.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

smp303 picture smp303  路  98Comments

mapk picture mapk  路  84Comments

ahmadawais picture ahmadawais  路  101Comments

mapk picture mapk  路  80Comments

melchoyce picture melchoyce  路  169Comments