New hook: useInstanceId

packages/block-editor/src/components/responsive-block-control/label.js

@@ -1,11 +1,12 @@
 /**
  * WordPress dependencies
  */
-import { withInstanceId } from '@wordpress/compose';
+import { useInstanceId } from '@wordpress/compose';
 import { _x, sprintf } from '@wordpress/i18n';
 import { Fragment } from '@wordpress/element';
 
-const ResponsiveBlockControlLabel = ( { instanceId, property, viewport, desc } ) => {
+export default function ResponsiveBlockControlLabel( { property, viewport, desc } ) {
+	const instanceId = useInstanceId();
 	const accessibleLabel = desc || sprintf( _x( 'Controls the %1$s property for %2$s viewports.', 'Text labelling a interface as controlling a given layout property (eg: margin) for a given screen size.' ), property, viewport.label );
 	return (
 		<Fragment>
@@ -15,7 +16,4 @@ const ResponsiveBlockControlLabel = ( { instanceId, property, viewport, desc } )
 			<span className="screen-reader-text" id={ `rbc-desc-${ instanceId }` }>{ accessibleLabel }</span>
 		</Fragment>
 	);
-};
-
-export default withInstanceId( ResponsiveBlockControlLabel );
-
+}

packages/block-editor/src/components/responsive-block-control/test/__snapshots__/index.js.snap

@@ -1,3 +1,3 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Basic rendering should render with required props 1`] = `"<fieldset class=\\"block-editor-responsive-block-control\\"><legend class=\\"block-editor-responsive-block-control__title\\">Padding</legend><div class=\\"block-editor-responsive-block-control__inner\\"><div class=\\"components-base-control components-toggle-control block-editor-responsive-block-control__toggle\\"><div class=\\"components-base-control__field\\"><span class=\\"components-form-toggle is-checked\\"><input class=\\"components-form-toggle__input\\" id=\\"inspector-toggle-control-0\\" type=\\"checkbox\\" aria-describedby=\\"inspector-toggle-control-0__help\\" checked=\\"\\"><span class=\\"components-form-toggle__track\\"></span><span class=\\"components-form-toggle__thumb\\"></span><svg width=\\"2\\" height=\\"6\\" xmlns=\\"http://www.w3.org/2000/svg\\" viewBox=\\"0 0 2 6\\" class=\\"components-form-toggle__on\\" role=\\"img\\" aria-hidden=\\"true\\" focusable=\\"false\\"><path d=\\"M0 0h2v6H0z\\"></path></svg></span><label for=\\"inspector-toggle-control-0\\" class=\\"components-toggle-control__label\\">Use the same padding on all screensizes.</label></div><p id=\\"inspector-toggle-control-0__help\\" class=\\"components-base-control__help\\">Toggle between using the same value for all screen sizes or using a unique value per screen size.</p></div><div class=\\"block-editor-responsive-block-control__group block-editor-responsive-block-control__group--default\\"><div class=\\"components-base-control\\"><div class=\\"components-base-control__field\\"><label class=\\"components-base-control__label\\" for=\\"inspector-select-control-0\\"><span aria-describedby=\\"rbc-desc-0\\">All</span><span class=\\"screen-reader-text\\" id=\\"rbc-desc-0\\">Controls the padding property for All viewports.</span></label><select id=\\"inspector-select-control-0\\" class=\\"components-select-control__input\\"><option value=\\"\\">Please select</option><option value=\\"small\\">Small</option><option value=\\"medium\\">Medium</option><option value=\\"large\\">Large</option></select></div></div><p id=\\"all\\">All is used here for testing purposes to ensure we have access to details about the device.</p></div></div></fieldset>"`;
+exports[`Basic rendering should render with required props 1`] = `"<fieldset class=\\"block-editor-responsive-block-control\\"><legend class=\\"block-editor-responsive-block-control__title\\">Padding</legend><div class=\\"block-editor-responsive-block-control__inner\\"><div class=\\"components-base-control components-toggle-control block-editor-responsive-block-control__toggle\\"><div class=\\"components-base-control__field\\"><span class=\\"components-form-toggle is-checked\\"><input class=\\"components-form-toggle__input\\" id=\\"inspector-toggle-control-0\\" type=\\"checkbox\\" aria-describedby=\\"inspector-toggle-control-0__help\\" checked=\\"\\"><span class=\\"components-form-toggle__track\\"></span><span class=\\"components-form-toggle__thumb\\"></span><svg width=\\"2\\" height=\\"6\\" xmlns=\\"http://www.w3.org/2000/svg\\" viewBox=\\"0 0 2 6\\" class=\\"components-form-toggle__on\\" role=\\"img\\" aria-hidden=\\"true\\" focusable=\\"false\\"><path d=\\"M0 0h2v6H0z\\"></path></svg></span><label for=\\"inspector-toggle-control-0\\" class=\\"components-toggle-control__label\\">Use the same padding on all screensizes.</label></div><p id=\\"inspector-toggle-control-0__help\\" class=\\"components-base-control__help\\">Toggle between using the same value for all screen sizes or using a unique value per screen size.</p></div><div class=\\"block-editor-responsive-block-control__group block-editor-responsive-block-control__group--default\\"><div class=\\"components-base-control\\"><div class=\\"components-base-control__field\\"><label class=\\"components-base-control__label\\" for=\\"inspector-select-control-0\\"><span aria-describedby=\\"rbc-desc-1\\">All</span><span class=\\"screen-reader-text\\" id=\\"rbc-desc-1\\">Controls the padding property for All viewports.</span></label><select id=\\"inspector-select-control-0\\" class=\\"components-select-control__input\\"><option value=\\"\\">Please select</option><option value=\\"small\\">Small</option><option value=\\"medium\\">Medium</option><option value=\\"large\\">Large</option></select></div></div><p id=\\"all\\">All is used here for testing purposes to ensure we have access to details about the device.</p></div></div></fieldset>"`;

