Run code once when block is created

Question

I'm developing a custom plugin with react and I would like to create a unique identifier for each new added instance of my custom block as soon as it is added to the page.

So I add my "custom block" and the code runs once to create and assign the id. When I visit the backend again, the code should not run again. But if I add a new instance of my "custom block", the code runs once again for this instance and creates & assigns a new id. So I guess I'm looking for a hook like "blockAddedToPage" or so, but I can't find something matching.

I know that there is the clientid, but I need something permanent and shorter :D

I wrote a small helper function to create my id, but how do I run it only when the block is added to the page?

Answer 1

You can do this with a block attribute and useEffect() in your edit function:

useEffect(() => {
    // If the ID is already set, we don't need to do anything
    if (attributes.id) {
        return;
    }

    // The ID attribute isn't set, so we'll create it and set it now
    setAttributes({
        id: 123, // This is just for example purposes, you can set up your ID however you want
    });
}, []); // Empty array ensures this effect only runs once

One thing to note: This will not run your ID creation code again if you copy/paste/duplicate an existing block with an existing ID attribute.

If you're looking for a more robust solution to generating a unique ID for a block (and are ok with the ID possibly changing), I used a similar technique (see code here) for a block of mine that combines the post ID and an instance ID to create the unique ID. If you rearrange the blocks, insert new ones, etc. it regenerates the IDs as necessary.