From cbbb84802536dc5b5dd119d358865588a35c6ed4 Mon Sep 17 00:00:00 2001
From: Matias Benedetto <matias.benedetto@gmail.com>
Date: Fri, 22 Nov 2024 19:50:35 -0300
Subject: [PATCH] Font family preview in the font family picker (#67118)

* style font family option

* use CustomSelectControl instead of Select

* fix onchange callback

* removing unwanted props

* try e2e test fix to work with CustomSelectControl component

* try fix e2e test

* Fix test for font family combobox

---------

Co-authored-by: matiasbenedetto <mmaattiiaass@git.wordpress.org>
Co-authored-by: jeryj <jeryj@git.wordpress.org>
Co-authored-by: tyxla <tyxla@git.wordpress.org>
Co-authored-by: mirka <0mirka00@git.wordpress.org>
Co-authored-by: annezazu <annezazu@git.wordpress.org>
Co-authored-by: mtias <matveb@git.wordpress.org>
Co-authored-by: mikachan <mikachan@git.wordpress.org>
Co-authored-by: jasmussen <joen@git.wordpress.org>
---
 .../src/components/font-family/index.js       | 26 +++++++++----------
 .../specs/site-editor/font-library.spec.js    |  3 ++-
 2 files changed, 15 insertions(+), 14 deletions(-)

diff --git a/packages/block-editor/src/components/font-family/index.js b/packages/block-editor/src/components/font-family/index.js
index c87a52b4c676d2..1e6c137daedb0f 100644
--- a/packages/block-editor/src/components/font-family/index.js
+++ b/packages/block-editor/src/components/font-family/index.js
@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { SelectControl } from '@wordpress/components';
+import { CustomSelectControl } from '@wordpress/components';
 import deprecated from '@wordpress/deprecated';
 import { __ } from '@wordpress/i18n';
 
@@ -30,13 +30,15 @@ export default function FontFamilyControl( {
 	}
 
 	const options = [
-		{ value: '', label: __( 'Default' ) },
-		...fontFamilies.map( ( { fontFamily, name } ) => {
-			return {
-				value: fontFamily,
-				label: name || fontFamily,
-			};
-		} ),
+		{
+			key: '',
+			name: __( 'Default' ),
+		},
+		...fontFamilies.map( ( { fontFamily, name } ) => ( {
+			key: fontFamily,
+			name: name || fontFamily,
+			style: { fontFamily },
+		} ) ),
 	];
 
 	if ( ! __nextHasNoMarginBottom ) {
@@ -51,14 +53,12 @@ export default function FontFamilyControl( {
 	}
 
 	return (
-		<SelectControl
+		<CustomSelectControl
 			__next40pxDefaultSize={ __next40pxDefaultSize }
-			__nextHasNoMarginBottom={ __nextHasNoMarginBottom }
 			label={ __( 'Font' ) }
-			options={ options }
 			value={ value }
-			onChange={ onChange }
-			labelPosition="top"
+			onChange={ ( { selectedItem } ) => onChange( selectedItem.key ) }
+			options={ options }
 			{ ...props }
 		/>
 	);
diff --git a/test/e2e/specs/site-editor/font-library.spec.js b/test/e2e/specs/site-editor/font-library.spec.js
index 7928ef8f71c534..1824257df12fd3 100644
--- a/test/e2e/specs/site-editor/font-library.spec.js
+++ b/test/e2e/specs/site-editor/font-library.spec.js
@@ -186,7 +186,8 @@ test.describe( 'Font Library', () => {
 			await page
 				.getByRole( 'button', { name: 'Headings', exact: true } )
 				.click();
-			await page.getByLabel( 'Font' ).selectOption( 'Exo 2' );
+			await page.getByRole( 'combobox', { name: 'Font' } ).click();
+			await page.getByRole( 'option', { name: 'Exo 2' } ).click();
 			await expect(
 				editor.canvas.locator( '.is-root-container h1' )
 			).toHaveCSS( 'font-family', '"Exo 2"' );