How to use the @wordpress/components.withInstanceId function in @wordpress/components

To help you get started, we’ve selected a few @wordpress/components examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github WordPress / gutenberg / editor / components / url-input / index.js View on Github external
onClick={ () => this.selectLink( post.link ) }
									aria-selected={ index === selectedSuggestion }
								>
									{ decodeEntities( post.title.rendered ) || __( '(no title)' ) }
								
							) ) }
						
					
				}
			
		);
		/* eslint-enable jsx-a11y/no-autofocus */
	}
}

export default withSpokenMessages( withInstanceId( UrlInput ) );
github youknowriad / gutenberg-extensibility-workshop / scripts / 05-meta-block / index.js View on Github external
import { withInstanceId } from "@wordpress/components";

registerBlockType("gew/meta-block", {
  title: "05 - Meta Block",
  icon: "welcome-learn-more",
  category: "common",

  attributes: {
    description: {
      type: "string",
      source: "meta", // Define that this attribute is stored in a meta field
      meta: "short_description" // Name of the custom field used to store/fetch the attribute
    }
  },

  edit: withInstanceId(
    ({ className, attributes, setAttributes, instanceId }) => {
      const { description } = attributes;
      const updateDescription = description => setAttributes({ description });

      return (
        <div>
          <label>Short Description</label>
          </div>
github WordPress / gutenberg / blocks / library / shortcode / index.js View on Github external
return content;
						},
					},
				},
				priority: 20,
			},
		],
	},

	supports: {
		customClassName: false,
		className: false,
		html: false,
	},

	edit: withInstanceId(
		( { attributes, setAttributes, instanceId } ) =&gt; {
			const inputId = `blocks-shortcode-input-${ instanceId }`;

			return (
				<div>
					<label>
						
						{ __( 'Shortcode' ) }
					</label>
					</div>
github WordPress / gutenberg / editor / components / post-comments / index.js View on Github external
onChange={ onToggleComments }
			id={ commentsToggleId }
		/>,
	];
}

export default connect(
	( state ) => {
		return {
			commentStatus: getEditedPostAttribute( state, 'comment_status' ),
		};
	},
	{
		editPost,
	}
)( withInstanceId( PostComments ) );
github eventespresso / event-espresso-core / assets / src / components / form / select / model-selects / editor-select.js View on Github external
this.props[ 'aria-describedby' ] = id + '__help';
		}
		return (
			
				{ children }
			
		);
	}
}

export default withInstanceId( EditorSelect );

export const getEditorSelectProps = ( selectProps ) =&gt; {
	const editorProps = {
		modelName: selectProps.modelName,
		selectLabel: selectProps.selectLabel,
		className: selectProps.className,
		help: selectProps.help,
	};
	selectProps.selectLabel = modelSelect.MODEL_SELECT_LABEL_NONE;
	delete selectProps.help;
	return { editorProps, selectProps };
};
github WordPress / gutenberg / editor / components / post-pingbacks / index.js View on Github external
onChange={ onTogglePingback }
			id={ pingbacksToggleId }
		/>,
	];
}

export default connect(
	( state ) => {
		return {
			pingStatus: getEditedPostAttribute( state, 'ping_status' ),
		};
	},
	{
		editPost,
	}
)( withInstanceId( PostPingbacks ) );
github WordPress / gutenberg / core-blocks / block / edit-panel / index.js View on Github external
<button disabled="{">
							{ __( 'Cancel' ) }
						</button>
					
				) }
			
		);
	}
}

export default withInstanceId( SharedBlockEditPanel );