Gutenberg: Ctrl+Alt+Backspace on reusable block also deletes block above

Created on 16 Sep 2018  路  4Comments  路  Source: WordPress/gutenberg

Describe the bug
When using the remove block keyboard shortcut on a reusable block, the block above is also deleted. It doesn't happen when I select 'remove block' from the ellipsis, or when using the keyboard shortcut on other blocks.
It only happens with reusable blocks (not a specific one) and regardless of the type of block above it (including another reusable block).

To Reproduce
Steps to reproduce the behavior:

  1. Add any block
  2. Add a reusable block
  3. Press ctrl+alt+backspace
  4. Both the reusable block and the block above is deleted

Expected behavior
Only the reusable block should be removed

Screenshots
ezgif-1-6aca517b7e.gif

Console error
I'm seeing the following errors, though I don't know if it's related

Uncaught Error: only one instance of babel-polyfill is allowed
at Object. (commons-820.min.js?ver=8.2:1)
at Object. (commons-820.min.js?ver=8.2:1)
at e (commons-820.min.js?ver=8.2:1)
at Object. (commons-820.min.js?ver=8.2:6)
at e (commons-820.min.js?ver=8.2:1)
at commons-820.min.js?ver=8.2:1
at commons-820.min.js?ver=8.2:1
twp-templates.js?ver=1.1.5:101 Uncaught TypeError: Cannot read property 'replace' of undefined
at Object.t.refreshTitle (twp-templates.js?ver=1.1.5:101)
at refreshTemplateVars (twp-templates.js?ver=1.1.5:333)

Desktop (please complete the following information):

  • OS: Windows 10.0.17134
  • Chrome 68.0.3440.106
  • Gutenberg 3.8 (I don't remember if it happened with earlier versions too - I might not have noticed)
Accessibility (a11y) Needs Testing [Feature] Reusable Blocks [Type] Bug

All 4 comments

This not an easy issue to solve :)

  • Clicking "Backspace" when the wrapper of a block is selected, removes the block
  • Clicking "ctrl + alt + backspace" when the a block is selected (no matter where the focus is) removes the block

Which means if the wrapper of a block is selected (it happens in reusable blocks but also in other blocks like images...), and you hit "ctrl + alt + backspace", you trigger both callbacks removing two blocks.

What do you think would be the best fix here?

  • I wasn't able to "stopPropagation"
  • Maybe we can add a check on the first callback to ensure "ctrl + alt" are not pressed?

Thoughs @aduth @talldan

Hey @youknowriad

Maybe we can add a check on the first callback to ensure "ctrl + alt" are not pressed?

That's how I ended up solving the issue in RichText ...
https://github.com/WordPress/gutenberg/blob/master/packages/editor/src/components/rich-text/index.js#L419

But hopefully that won't be needed in BlockListBlock - because of https://github.com/WordPress/gutenberg/issues/9036, the shortcut will be changed to something other than backspace, so that seems like the best way to solve it. (This reminds me I need to work on that again).

I'll work on something now to get the ball rolling on that again.

Thanks for the report @annestk! As briefly mentioned above, it looks like this shortcut is triggering two actions to remove blocks, and so two blocks are removed.

There's already a plan to change the shortcut to something else as there's a separate issue with this shortcut for linux users (#9036). I've opened pull request #10008 to do that.

Was this page helpful?
0 / 5 - 0 ratings