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)
- 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?
- Create Element From Dynamic HTML String [closed]
- Plugin Sidebar is not Saving Meta Attribute to Post/Page after “Update”
- creating elements/innerblocks via rangecontrol
- WordPress: After Gutenberg plugin migration to block.json the localization/ translations with PolyGlot in JavaScript does not work anymore
- Looking for callback function after Gutenberg is rendered?
- 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 allow core Gutenberg blocks selection only when you are inside a custom inner block
- Is there a better way to implement responsive images than what WordPress uses by default?
- Gutenberg registerFormatType with Multiple Classes
- Saving data from block editor to the database
- Gutenberg: useDispatch is not a function – @wordpress/data included
- Gutenberg Block add element in the Editor inside InnerBlocks after div – editor-block-list
- Gutenberg – What is the best way to save/update post meta?
- How do you render_callback for register_block_type to a method in another class?
- How to create multiple Gutenberg blocks in one plugin
- How to get color name in PanelColorSettings in custom Gutenberg 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?
- How to access noticeOperations from withNotices
- How to prevent UNDO on guternberg block editor
- How to insert text at the current cursor position in Gutenberg?
- How to override gutenberg paragraph block edit property
- 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?
- Creating a custom Gutenberg block with columns
- How to get boolean value from register_meta properly?
- JSX in WordPress Plugin Development
- How can I get the selected string when using a toolbar button in Gutenberg?
- jQuery selectors for editor elements safe to use?
- There is a problem in the gutenberg block I developed. Problem is with withInstanceId
- 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
- Additional classes `undefined` after saving post in Gutenberg
- How do you submit a Gutenberg plugin?
- Catching Gutenberg sidebar switch event
- Invalid hook call on save, not edit when using swiper slider
- Proper way to use useSelect
- Use npm and wp-env to make production bundle
- How to save post meta as an array in Gutenberg?
- Developing the save function in Gutenberg blocks
- WordPress Gutenberg InnerBlocks renderAppender not showing with template
- Gutenberg – is it ok to load dependencies multiple times?
- Preventing double loading JS scripts (like React) when developing for Gutenberg
- Modify custom block plugin without losing content
- Console errors in 6.0-RC1 Widget screen
- How to override supports of innerBlocks?
- How to use attributes in competent of Gutenberg
- var(–text-color) in style.scss works once but not twitch
- When setting styles to an extended block that was saved as a pattern, it doesn’t remove the style that was there
- wordpress full site editing problem when extending core blocks
- Pass custom props to
- 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?
- Rerender core Templates with with ToggleControl but it doesnt recognize block type
- Gutenberg – Call google map render function in save after DOM has been rendered
- 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?
- How to use setAttributes outside of the edit function return
- why is apiFetch throwing Unhandled Promise Rejection: TypeError: Object is not a function
- Where do I hook to have the server do something in PHP on block attribute change?
- Reading plugin settings in esnext wordpress block
- How to integrate plugins into block editor
- Add custom html classes to gutenberg wrapper
- How to get access the ID of all posts of custom post type in Gutenberg editor
- 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]
- How can i add insertion point between inner blocks in my custom block like core blocks
- Gutenberg: – Call a function after Server Side Component is rendered
- Accept only PDF file for upload
- get the queried_object of an url
- Build a dynamic block using the default attributes
- Help interpreting @wordpress/create-block-tutorial-template usage error
- Add custom data-attribute to core Gutenberg block within an template
- 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
- How to replace content of a block in and re-render on change?
- extending a core block doesn’t work inside the editor
- 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?
- How can I include React useState in a custom gutenberg block plugin?
- Remove Gutenberg Buttons Block
- Set srcset on a block image