How to Create a Permanent Unique ID for Your WordPress Block

My previous tutorial focused on creating a unique ID for your WordPress block at runtime. However, this ID isn’t permanent.

Within this tutorial, I’ll show you how to create a permanent unique ID that also works with block duplication.

Step 1: Add a uniqueId attributeOpens in a new window

Head to your block’s block.json file and add in the uniqueId attribute. Give it a type of string with an empty default.

Add the uniqueId attribute to your block's attributes — Sample Block.json With the uniqueId Attribute

Step 2: Add a uniqueIds array above your componentOpens in a new window

In your block’s block code, add a const of uniqueIds above your component.

This variable is important because we need to keep track of all of our block IDs globally so that we can generate a new ID in the event the block is duplicated.

// For storing unique IDs.
const uniqueIds = [];Code language: JavaScript (javascript)

Step 3: Grab the block’s clientIdOpens in a new window

The block’s clientId is a unique string passed to each block at runtime and at block generation. This ID always changes, but you can use it to generate a unique ID for your block.

Step 4: Grab the uniqueId attributeOpens in a new window

Grab the uniqueId attribute. We’re going to need it later.

const {
	uniqueId,
} = attributes;Code language: JavaScript (javascript)

Step 5: Add a useEffect to set the uniqueIdOpens in a new window

We’ll use useEffect to set the uniqueId if it doesn’t exist. If the uniqueId already exists in our array variable uniqueIds (note the plurality), then a new ID is generated.

/**
 * Get a unique ID for the block for inline styling if necessary.
 */
useEffect( () => {
	
	if ( ( null === uniqueId || '' === uniqueId ) || uniqueIds.includes( uniqueId ) ) {
		const newUniqueId = 'wppic-' + clientId.substr( 2, 9 ).replace( '-', '' );

		setAttributes( { uniqueId: newUniqueId } );
		uniqueIds.push( newUniqueId );
	} else {
		uniqueIds.push( uniqueId );
	}
}, [] );Code language: JavaScript (javascript)

This code does the following:

Looks for the uniqueId attribute. If it’s blank or is stored in uniqueIds, then a new ID is generated.
Generates the newUniqueId based on the clientId and a prefix.
Updates the uniqueId attribute and pushes to uniqueIds array for storage.
If the uniqueId is already set, add to the uniqueIds array for storage.

So at first render, a new ID is generated, is checked against existing IDs, and a unique ID is generated.

In the event of block duplication, the uniqueId would have already been added to the uniqueIds array, so a duplicate would be found, and a new unique ID is generated.