Refactor font variant components to use useId for checkbox IDs (#69050)

Co-authored-by: torounit <toro_unit@git.wordpress.org> Co-authored-by: Mamaduka <mamaduka@git.wordpress.org> Co-authored-by: t-hamano <wildworks@git.wordpress.org> Co-authored-by: chiilog <mel_cha@git.wordpress.org>
WordPress · Feb 5, 2025 · 3f0a805 · 3f0a805
1 parent d9d138a
commit 3f0a805
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 23 deletions.
diff --git a/...ages/edit-site/src/components/global-styles/font-library-modal/collection-font-variant.js b/...ages/edit-site/src/components/global-styles/font-library-modal/collection-font-variant.js
@@ -1,20 +1,14 @@
 /**
  * WordPress dependencies
  */
-import {
-	CheckboxControl,
-	Flex,
-	privateApis as componentsPrivateApis,
-} from '@wordpress/components';
+import { useId } from '@wordpress/element';
+import { CheckboxControl, Flex } from '@wordpress/components';
 
 /**
  * Internal dependencies
  */
 import { getFontFaceVariantName } from './utils';
 import FontDemo from './font-demo';
-import { unlock } from '../../../lock-unlock';
-
-const { kebabCase } = unlock( componentsPrivateApis );
 
 function CollectionFontVariant( {
 	face,
@@ -31,9 +25,7 @@ function CollectionFontVariant( {
 	};
 
 	const displayName = font.name + ' ' + getFontFaceVariantName( face );
-	const checkboxId = kebabCase(
-		`${ font.slug }-${ getFontFaceVariantName( face ) }`
-	);
+	const checkboxId = useId();
 
 	return (
 		<div className="font-library-modal__font-card">

diff --git a/packages/edit-site/src/components/global-styles/font-library-modal/library-font-variant.js b/packages/edit-site/src/components/global-styles/font-library-modal/library-font-variant.js
@@ -1,22 +1,15 @@
 /**
  * WordPress dependencies
  */
-import { useContext } from '@wordpress/element';
-import {
-	CheckboxControl,
-	Flex,
-	privateApis as componentsPrivateApis,
-} from '@wordpress/components';
+import { useContext, useId } from '@wordpress/element';
+import { CheckboxControl, Flex } from '@wordpress/components';
 
 /**
  * Internal dependencies
  */
 import { getFontFaceVariantName } from './utils';
 import { FontLibraryContext } from './context';
 import FontDemo from './font-demo';
-import { unlock } from '../../../lock-unlock';
-
-const { kebabCase } = unlock( componentsPrivateApis );
 
 function LibraryFontVariant( { face, font } ) {
 	const { isFontActivated, toggleActivateFont } =
@@ -41,9 +34,7 @@ function LibraryFontVariant( { face, font } ) {
 	};
 
 	const displayName = font.name + ' ' + getFontFaceVariantName( face );
-	const checkboxId = kebabCase(
-		`${ font.slug }-${ getFontFaceVariantName( face ) }`
-	);
+	const checkboxId = useId();
 
 	return (
 		<div className="font-library-modal__font-card">