Gutenberg: How can I disable backspace key from deleting an empty paragraph block?

After trial and error, I’ve figured out a way. It may not be perfect but it works for every circumstance I’ve tried.

We need to use the wp.data.select function, and select the ‘core/block-editor’, and finally use the getSelectionStart() function. That will tell us if the current block has selectable text, and if so, where our selection starts. If there is no selection, or the selection starts at zero, I want to prevent Backspace from doing anything.

The Code

document.body.addEventListener('keydown', function(event){

    if ( ( event.key == 'Backspace' ) ) {

        let selectionStart = wp.data.select('core/block-editor').getSelectionStart();

        // selectionStart will return an empty object {} if there is no block selected that has editable text. If will have the key 'offset' if there is. So we check for offset, and whether it's value is 0.

        if ( ( ! ( 'offset' in selectionStart ) ) || ( selectionStart.offset === 0 ) ) {

            event.preventDefault();

        }

    }

});

Edit: Another Option

After further playing around with this, I decided I wanted to allow backspace to remove blocks if the blocks were NOT the first child of a parent block. That means if I have three paragraphs in a row, I want to be able to hold backspace and remove paragraph three, then two, but stop with parapgraph one. Here is a version that does that.

document.body.addEventListener('keydown', function(event){

    if ( ( event.key == 'Backspace' ) ) {

        let selectionStart = select('core/block-editor').getSelectionStart();

        let notInEditableBlock = ! ( 'offset' in selectionStart );

        let cursorIsAtBeginningOfEditableBlock = notInEditableBlock ? false : selectionStart.offset === 0;

        let currentBlockIsFirstChild = select('core/block-editor').getPreviousBlockClientId() === null;

        if ( ( notInEditableBlock ) || ( cursorIsAtBeginningOfEditableBlock && currentBlockIsFirstChild ) ) {

            event.preventDefault();

        }

    }

});

Leave a Comment