AnswerBun.com

Gutenberg withInstanceId. When to use it?

WordPress Development Asked by at least three characters on July 25, 2020

The WordPress block API for Gutenberg has a withInstanceId package.

They say,

Some components need to generate a unique id for each instance. This
could serve as suffixes to element ID’s for example. Wrapping a
component with withInstanceId provides a unique instanceId to serve
this purpose.

and show an example:

/**
 * WordPress dependencies
 */
import { withInstanceId } from '@wordpress/compose';

function MyCustomElement( { instanceId } ) {
    return (
        <div id={ `my-custom-element-${ instanceId }` }>
            content
        </div>
    );
}

export default withInstanceId( MyCustomElement );

It seems like it is just being used for html ids? As to not have duplicate id names? Is there any other usage for it? If i just export my component using export default withInstanceId( MyCustomElement ) will the entire component have a unique id?

2 Answers

The generated id is added to the component's props. So it can be accessed through this.props.instanceId inside the component.

In the example you posted it is being used to assign a unique id attribute to the html element. However it can be used for custom logic inside react. Just as an example, you can assign each component an id and then save its data to the redux store, that way when you need to access the data from an element inside the store you can use its id to find it.

Correct answer by Alvaro on July 25, 2020

You could use clientId to uniquely identify the block. clientId is available in props.

Something like this..

export function EditBlock({clientId, setAttributes} ) {
  
  // save clientId in attributes to make it available in Save
  return (
        <div id={ `my-custom-element-${ clientId }` }>
            content
        </div>
    ); 
}

No need for HOC.

Answered by Meera on July 25, 2020

Add your own answers!

Related Questions

WordPress Importer “Failed to import Media”

0  Asked on January 19, 2021 by orbita

 

Override theme file from plugin

0  Asked on January 18, 2021 by toma-tomov

 

Why can I not view image attachment pages?

3  Asked on January 17, 2021 by h-hall

     

Image color changes in wordpress

0  Asked on January 16, 2021 by giulia

     

Inserting additional   into menu item text

2  Asked on January 16, 2021 by marsandback

 

wp_mail() not sending emails with ajax

2  Asked on January 16, 2021 by mohd-hasan

   

How to ignore fields if empty?

1  Asked on January 16, 2021 by israel-santiago

   

Change WordPress post-state in Admin Area

2  Asked on January 16, 2021 by gino

   

Select posts with any post_type from database?

1  Asked on January 15, 2021 by lisandro-vaccaro

 

Why does WP_Post not contain its permalink?

3  Asked on January 14, 2021 by dodov

   

How to check post type when using sanitize_title hook?

1  Asked on January 14, 2021 by michael-rogers

 

WordPress retrieve media except cropped

0  Asked on January 12, 2021 by adviner

 

You have an error in your SQL syntax – Help with query

2  Asked on January 11, 2021 by ogmios

   

Is it possible to display tag cloud widget by category?

1  Asked on January 11, 2021 by taller-de-wordpress

   

Ask a Question

Get help from others!

© 2022 AnswerBun.com. All rights reserved. Sites we Love: PCI Database, MenuIva, UKBizDB, Menu Kuliner, Sharing RPP, SolveDir