From 6c434b043145f35e659796f9c5458c4a24864d2a Mon Sep 17 00:00:00 2001
From: Marco Ciampini <marco.ciampo@gmail.com>
Date: Mon, 8 Jul 2024 12:24:34 +0200
Subject: [PATCH] FontAppearanceControl: use CustomSelectControl V2 legacy
 adapter (#63179)

* FontAppearanceControl: use CustomSelectControl V2 legacy adapter

* Remove unnecessary __nextHasNoMarginBottom and avoid console error

---

Co-authored-by: ciampo <mciampini@git.wordpress.org>
Co-authored-by: mirka <0mirka00@git.wordpress.org>
---
 .../src/components/font-appearance-control/index.js       | 6 +++++-
 .../src/components/font-appearance-control/style.scss     | 8 +++-----
 .../src/components/global-styles/typography-panel.js      | 1 -
 3 files changed, 8 insertions(+), 7 deletions(-)

diff --git a/packages/block-editor/src/components/font-appearance-control/index.js b/packages/block-editor/src/components/font-appearance-control/index.js
index 418d43e322ac8..023a4519d485d 100644
--- a/packages/block-editor/src/components/font-appearance-control/index.js
+++ b/packages/block-editor/src/components/font-appearance-control/index.js
@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { CustomSelectControl } from '@wordpress/components';
+import { privateApis as componentsPrivateApis } from '@wordpress/components';
 import { useMemo } from '@wordpress/element';
 import { __, sprintf } from '@wordpress/i18n';
 
@@ -9,7 +9,11 @@ import { __, sprintf } from '@wordpress/i18n';
  * Internal dependencies
  */
 import { getFontStylesAndWeights } from '../../utils/get-font-styles-and-weights';
+import { unlock } from '../../lock-unlock';
 
+const { CustomSelectControlV2Legacy: CustomSelectControl } = unlock(
+	componentsPrivateApis
+);
 /**
  * Adjusts font appearance field label in case either font styles or weights
  * are disabled.
diff --git a/packages/block-editor/src/components/font-appearance-control/style.scss b/packages/block-editor/src/components/font-appearance-control/style.scss
index d9af9f29a456c..d1db850a41011 100644
--- a/packages/block-editor/src/components/font-appearance-control/style.scss
+++ b/packages/block-editor/src/components/font-appearance-control/style.scss
@@ -1,8 +1,6 @@
 .components-font-appearance-control {
-	ul {
-		li {
-			color: $gray-900;
-			text-transform: capitalize;
-		}
+	[role="option"] {
+		color: $gray-900;
+		text-transform: capitalize;
 	}
 }
diff --git a/packages/block-editor/src/components/global-styles/typography-panel.js b/packages/block-editor/src/components/global-styles/typography-panel.js
index 12ceadeb758df..c497ea4683391 100644
--- a/packages/block-editor/src/components/global-styles/typography-panel.js
+++ b/packages/block-editor/src/components/global-styles/typography-panel.js
@@ -469,7 +469,6 @@ export default function TypographyPanel( {
 						hasFontWeights={ hasFontWeights }
 						fontFamilyFaces={ fontFamilyFaces }
 						size="__unstable-large"
-						__nextHasNoMarginBottom
 					/>
 				</ToolsPanelItem>
 			) }