Adding a button inside a Block draggable button

[johnkeel-thork]

Hello

Just started playing around with GrapeJS, although i never did any javascript programming before (my work is mostly C,C++,JAVA).

For today i managed to implement it with my custom php page manager, all connected to an headless cms with a really nice API, where i can save and fetch the page html and css!
That was my first victory!

For my second functionality i wanted to be able to save and load user blocks from the database, for this i was able to add a button where it will save the block to DB and add it to the editor right bar (which i also load on editor init):

As you can see on the image you have that small floppy icon on the toolbar which allows us to save any block as a "User Block" that gets loaded to the editor tab both when you save it and when the editor loads!

Really happy with this... until i noticed i also need a way to delete the block!
Its the only thing missing, its saving and loading from DB, you can input a block name, it checks for duplicates and asks if you want to replace, all good!! Just the darn delete missing!!

So i managed to add that ugly (for now) delete button on each block:

editor.BlockManager.add(element.name, {
label: <svg class="gjs-block-svg" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> <path class="gjs-block-svg-path" d="M22,5.5 C22,5.2 21.5,5 20.75,5 L3.25,5 C2.5,5 2,5.2 2,5.5 L2,8.5 C2,8.8 2.5,9 3.25,9 L20.75,9 C21.5,9 22,8.8 22,8.5 L22,5.5 Z M21,8 L3,8 L3,6 L21,6 L21,8 Z" fill-rule="nonzero"></path> <path class="gjs-block-svg-path" d="M22,10.5 C22,10.2 21.5,10 20.75,10 L3.25,10 C2.5,10 2,10.2 2,10.5 L2,13.5 C2,13.8 2.5,14 3.25,14 L20.75,14 C21.5,14 22,13.8 22,13.5 L22,10.5 Z M21,13 L3,13 L3,11 L21,11 L21,13 Z" fill-rule="nonzero"></path> <rect class="gjs-block-svg-path" x="2" y="15" width="10" height="3" rx="0.5"></rect> </svg> <div class="gjs-block-label">+element.name+</div> <button type="button" class="deletebtn" onclick="myFunction()">Delete</button> </div>,
category: 'User Blocks',
content:
element.html
});

I know i cannot make it work with the onclick="myFunction()" thats just there as an example.

So the question is, is there any way i can add a delete button to the block that will trigger an editor.command?

Thank you!!

[artf]

Hi @johnkeel-thork if you need more control over your rendered blocks the best approach is to create your own block manager https://grapesjs.com/docs/modules/Blocks.html#customization