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.
Related Posts:
- check if Gutenberg is currently in use
- How to use PanelColorSettings in custom Gutenberg block?
- Custom action button in Gutenberg editor (post_submitbox_misc_actions – equivalent)
- Managing two editable fields in gutenberg
- How to save block attributes when the output doesn’t change
- How to remove unwanted panels inside InspectorControls from core blocks in Gutenberg
- Gutenberg ServerSideRender is deprecated, how to work with new wp.serverSideRender component?
- lodash dependency in a Gutenberg plugin
- Create Element From Dynamic HTML String [closed]
- creating elements/innerblocks via rangecontrol
- How to Parse an Array of Elements in Gutenberg Block
- Using the component outside the editor. select(‘core’) is null
- Gutenberg is there a way to know if the current block is reusable?
- How to disable “Transform to” option in Gutenberg custom blocks
- How to allow core Gutenberg blocks selection only when you are inside a custom inner block
- Gutenberg registerFormatType with Multiple Classes
- Saving data from block editor to the database
- Gutenberg – What is the best way to save/update post meta?
- How to create multiple Gutenberg blocks in one plugin
- How to get color name in PanelColorSettings in custom Gutenberg block?
- Initial help with official “create a block” tutorial
- How do I dynamically render an InnerBlock inside a dynamic block?
- Gutenberg Block showing invalid content on edit
- Gutenberg blocks not getting styled on back end
- Is there an additional block.json property to set to get an InnerBlocks child to respect the “supports” property?
- How to setAttributes in Gutenberg block?
- Best way to save custom css for an block
- How to prevent UNDO on guternberg block editor
- How to override gutenberg paragraph block edit property
- How can I listen to events in Gutenberg block?
- It’s possible to passing a ref to FormTokenField from parent component using forwardRef?
- Do I have to worry about useState causing a re-render?
- What’s the right way to instantiate new blocks and/or the plugin itself in toto when using wppb architecture?
- WP Gutenberg Blocks – How to limit first/root blocks
- Creating a custom Gutenberg block with columns
- How to get boolean value from register_meta properly?
- How can I get the selected string when using a toolbar button in Gutenberg?
- Gutenberg: import dependency or assign from global variable?
- Gutenberg table block with Bootstrap .table class
- How to control an elements classes from multiple Gutenberg sidebar controls?
- How to add a gradient component to a custom block
- How to only load css for used blocks on frontend
- Invalid hook call on save, not edit when using swiper slider
- How to add template colors to custom block options in WordPress Gutenberg editor sidebar?
- How to use apiFetch to get author information in Gutenberg properly?
- Gutenberg blocks error: Each child in a list should have a unique “key” prop
- How to properly package a block plugin
- Setting global block attribute value
- Modify custom block plugin without losing content
- Custom Block Not Shown in Block Inserter
- How to override supports of innerBlocks?
- When setting styles to an extended block that was saved as a pattern, it doesn’t remove the style that was there
- Getting incorrect filepath inside custom block front-end output using @wordpress/create-block tutorial
- extraprops override existing props
- Trigger function on Remove block or add new block in Gutenberg JavaScript
- WPGut – Updating failed and shortcode?
- Gutenberg – Call google map render function in save after DOM has been rendered
- Gutenberg block breaks when showing new data
- HTMLCollection not counting right in editor? / for loop not working on elements in DOM
- Is “document loaded” different on admin side than public side?
- How to re-render inspector controls?
- why is apiFetch throwing Unhandled Promise Rejection: TypeError: Object is not a function
- Get value of custom checkbox from Gutenberg sidebar in plugin
- Where to save Gutenberg plugin data?
- Gutenberg component in a plugin admin
- How to integrate plugins into block editor
- Add custom html classes to gutenberg wrapper
- How to create save function for custom Gutenberg style block?
- Gutenberg and custom blocks messed up pagespeed score. What did I wrong?
- Gutenberg text field validation
- Undo operation not working in Rich text [Gutenberg]
- Gutenberg: – Call a function after Server Side Component is rendered
- Accept only PDF file for upload
- get the queried_object of an url
- Help interpreting @wordpress/create-block-tutorial-template usage error
- Call API on post save/update and show the result in admin area
- How can I add a custom button to the post editor?
- How to get custom user meta by id in custom Gutenberg block
- Block Development: hamburger module throwing error in save function
- Adding a navigation with wp_nav_menu() to a custom block in the site editor
- Why isn’t custom sidebar panel not showing up in the Gutenberg Editor?
- REST API error in block editor for custom templates
- Reinitiate Gutenburg’s blocks using javascript
- How can I include React useState in a custom gutenberg block plugin?
- Set srcset on a block image
- Translations not making it into Block UI but work in the rest of the plugin
- Javascript function defined in view.js not reachable from save.js
- How to move custom gutenberg block controls from settings to styles tab?
- How can I obtain an option (get_option) inside a block viewScript?
- How to use useSelect to retrieve the currently default fontFamily?
- move useState variable from edit.js to save.js. How do I do that?
- Access DOM Element in Gutenberg Block on WP Admin Post Edit Screen
- Custom Gutenberg Block ‘Stylized List’ – Incorrect Rendering and Looping of List Items
- useBlockProps() nests wrapper with class name inside block wrapper in the editor
- Output HTML Tags In Gutenberg Block
- Can you nest columns/column in a gutenberg custom template?
- Attributes array not saving values
- WordPress Block with Interactivity API e Preact Component
- Insert Button in to the Block Editor (Header) Toolbar
- render_block_context filter and block context inheritance