Sometimes you need to style your blocks individually, and this is where a unique ID for each block can come in handy. So how do you get one?
Step 1: Add The uniqueId attribute
Head to your block’s block.json file and add in the
uniqueId attribute. Give it a type of string with an empty default.
Step 2: Add the useInstanceId hook to your block
Head to your block’s main block file (typically index.js or edit.js) and add in the
For the import variation, make sure
compose is in your project’s dependencies.
For the alternate variation, include
wp-element as part of your block script.
Step 3: Generate the Unique ID on Render
In the above example, I pass in a reference to my block and add a prefix of
has-cts so the ids are:
Step 4: Generate the unique ID using useEffect
Next up is updating the uniqueId attribute. We’ll want to update this each time as WordPress re-calculates unique values on each page refresh.
Step 5: Add the ID to Your Block Output
Step 6: Style Your Block
Step 7: Style the Frontend
Thanks for reading.
Would you like more tutorials like this?
Just sign up below.
Ronald Huereca founded DLX Plugins in 2022 with the goal of providing deluxe plugins available for download. Find out more about DLX Plugins, check out some tutorials, and check out our plugins.