From 3f0a805c568f92622faf4b71b24eeb5f39b5bca8 Mon Sep 17 00:00:00 2001
From: Hiroshi Urabe <mail@torounit.com>
Date: Thu, 6 Feb 2025 03:27:58 +0900
Subject: [PATCH] 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>
---
 .../font-library-modal/collection-font-variant.js | 14 +++-----------
 .../font-library-modal/library-font-variant.js    | 15 +++------------
 2 files changed, 6 insertions(+), 23 deletions(-)

diff --git a/packages/edit-site/src/components/global-styles/font-library-modal/collection-font-variant.js b/packages/edit-site/src/components/global-styles/font-library-modal/collection-font-variant.js
index 0719cb873f8f78..105c8e9ff81d95 100644
--- a/packages/edit-site/src/components/global-styles/font-library-modal/collection-font-variant.js
+++ b/packages/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
index 2f84bd1f2c749c..24a1d54871f6bc 100644
--- 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,12 +1,8 @@
 /**
  * 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
@@ -14,9 +10,6 @@ import {
 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">