packages/block-editor/src/components/url-input/index.native.js

@@ -7,29 +7,27 @@ import { TextInput } from 'react-native';
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { Component } from '@wordpress/element';
-import { withInstanceId } from '@wordpress/compose';
 
-class URLInput extends Component {
-	render() {
-		const { value = '', autoFocus = true, ...extraProps } = this.props;
-		/* eslint-disable jsx-a11y/no-autofocus */
-		return (
-			<TextInput
-				autoFocus={ autoFocus }
-				editable
-				selectTextOnFocus
-				autoCapitalize="none"
-				autoCorrect={ false }
-				textContentType="URL"
-				value={ value }
-				onChangeText={ this.props.onChange }
-				placeholder={ __( 'Paste URL' ) }
-				{ ...extraProps }
-			/>
-		);
-		/* eslint-enable jsx-a11y/no-autofocus */
-	}
+export default function URLInput( {
+	value = '',
+	autoFocus = true,
+	onChange,
+	...extraProps
+} ) {
+	/* eslint-disable jsx-a11y/no-autofocus */
+	return (
+		<TextInput
+			autoFocus={ autoFocus }
+			editable
+			selectTextOnFocus
+			autoCapitalize="none"
+			autoCorrect={ false }
+			textContentType="URL"
+			value={ value }
+			onChangeText={ onChange }
+			placeholder={ __( 'Paste URL' ) }
+			{ ...extraProps }
+		/>
+	);
+	/* eslint-enable jsx-a11y/no-autofocus */
 }
-
-export default withInstanceId( URLInput );

packages/block-library/src/shortcode/edit.js

@@ -4,9 +4,10 @@
 import { __ } from '@wordpress/i18n';
 import { Dashicon } from '@wordpress/components';
 import { PlainText } from '@wordpress/block-editor';
-import { withInstanceId } from '@wordpress/compose';
+import { useInstanceId } from '@wordpress/compose';
 
-const ShortcodeEdit = ( { attributes, setAttributes, instanceId } ) => {
+export default function ShortcodeEdit( { attributes, setAttributes } ) {
+	const instanceId = useInstanceId();
 	const inputId = `blocks-shortcode-input-${ instanceId }`;
 
 	return (
@@ -24,6 +25,4 @@ const ShortcodeEdit = ( { attributes, setAttributes, instanceId } ) => {
 			/>
 		</div>
 	);
-};
-
-export default withInstanceId( ShortcodeEdit );
+}

packages/components/src/checkbox-control/index.js

@@ -1,15 +1,16 @@
 /**
  * WordPress dependencies
  */
-import { withInstanceId } from '@wordpress/compose';
+import { useInstanceId } from '@wordpress/compose';
 
 /**
  * Internal dependencies
  */
 import BaseControl from '../base-control';
 import Dashicon from '../dashicon';
 
-function CheckboxControl( { label, className, heading, checked, help, instanceId, onChange, ...props } ) {
+export default function CheckboxControl( { label, className, heading, checked, help, onChange, ...props } ) {
+	const instanceId = useInstanceId();
 	const id = `inspector-checkbox-control-${ instanceId }`;
 	const onChangeValue = ( event ) => onChange( event.target.checked );
 
@@ -34,5 +35,3 @@ function CheckboxControl( { label, className, heading, checked, help, instanceId
 		</BaseControl>
 	);
 }
-
-export default withInstanceId( CheckboxControl );

packages/components/src/custom-gradient-picker/control-points.js

@@ -9,7 +9,7 @@ import classnames from 'classnames';
  */
 import { Component, useEffect, useRef } from '@wordpress/element';
 import { __, sprintf } from '@wordpress/i18n';
-import { withInstanceId } from '@wordpress/compose';
+import { useInstanceId } from '@wordpress/compose';
 
 /**
  * Internal dependencies
@@ -68,57 +68,55 @@ class ControlPointKeyboardMove extends Component {
 	}
 }
 
-const ControlPointButton = withInstanceId(
-	function( {
-		instanceId,
-		isOpen,
-		position,
-		color,
-		onChange,
-		gradientIndex,
-		gradientAST,
-		...additionalProps
-	} ) {
-		const descriptionId = `components-custom-gradient-picker__control-point-button-description-${ instanceId }`;
-		return (
-			<ControlPointKeyboardMove
-				onChange={ onChange }
-				gradientIndex={ gradientIndex }
-				gradientAST={ gradientAST }
-			>
-				<Button
-					aria-label={
-						sprintf(
-							// translators: %1$s: gradient position e.g: 70%, %2$s: gradient color code e.g: rgb(52,121,151).
-							__( 'Gradient control point at position %1$s with color code %2$s.' ),
-							position,
-							color
-						)
-					}
-					aria-describedby={ descriptionId }
-					aria-expanded={ isOpen }
-					className={
-						classnames(
-							'components-custom-gradient-picker__control-point-button',
-							{ 'is-active': isOpen }
-						)
-					}
-					style={ {
-						left: position,
-					} }
-					{ ...additionalProps }
-				/>
-				<div
-					className="screen-reader-text"
-					id={ descriptionId }>
-					{ __(
-						'Use your left or right arrow keys or drag and drop with the mouse to change the gradient position. Press the button to change the color or remove the control point.'
-					) }
-				</div>
-			</ControlPointKeyboardMove>
-		);
-	}
-);
+function ControlPointButton( {
+	isOpen,
+	position,
+	color,
+	onChange,
+	gradientIndex,
+	gradientAST,
+	...additionalProps
+} ) {
+	const instanceId = useInstanceId();
+	const descriptionId = `components-custom-gradient-picker__control-point-button-description-${ instanceId }`;
+	return (
+		<ControlPointKeyboardMove
+			onChange={ onChange }
+			gradientIndex={ gradientIndex }
+			gradientAST={ gradientAST }
+		>
+			<Button
+				aria-label={
+					sprintf(
+						// translators: %1$s: gradient position e.g: 70%, %2$s: gradient color code e.g: rgb(52,121,151).
+						__( 'Gradient control point at position %1$s with color code %2$s.' ),
+						position,
+						color
+					)
+				}
+				aria-describedby={ descriptionId }
+				aria-expanded={ isOpen }
+				className={
+					classnames(
+						'components-custom-gradient-picker__control-point-button',
+						{ 'is-active': isOpen }
+					)
+				}
+				style={ {
+					left: position,
+				} }
+				{ ...additionalProps }
+			/>
+			<div
+				className="screen-reader-text"
+				id={ descriptionId }>
+				{ __(
+					'Use your left or right arrow keys or drag and drop with the mouse to change the gradient position. Press the button to change the color or remove the control point.'
+				) }
+			</div>
+		</ControlPointKeyboardMove>
+	);
+}
 
 export default function ControlPoints( {
 	gradientPickerDomRef,

packages/components/src/dimension-control/test/__snapshots__/index.test.js.snap

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`DimensionControl rendering renders with custom sizes 1`] = `
-<WithInstanceId(SelectControl)
+<SelectControl
   className="block-editor-dimension-control"
   hideLabelFromVision={false}
   label={
@@ -34,7 +34,7 @@ exports[`DimensionControl rendering renders with custom sizes 1`] = `
 `;
 
 exports[`DimensionControl rendering renders with defaults 1`] = `
-<WithInstanceId(SelectControl)
+<SelectControl
   className="block-editor-dimension-control"
   hideLabelFromVision={false}
   label={
@@ -75,7 +75,7 @@ exports[`DimensionControl rendering renders with defaults 1`] = `
 `;
 
 exports[`DimensionControl rendering renders with icon and custom icon label 1`] = `
-<WithInstanceId(SelectControl)
+<SelectControl
   className="block-editor-dimension-control"
   hideLabelFromVision={false}
   label={
@@ -119,7 +119,7 @@ exports[`DimensionControl rendering renders with icon and custom icon label 1`]
 `;
 
 exports[`DimensionControl rendering renders with icon and default icon label 1`] = `
-<WithInstanceId(SelectControl)
+<SelectControl
   className="block-editor-dimension-control"
   hideLabelFromVision={false}
   label={

packages/components/src/font-size-picker/index.js

@@ -4,7 +4,7 @@
  */
 import { useState } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
-import { withInstanceId } from '@wordpress/compose';
+import { useInstanceId } from '@wordpress/compose';
 
 /**
  * Internal dependencies
@@ -35,15 +35,15 @@ function getSelectOptions( optionsArray, disableCustomFontSizes ) {
 	} ) );
 }
 
-function FontSizePicker( {
+export default function FontSizePicker( {
 	fallbackFontSize,
 	fontSizes = [],
 	disableCustomFontSizes = false,
 	onChange,
 	value,
 	withSlider = false,
-	instanceId,
 } ) {
+	const instanceId = useInstanceId();
 	const [ currentSelectValue, setCurrentSelectValue ] = useState( getSelectValueFromFontSize( fontSizes, value ) );
 
 	if ( disableCustomFontSizes && ! fontSizes.length ) {
@@ -132,5 +132,3 @@ function FontSizePicker( {
 		</fieldset>
 	);
 }
-
-export default withInstanceId( FontSizePicker );

packages/components/src/form-token-field/token.js

@@ -7,7 +7,7 @@ import { noop } from 'lodash';
 /**
  * WordPress dependencies
  */
-import { withInstanceId } from '@wordpress/compose';
+import { useInstanceId } from '@wordpress/compose';
 import { __, sprintf } from '@wordpress/i18n';
 
 /**
@@ -16,7 +16,7 @@ import { __, sprintf } from '@wordpress/i18n';
 import IconButton from '../icon-button';
 import VisuallyHidden from '../visually-hidden';
 
-function Token( {
+export default function Token( {
 	value,
 	status,
 	title,
@@ -29,8 +29,8 @@ function Token( {
 	messages,
 	termPosition,
 	termsCount,
-	instanceId,
 } ) {
+	const instanceId = useInstanceId();
 	const tokenClasses = classnames( 'components-form-token-field__token', {
 		'is-error': 'error' === status,
 		'is-success': 'success' === status,
@@ -75,5 +75,3 @@ function Token( {
 		</span>
 	);
 }
-
-export default withInstanceId( Token );

packages/components/src/menu-group/index.js

@@ -7,14 +7,15 @@ import classnames from 'classnames';
  * WordPress dependencies
  */
 import { Children } from '@wordpress/element';
-import { withInstanceId } from '@wordpress/compose';
+import { useInstanceId } from '@wordpress/compose';
 
 export function MenuGroup( {
 	children,
 	className = '',
-	instanceId,
 	label,
 } ) {
+	const instanceId = useInstanceId();
+
 	if ( ! Children.count( children ) ) {
 		return null;
 	}
@@ -43,4 +44,4 @@ export function MenuGroup( {
 	);
 }
 
-export default withInstanceId( MenuGroup );
+export default MenuGroup;

packages/components/src/radio-control/index.js

@@ -7,14 +7,15 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
-import { withInstanceId } from '@wordpress/compose';
+import { useInstanceId } from '@wordpress/compose';
 
 /**
  * Internal dependencies
  */
 import BaseControl from '../base-control';
 
-function RadioControl( { label, className, selected, help, instanceId, onChange, options = [] } ) {
+export default function RadioControl( { label, className, selected, help, onChange, options = [] } ) {
+	const instanceId = useInstanceId();
 	const id = `inspector-radio-control-${ instanceId }`;
 	const onChangeValue = ( event ) => onChange( event.target.value );
 
@@ -43,5 +44,3 @@ function RadioControl( { label, className, selected, help, instanceId, onChange,
 		</BaseControl>
 	);
 }
-
-export default withInstanceId( RadioControl );