Permanent Unique IDs
This tutorial shows how to generate Unique IDs at runtime. If you need a permanent Unique ID, please check out how to set a permanent unique ID for your block.
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 useInstanceId hook:
useInstanceIdFor 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.
wp_register_script exampleStep 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: has-cts-0, has-cts-1
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
That’s it!
Thanks for reading.
Related Posts:
Like this tutorial? There's more like it. Subscribe today!
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.