From 24b0b9ccd10cf31b47bd31ff74fcb1a27cb2bdd7 Mon Sep 17 00:00:00 2001
From: Sarah Norris <sarah@sekai.co.uk>
Date: Thu, 14 Sep 2023 22:08:32 +0100
Subject: [PATCH 01/11] Add e2e test for variant panel

---
 .../specs/site-editor/font-library.spec.js    | 21 +++++++++++++++++++
 1 file changed, 21 insertions(+)

diff --git a/test/e2e/specs/site-editor/font-library.spec.js b/test/e2e/specs/site-editor/font-library.spec.js
index e6521cb7c540bc..d474cbcbb92eb7 100644
--- a/test/e2e/specs/site-editor/font-library.spec.js
+++ b/test/e2e/specs/site-editor/font-library.spec.js
@@ -70,5 +70,26 @@ test.describe( 'Font Library', () => {
 				page.getByRole( 'heading', { name: 'Fonts' } )
 			).toBeVisible();
 		} );
+
+		test( 'should show font variant panel when clicking on a font family', async ( {
+			page,
+		} ) => {
+			await page.getByRole( 'button', { name: /styles/i } ).click();
+			await page
+				.getByRole( 'button', { name: /typography styles/i } )
+				.click();
+			await page
+				.getByRole( 'button', {
+					name: /manage fonts/i,
+				} )
+				.click();
+			await page.getByRole( 'button', { name: /system font/i } ).click();
+			await expect(
+				page.getByRole( 'heading', { name: /system font/i } )
+			).toBeVisible();
+			await expect(
+				page.getByRole( 'checkbox', { name: /system font normal/i } )
+			).toBeVisible();
+		} );
 	} );
 } );

From f41449d10babb15728b11951452cfb264b3a5665 Mon Sep 17 00:00:00 2001
From: Sarah Norris <sarah@sekai.co.uk>
Date: Thu, 14 Sep 2023 22:08:53 +0100
Subject: [PATCH 02/11] Update CheckboxControl to allow for custom label

---
 packages/components/src/checkbox-control/README.md |  3 ++-
 packages/components/src/checkbox-control/index.tsx | 14 ++++++++------
 .../test/__snapshots__/index.tsx.snap              |  8 ++++----
 .../components/src/checkbox-control/test/index.tsx |  7 +++++++
 packages/components/src/checkbox-control/types.ts  |  5 +++--
 5 files changed, 24 insertions(+), 13 deletions(-)

diff --git a/packages/components/src/checkbox-control/README.md b/packages/components/src/checkbox-control/README.md
index 4bc19ed9bfe5f0..bfa02fcc4a7821 100644
--- a/packages/components/src/checkbox-control/README.md
+++ b/packages/components/src/checkbox-control/README.md
@@ -77,11 +77,12 @@ const MyCheckboxControl = () => {
 The set of props accepted by the component will be specified below.
 Props not included in this set will be applied to the input element.
 
-#### `label`: `string`
+#### `label`: `string|false`
 
 A label for the input field, that appears at the side of the checkbox.
 The prop will be rendered as content a label element.
 If no prop is passed an empty label is rendered.
+If the prop is set to false no label is rendered.
 
 -   Required: No
 
diff --git a/packages/components/src/checkbox-control/index.tsx b/packages/components/src/checkbox-control/index.tsx
index 1b7cae04cd81f6..705cebe93e0870 100644
--- a/packages/components/src/checkbox-control/index.tsx
+++ b/packages/components/src/checkbox-control/index.tsx
@@ -125,12 +125,14 @@ export function CheckboxControl(
 					/>
 				) : null }
 			</span>
-			<label
-				className="components-checkbox-control__label"
-				htmlFor={ id }
-			>
-				{ label }
-			</label>
+			{ label !== false && (
+				<label
+					className="components-checkbox-control__label"
+					htmlFor={ id }
+				>
+					{ label }
+				</label>
+			) }
 		</BaseControl>
 	);
 }
diff --git a/packages/components/src/checkbox-control/test/__snapshots__/index.tsx.snap b/packages/components/src/checkbox-control/test/__snapshots__/index.tsx.snap
index 408f18d8c7e770..13a2c44dd593a4 100644
--- a/packages/components/src/checkbox-control/test/__snapshots__/index.tsx.snap
+++ b/packages/components/src/checkbox-control/test/__snapshots__/index.tsx.snap
@@ -11,8 +11,8 @@ Snapshot Diff:
         >
           <input
             class="components-checkbox-control__input"
--           id="inspector-checkbox-control-5"
-+           id="inspector-checkbox-control-6"
+-           id="inspector-checkbox-control-6"
++           id="inspector-checkbox-control-7"
             type="checkbox"
             value="1"
 +         />
