Gutenberg: how could I add ID for different block or elements in block?

[najarrajan1]

I added 2 different button in 2 separate blocks, how could I add ID

<div class="wp-block-button btn-1"><a class="wp-block-button__link has-background has-alert-background-color" href="#">watch now</a></div>
<div class="wp-block-button btn-1"><a class="wp-block-button__link has-background has-alert-background-color" href="#">call now</a></div>

[swissspidy]

You could use the withInstanceId HOC: https://github.com/WordPress/gutenberg/blob/e95026cee0d66b98d8b4e958cfacf8fe9a9e8b2d/packages/compose/src/with-instance-id/README.md

[heldervilela]

It is also possible to use the const { clientId } = this.props; prop inside the edit() or save() method

[najarrajan1]

Thankyou both of you for replies. In which file to make change so that in every block element there will be unique ID as said in 'withInstanceId'?

[danielbachhuber]

@najarrajan1 What are you using the ID for?

It would be a lot of work to register an ID field for each core block. If you only need the ID for the frontend, you might consider filtering at the PHP level using the do_block filter.

[bupotalovo]

@najarrajan1 With any other page builders you can configure ID and class for rows, sections, elements, etc., maybe you are looking for this?

With Gutenberg you can only configure class via Block Settings > Advanced > Additional CSS Class, but no ID. If you manually add id="my-id" via Edit as HTML the button block will break with a This block contains unexpected or invalid content. message.

[najarrajan1]

@najarrajan1 With any other page builders you can configure ID and class for rows, sections, elements, etc., maybe you are looking for this?

With Gutenberg you can only configure class via Block Settings > Advanced > Additional CSS Class, but no ID. If you manually add id="my-id" via Edit as HTML the button block will break with a This block contains unexpected or invalid content. message.

@bupotalovo , yes like that. but not on each elements, but if I want to add ID like in above two buttons that I have posted.

Yes I found to add the class. Just looking for, If I need to add ID for those two 'button' on different block may it be possible to add.

[bupotalovo]

If I need to add ID for those two 'button' on different block may it be possible to add.

Adding an ID as in the other page builders is not possible with any Gutenberg core block.

You have to be/hire a programmer and write own blocks, or intercept block output or similar, as advised by the other guys.

[najarrajan1]

thankyou bupotalovo.
and also thanks for suggestion @swissspidy, @heldervilela, @danielbachhuber.

[swissspidy]

Closing this for now then.

Feel free to reopen if you have any follow-up questions about this.