block:custom event not firing correctly (or maybe I'm missing something)

[mrobertshaw]

Hi There

Since upgrading to the latest GrapesJS version the block:custom event doesn't seem to be firing on the editor when supplying custom: true in blockManager config for the editor.

let editor = grapesjs.init({
...
blockManager: {
custom: true
},
...
});

This handler used to fire in previous versions but never fires now.

editor.on("block:custom", data => {
console.log(data);
this.registerCustomBlockManager(data);
});

I have worked around it by pulling the custom data directly as follows:

this.registerCustomBlockManager(editor.BlockManager.__customData());

but this is clearly a bit messy. Is this a bug or is there something I'm missing?

Thanks a lot

Mark

[artf]

Hi @mrobertshaw are you able to provide a reproducible demo as it looks to work fine on my side

[Deliber]

I can confirm this happens on my side too.
I'm working in an Angular environment where GrapesJS is initialized inside a service. After initialization, I enable various panels — in particular, the blocks panel is enabled only when a page is selected for editing.

In that panel, I listen for the "block:custom" event, but since the listener is registered after initialization, the event has already been fired, and as a result, the panel doesn't initialize correctly.

At this point, I see two possible solutions:

As suggested in the original post, allow passing __customData during the panel initialization phase.

Handle the "block:custom" logic as part of the initialization process itself — in my case, directly within the service responsible for exposing drag functionality and the list of blocks.

From what I’ve seen, "block:custom" is fired whenever blocks are added or modified (e.g., through Blocks.add). So if you're listening after the blocks have already been added, that’s likely why the issue occurs.

I hope I was helpful