@@ -33,8 +33,8 @@ Snapshot Diff:
         </span>
         <label
           class="components-checkbox-control__label"
--         for="inspector-checkbox-control-5"
-+         for="inspector-checkbox-control-6"
+-         for="inspector-checkbox-control-6"
++         for="inspector-checkbox-control-7"
         />
       </div>
     </div>
diff --git a/packages/components/src/checkbox-control/test/index.tsx b/packages/components/src/checkbox-control/test/index.tsx
index 061087fdc09012..55e1447661392e 100644
--- a/packages/components/src/checkbox-control/test/index.tsx
+++ b/packages/components/src/checkbox-control/test/index.tsx
@@ -60,6 +60,13 @@ describe( 'CheckboxControl', () => {
 			expect( label ).toBeInTheDocument();
 		} );
 
+		it( 'should not render label element if label is set to false', () => {
+			render( <CheckboxControl label={ false } /> );
+
+			const label = screen.queryByRole( 'label' );
+			expect( label ).not.toBeInTheDocument();
+		} );
+
 		it( 'should render a checkbox in an indeterminate state', () => {
 			render( <CheckboxControl indeterminate /> );
 			expect( getInput() ).toHaveProperty( 'indeterminate', true );
diff --git a/packages/components/src/checkbox-control/types.ts b/packages/components/src/checkbox-control/types.ts
index 07ab55493fc661..48a1d02affb700 100644
--- a/packages/components/src/checkbox-control/types.ts
+++ b/packages/components/src/checkbox-control/types.ts
@@ -19,9 +19,10 @@ export type CheckboxControlProps = Pick<
 	/**
 	 * A label for the input field, that appears at the side of the checkbox.
 	 * The prop will be rendered as content a label element. If no prop is
-	 * passed an empty label is rendered.
+	 * passed an empty label is rendered. If the prop is set to false no label
+	 * is rendered.
 	 */
-	label?: string;
+	label?: string | false;
 	/**
 	 * If checked is true the checkbox will be checked. If checked is false the
 	 * checkbox will be unchecked. If no value is passed the checkbox will be

From 3697b3981ccf043cfdbd064a5d29e623455b0c24 Mon Sep 17 00:00:00 2001
From: Sarah Norris <sarah@sekai.co.uk>
Date: Thu, 14 Sep 2023 22:09:15 +0100
Subject: [PATCH 03/11] Wrap custom label around library font variant

---
 .../font-library-modal/library-font-variant.js         | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

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 32e18c023cecbe..9e3739d76c8e5c 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
@@ -36,18 +36,24 @@ function LibraryFontVariant( { face, font } ) {
 	};
 
 	const displayName = font.name + ' ' + getFontFaceVariantName( face );
+	const checkboxId = `${ font.slug }-${ face.fontStyle }`;
 
 	return (
-		<div className="font-library-modal__library-font-variant">
+		<label
+			className="font-library-modal__library-font-variant"
+			htmlFor={ checkboxId }
+		>
 			<Flex justify="space-between" align="center" gap="1rem">
 				<FontFaceDemo fontFace={ face } text={ displayName } />
 				<CheckboxControl
 					checked={ isIstalled }
 					onChange={ handleToggleActivation }
 					__nextHasNoMarginBottom={ true }
+					id={ checkboxId }
+					label={ false }
 				/>
 			</Flex>
-		</div>
+		</label>
 	);
 }
 

From caad4f0f2b7438d2e38aadb44d8f3437a01335e0 Mon Sep 17 00:00:00 2001
From: Sarah Norris <sarah@sekai.co.uk>
Date: Wed, 15 Nov 2023 15:38:52 +0000
Subject: [PATCH 04/11] Use kebabCase for checkbox id

---
 .../font-library-modal/library-font-variant.js            | 8 +++-----
 1 file changed, 3 insertions(+), 5 deletions(-)

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 9e3739d76c8e5c..c7dea7d9540f6d 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
@@ -3,16 +3,14 @@
  */
 import { useContext } from '@wordpress/element';
 import { CheckboxControl, Flex } from '@wordpress/components';
-/**
- * Internal dependencies
- */
-import { getFontFaceVariantName } from './utils';
 
 /**
  * Internal dependencies
  */
+import { getFontFaceVariantName } from './utils';
 import { FontLibraryContext } from './context';
 import FontFaceDemo from './font-demo';
+import { kebabCase } from '../../../../../block-editor/src/utils/object';
 
 function LibraryFontVariant( { face, font } ) {
 	const { isFontActivated, toggleActivateFont } =
@@ -36,7 +34,7 @@ function LibraryFontVariant( { face, font } ) {
 	};
 
 	const displayName = font.name + ' ' + getFontFaceVariantName( face );
-	const checkboxId = `${ font.slug }-${ face.fontStyle }`;
+	const checkboxId = kebabCase( displayName );
 
 	return (
 		<label

From b922477cb7c6be507728e246a6663ace2183b113 Mon Sep 17 00:00:00 2001
From: Sarah Norris <sarah@sekai.co.uk>
Date: Wed, 15 Nov 2023 15:39:11 +0000
Subject: [PATCH 05/11] Apply checkbox changes to collection font variant

---
 .../collection-font-variant.js                   | 16 ++++++++++------
 1 file changed, 10 insertions(+), 6 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 d0e797d78beef0..a0e99561c09dc8 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
@@ -2,15 +2,13 @@
  * WordPress dependencies
  */
 import { CheckboxControl, Flex } from '@wordpress/components';
-/**
- * Internal dependencies
- */
-import { getFontFaceVariantName } from './utils';
 
 /**
  * Internal dependencies
  */
+import { getFontFaceVariantName } from './utils';
 import FontFaceDemo from './font-demo';
+import { kebabCase } from '../../../../../block-editor/src/utils/object';
 
 function CollectionFontVariant( {
 	face,
@@ -27,18 +25,24 @@ function CollectionFontVariant( {
 	};
 
 	const displayName = font.name + ' ' + getFontFaceVariantName( face );
+	const checkboxId = kebabCase( displayName );
 
 	return (
-		<div className="font-library-modal__library-font-variant">
+		<label
+			className="font-library-modal__library-font-variant"
+			htmlFor={ checkboxId }
+		>
 			<Flex justify="space-between" align="center" gap="1rem">
 				<FontFaceDemo fontFace={ face } text={ displayName } />
 				<CheckboxControl
 					checked={ selected }
 					onChange={ handleToggleActivation }
 					__nextHasNoMarginBottom={ true }
+					id={ checkboxId }
+					label={ false }
 				/>
 			</Flex>
-		</div>
+		</label>
 	);
 }
 

From 9757a12e327522c6fe527ae6e132525a870484e3 Mon Sep 17 00:00:00 2001
From: Sarah Norris <sarah@sekai.co.uk>
Date: Wed, 15 Nov 2023 16:39:00 +0000
Subject: [PATCH 06/11] Use font slug in checkbox id

---
 .../font-library-modal/collection-font-variant.js             | 4 +++-
 .../global-styles/font-library-modal/library-font-variant.js  | 4 +++-
 2 files changed, 6 insertions(+), 2 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 a0e99561c09dc8..8c2b36d3adee9f 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
@@ -25,7 +25,9 @@ function CollectionFontVariant( {
 	};
 
 	const displayName = font.name + ' ' + getFontFaceVariantName( face );
-	const checkboxId = kebabCase( displayName );
+	const checkboxId = kebabCase(
+		`${ font.slug }-${ getFontFaceVariantName( face ) }`
+	);
 
 	return (
 		<label
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 c7dea7d9540f6d..010f3efdbeb91a 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
@@ -34,7 +34,9 @@ function LibraryFontVariant( { face, font } ) {
 	};
 
 	const displayName = font.name + ' ' + getFontFaceVariantName( face );
-	const checkboxId = kebabCase( displayName );
+	const checkboxId = kebabCase(
+		`${ font.slug }-${ getFontFaceVariantName( face ) }`
+	);
 
 	return (
 		<label

From 129d1bf4efe95d0d3be50a418ede6d4002031115 Mon Sep 17 00:00:00 2001
From: Sarah Norris <sarah@sekai.co.uk>
Date: Wed, 15 Nov 2023 17:12:25 +0000
Subject: [PATCH 07/11] Update components changelog

---
 packages/components/CHANGELOG.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
index a96c5dc5827c5c..19ce7b4a052edf 100644
--- a/packages/components/CHANGELOG.md
+++ b/packages/components/CHANGELOG.md
@@ -19,6 +19,7 @@
 
 -   `ToggleGroupControl`: Add opt-in prop for 40px default size ([#55789](https://github.com/WordPress/gutenberg/pull/55789)).
 -   `TextControl`: Add opt-in prop for 40px default size ([#55471](https://github.com/WordPress/gutenberg/pull/55471)).
+-   `CheckboxControl`: Add option to not render label ([#56158](https://github.com/WordPress/gutenberg/pull/56158)).
 
 ### Bug Fix
 

From 2b9f689bccfca8f6b47beac0702bd758c787148c Mon Sep 17 00:00:00 2001
From: Sarah Norris <sarah@sekai.co.uk>
Date: Mon, 27 Nov 2023 19:50:10 -0500
Subject: [PATCH 08/11] Update changelog

---
 packages/components/CHANGELOG.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
index 671d41d65290f1..33db97fe005826 100644
--- a/packages/components/CHANGELOG.md
+++ b/packages/components/CHANGELOG.md
@@ -5,6 +5,7 @@
 ### Enhancements
 
 -   `Button`: Add focus rings to focusable disabled buttons ([#56383](https://github.com/WordPress/gutenberg/pull/56383)).
+-   `CheckboxControl`: Add option to not render label ([#56158](https://github.com/WordPress/gutenberg/pull/56158)).
 
 ### Bug Fix
 
@@ -48,7 +49,6 @@
 
 -   `ToggleGroupControl`: Add opt-in prop for 40px default size ([#55789](https://github.com/WordPress/gutenberg/pull/55789)).
 -   `TextControl`: Add opt-in prop for 40px default size ([#55471](https://github.com/WordPress/gutenberg/pull/55471)).
--   `CheckboxControl`: Add option to not render label ([#56158](https://github.com/WordPress/gutenberg/pull/56158)).
 
 ### Bug Fix
 

From bf9a5f7a5fe28d945c88209976f326902f1abb3c Mon Sep 17 00:00:00 2001
From: Sarah Norris <1645628+mikachan@users.noreply.github.com>
Date: Thu, 30 Nov 2023 09:14:13 -0500
Subject: [PATCH 09/11] Update
 packages/components/src/checkbox-control/index.tsx

Co-authored-by: Jeff Ong <jonger4@gmail.com>
---
 packages/components/src/checkbox-control/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/components/src/checkbox-control/index.tsx b/packages/components/src/checkbox-control/index.tsx
index 654ba384162a56..54a9952d199491 100644
--- a/packages/components/src/checkbox-control/index.tsx
+++ b/packages/components/src/checkbox-control/index.tsx
@@ -125,7 +125,7 @@ export function CheckboxControl(
 					/>
 				) : null }
 			</span>
-			{ label !== false && (
+			{ label && (
 				<label
 					className="components-checkbox-control__label"
 					htmlFor={ id }

From f073d1be6c5676ee7c4107bfd0ede639fddfb936 Mon Sep 17 00:00:00 2001
From: Sarah Norris <sarah@sekai.co.uk>
Date: Thu, 30 Nov 2023 09:20:11 -0500
Subject: [PATCH 10/11] Fix changelog

---
 packages/components/CHANGELOG.md | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
index 4125f9d9411a1f..d7971e3ae16050 100644
--- a/packages/components/CHANGELOG.md
+++ b/packages/components/CHANGELOG.md
@@ -2,6 +2,10 @@
 
 ## Unreleased
 
+### Enhancements
+
+-   `CheckboxControl`: Add option to not render label ([#56158](https://github.com/WordPress/gutenberg/pull/56158)).
+
 ## 25.13.0 (2023-11-29)
 
 ### Enhancements
@@ -9,7 +13,6 @@
 -   `FormToggle`: refine animation and improve high contrast styles ([#56515](https://github.com/WordPress/gutenberg/pull/56515)).
 -   `Button`: Add focus rings to focusable disabled buttons ([#56383](https://github.com/WordPress/gutenberg/pull/56383)).
 -   `InserterButton`: Move mobile InserterButton from components package to block-editor package ([#56494](https://github.com/WordPress/gutenberg/pull/56494))
--   `CheckboxControl`: Add option to not render label ([#56158](https://github.com/WordPress/gutenberg/pull/56158)).
 
 ### Bug Fix
 

From 0cca9f2c773f3b315a6507af3a1477a1c7b6d4df Mon Sep 17 00:00:00 2001
From: Sarah Norris <sarah@sekai.co.uk>
Date: Thu, 30 Nov 2023 09:34:05 -0500
Subject: [PATCH 11/11] Update snapshots

---
 .../src/checkbox-control/test/__snapshots__/index.tsx.snap | 7 +------
 1 file changed, 1 insertion(+), 6 deletions(-)

diff --git a/packages/components/src/checkbox-control/test/__snapshots__/index.tsx.snap b/packages/components/src/checkbox-control/test/__snapshots__/index.tsx.snap
index 13a2c44dd593a4..f3bdccc1ccff6b 100644
--- a/packages/components/src/checkbox-control/test/__snapshots__/index.tsx.snap
+++ b/packages/components/src/checkbox-control/test/__snapshots__/index.tsx.snap
@@ -5,7 +5,7 @@ Snapshot Diff:
 - First value
 + Second value
 
-@@ -8,17 +8,31 @@
+@@ -8,13 +8,27 @@
         <span
           class="components-checkbox-control__input-container"
         >
@@ -31,11 +31,6 @@ Snapshot Diff:
             />
 +         </svg>
         </span>
-        <label
-          class="components-checkbox-control__label"
--         for="inspector-checkbox-control-6"
-+         for="inspector-checkbox-control-7"
-        />
       </div>
     </div>
   </div>