Detect if a block has been deleted

Question

I’m currently working on a slider block for the block editor. While I use custom buttons to add a slide (which is a block), I can detect when a new block has been added to tell the slider script to refresh in order to take note of the newly created block (which acts as slide).

However, if I want to use the regular "delete block" action from the block's toolbar menu, I cannot find out how to detect that.

I was already digging into the code and came to the conclusion that I had to detect when the action gets dispatched. However, I'm quite new to React and thus don't know how to detect the removeBlock dispatch action.

I thought about subscribing to the store's change but I cannot figure out which store to subscribe on:

const unsubscribe = subscribe( () => {
    console.log( store.getState().lastAction ); // which store?
} );

Is this the correct way or is there something easier?

Answer 1

Maybe you will find this snippet helpful. I'm still searching for a better way to do this but as far as I can tell blocks are not aware of their own deletion. Instead we have to monitor the blocks from above. If you have a parent block type that has children, you can subscribe to core/block-editor and use getBlocks() to check the length of children and if the new length is lower than the old length then you have caught a deletion.

const getBlockList = () => wp.data.select( 'core/block-editor' ).getBlocks();
  
let blockList = getBlockList();

wp.data.subscribe( () => {

  const newBlockList = getBlockList();

  if ( newBlockList.length < blockList.length ) {
    console.log( 'A block was removed!!' );
  }

  blockList = newBlockList;

} );