use useId

Author: ellatrix

packages/block-editor/src/hooks/layout.js

@@ -6,7 +6,7 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
-import { createHigherOrderComponent, useInstanceId } from '@wordpress/compose';
+import { createHigherOrderComponent } from '@wordpress/compose';
 import { addFilter } from '@wordpress/hooks';
 import { getBlockSupport, hasBlockSupport } from '@wordpress/blocks';
 import { useSelect } from '@wordpress/data';
@@ -17,6 +17,7 @@ import {
 	PanelBody,
 } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
+import { useId } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -360,7 +361,7 @@ export const withLayoutStyles = createHigherOrderComponent(
 		} );
 		const shouldRenderLayoutStyles =
 			blockSupportsLayout && ! disableLayoutStyles;
-		const id = useInstanceId( BlockListBlock );
+		const id = useId();
 		const { layout } = attributes;
 		const { default: defaultBlockLayout } =
 			getBlockSupport( name, layoutBlockSupportKey ) || {};
@@ -432,7 +433,7 @@ export const withChildLayoutStyles = createHigherOrderComponent(
 		const shouldRenderChildLayoutStyles =
 			hasChildLayout && ! disableLayoutStyles;
 
-		const id = useInstanceId( BlockListBlock );
+		const id = useId();
 		const selector = `.wp-container-content-${ id }`;
 
 		let css = '';

packages/block-editor/src/hooks/position.js

@@ -12,9 +12,9 @@ import {
 	BaseControl,
 	privateApis as componentsPrivateApis,
 } from '@wordpress/components';
-import { createHigherOrderComponent, useInstanceId } from '@wordpress/compose';
+import { createHigherOrderComponent } from '@wordpress/compose';
 import { useSelect } from '@wordpress/data';
-import { useMemo, Platform } from '@wordpress/element';
+import { useMemo, Platform, useId } from '@wordpress/element';
 import { addFilter } from '@wordpress/hooks';
 
 /**
@@ -359,7 +359,7 @@ export const withPositionStyles = createHigherOrderComponent(
 		const allowPositionStyles =
 			hasPositionBlockSupport && ! isPositionDisabled;
 
-		const id = useInstanceId( BlockListBlock );
+		const id = useId();
 
 		// Higher specificity to override defaults in editor UI.
 		const positionSelector = `.wp-container-${ id }.wp-container-${ id }`;

packages/block-editor/src/hooks/style.js

@@ -6,14 +6,14 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
-import { useMemo } from '@wordpress/element';
+import { useMemo, useId } from '@wordpress/element';
 import { addFilter } from '@wordpress/hooks';
 import {
 	getBlockSupport,
 	hasBlockSupport,
 	__EXPERIMENTAL_ELEMENTS as ELEMENTS,
 } from '@wordpress/blocks';
-import { createHigherOrderComponent, useInstanceId } from '@wordpress/compose';
+import { createHigherOrderComponent } from '@wordpress/compose';
 import { getCSSRules, compileCSS } from '@wordpress/style-engine';
 
 /**
@@ -400,7 +400,7 @@ const elementTypes = [
  */
 const withElementsStyles = createHigherOrderComponent(
 	( BlockListBlock ) => ( props ) => {
-		const blockElementsContainerIdentifier = `wp-elements-${ useInstanceId(
+		const blockElementsContainerIdentifier = `wp-elements-${ useId(
 			BlockListBlock
 		) }`;