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?

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?

• block-editor

• you shouldn't need to trigger a refresh, when the blocks are changed/added/removed they and their parents are re-rendered, including when they're selected etc, can you provide more information about what's going on? It's unusual and not how things are meant to work. You should never need to manually trigger a re-render, that's usually a sign you've done something you're not supposed to – Tom J Nowell ♦ Commented Dec 30, 2021 at 13:59
• I’m implementing the Splide script (splidejs.com/integration/react-splide). This script doesn't get an information if a inner block gets removed as it doesn't know anything about the block editor. – KittMedia Commented Dec 30, 2021 at 14:02
• probably because it's not a real react slider, it's just a wrapper around a non-react library that uses the old methods of directly modifying the DOM. Swiper has the same issue, see here: github.com/Splidejs/react-splide/blob/master/src/js/components/… it's reading the children for slides, in theory this code is meant to update and refetch the new slides when the component updates github.com/Splidejs/react-splide/blob/master/src/js/components/… but clearly the code is defective based on your report – Tom J Nowell ♦ Commented Dec 30, 2021 at 14:10
• either that or it's only swapping the children out for the new versions because nothing in the block has actually changed so it was never updated – Tom J Nowell ♦ Commented Dec 30, 2021 at 14:15
• It is in fact updating, but only after I click inside the slider manually after I deleted a block inside of it. – KittMedia Commented Dec 30, 2021 at 14:27

1 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;

} );