- { __(
- '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.'
- ) }
-
+ { __(
+ '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.'
+ ) }
+
+
+ );
+}
export default function ControlPoints( {
gradientPickerDomRef,
diff --git a/packages/components/src/dimension-control/test/__snapshots__/index.test.js.snap b/packages/components/src/dimension-control/test/__snapshots__/index.test.js.snap
index c06662ee862c99..dddc2093bca480 100644
--- a/packages/components/src/dimension-control/test/__snapshots__/index.test.js.snap
+++ b/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`] = `
-
);
}
-
-export default withInstanceId( FontSizePicker );
diff --git a/packages/components/src/form-token-field/token.js b/packages/components/src/form-token-field/token.js
index 0e83faa1733093..565e3af635e958 100644
--- a/packages/components/src/form-token-field/token.js
+++ b/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( {
);
}
-
-export default withInstanceId( Token );
diff --git a/packages/components/src/menu-group/index.js b/packages/components/src/menu-group/index.js
index ba98c5fea4fd22..a10235c1f7f173 100644
--- a/packages/components/src/menu-group/index.js
+++ b/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;
diff --git a/packages/components/src/radio-control/index.js b/packages/components/src/radio-control/index.js
index 2aec3eaca43d48..67b61e6bde8a37 100644
--- a/packages/components/src/radio-control/index.js
+++ b/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,
);
}
-
-export default withInstanceId( RadioControl );
diff --git a/packages/components/src/select-control/index.js b/packages/components/src/select-control/index.js
index a10f051face1c0..9ae37ecbb5429f 100644
--- a/packages/components/src/select-control/index.js
+++ b/packages/components/src/select-control/index.js
@@ -6,16 +6,15 @@ import { isEmpty } from 'lodash';
/**
* WordPress dependencies
*/
-import { withInstanceId } from '@wordpress/compose';
+import { useInstanceId } from '@wordpress/compose';
/**
* Internal dependencies
*/
import BaseControl from '../base-control';
-function SelectControl( {
+export default function SelectControl( {
help,
- instanceId,
label,
multiple = false,
onChange,
@@ -24,6 +23,7 @@ function SelectControl( {
hideLabelFromVision,
...props
} ) {
+ const instanceId = useInstanceId();
const id = `inspector-select-control-${ instanceId }`;
const onChangeValue = ( event ) => {
if ( multiple ) {
@@ -62,5 +62,3 @@ function SelectControl( {
);
/* eslint-enable jsx-a11y/no-onchange */
}
-
-export default withInstanceId( SelectControl );
diff --git a/packages/components/src/text-control/index.js b/packages/components/src/text-control/index.js
index 61504cc7da5cfb..e79aa90bbac807 100644
--- a/packages/components/src/text-control/index.js
+++ b/packages/components/src/text-control/index.js
@@ -1,14 +1,15 @@
/**
* WordPress dependencies
*/
-import { withInstanceId } from '@wordpress/compose';
+import { useInstanceId } from '@wordpress/compose';
/**
* Internal dependencies
*/
import BaseControl from '../base-control';
-function TextControl( { label, hideLabelFromVision, value, help, className, instanceId, onChange, type = 'text', ...props } ) {
+export default function TextControl( { label, hideLabelFromVision, value, help, className, onChange, type = 'text', ...props } ) {
+ const instanceId = useInstanceId();
const id = `inspector-text-control-${ instanceId }`;
const onChangeValue = ( event ) => onChange( event.target.value );
@@ -25,5 +26,3 @@ function TextControl( { label, hideLabelFromVision, value, help, className, inst
);
}
-
-export default withInstanceId( TextControl );
diff --git a/packages/components/src/textarea-control/index.js b/packages/components/src/textarea-control/index.js
index 45158ca2ec7474..522b38a36086e6 100644
--- a/packages/components/src/textarea-control/index.js
+++ b/packages/components/src/textarea-control/index.js
@@ -1,14 +1,15 @@
/**
* WordPress dependencies
*/
-import { withInstanceId } from '@wordpress/compose';
+import { useInstanceId } from '@wordpress/compose';
/**
* Internal dependencies
*/
import BaseControl from '../base-control';
-function TextareaControl( { label, hideLabelFromVision, value, help, instanceId, onChange, rows = 4, className, ...props } ) {
+export default function TextareaControl( { label, hideLabelFromVision, value, help, onChange, rows = 4, className, ...props } ) {
+ const instanceId = useInstanceId();
const id = `inspector-textarea-control-${ instanceId }`;
const onChangeValue = ( event ) => onChange( event.target.value );
@@ -26,5 +27,3 @@ function TextareaControl( { label, hideLabelFromVision, value, help, instanceId,
);
}
-
-export default withInstanceId( TextareaControl );
diff --git a/packages/compose/README.md b/packages/compose/README.md
index dcd5c47411d74c..97bd40880bd421 100644
--- a/packages/compose/README.md
+++ b/packages/compose/README.md
@@ -119,6 +119,10 @@ _Returns_
- `WPComponent`: Component class with generated display name assigned.
+# **useInstanceId**
+
+Provides a unique instance ID.
+
# **useMediaQuery**
Runs a media query and returns its value when it changes.
diff --git a/packages/compose/src/hooks/use-instance-id/README.md b/packages/compose/src/hooks/use-instance-id/README.md
new file mode 100644
index 00000000000000..352ea0917717fd
--- /dev/null
+++ b/packages/compose/src/hooks/use-instance-id/README.md
@@ -0,0 +1,22 @@
+useInstanceId
+==============
+
+Some components need to generate a unique id for each instance. This could serve as suffixes to element ID's for example. `useInstanceId` provides a unique `instanceId` to serve this purpose.
+
+## Usage
+
+```jsx
+/**
+ * WordPress dependencies
+ */
+import { useInstanceId } from '@wordpress/compose';
+
+function MyCustomElement() {
+ const instanceId = useInstanceId();
+ return (
+