最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

block editor - Gutenberg withInstanceId. When to use it?

programmeradmin4浏览0评论

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?

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?

Share Improve this question asked Jan 4, 2019 at 13:01 at least three charactersat least three characters 33712 silver badges28 bronze badges
Add a comment  | 

2 Answers 2

Reset to default 1

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.

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.