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>
WordPress · Jul 8, 2024 · 6c434b0 · 6c434b0
1 parent f6133cd
commit 6c434b0
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 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
@@ -1,15 +1,19 @@
 /**
  * WordPress dependencies
  */
-import { CustomSelectControl } from '@wordpress/components';
+import { privateApis as componentsPrivateApis } from '@wordpress/components';
 import { useMemo } from '@wordpress/element';
 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
@@ -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
@@ -469,7 +469,6 @@ export default function TypographyPanel( {
 						hasFontWeights={ hasFontWeights }
 						fontFamilyFaces={ fontFamilyFaces }
 						size="__unstable-large"
-						__nextHasNoMarginBottom
 					/>
 				</ToolsPanelItem>
 			) }