Add: Font appearance control on global styles (#26868)

packages/block-editor/src/components/index.js

@@ -29,6 +29,7 @@ export { default as ContrastChecker } from './contrast-checker';
 export { default as __experimentalGradientPicker } from './gradient-picker';
 export { default as __experimentalGradientPickerControl } from './gradient-picker/control';
 export { default as __experimentalGradientPickerPanel } from './gradient-picker/panel';
+export { default as __experimentalFontAppearanceControl } from './font-appearance-control';
 export { default as __experimentalFontFamilyControl } from './font-family';
 export { default as __experimentalColorGradientControl } from './colors-gradients/control';
 export { default as __experimentalPanelColorGradientSettings } from './colors-gradients/panel-color-gradient-settings';

packages/edit-site/src/components/sidebar/typography-panel.js

@@ -4,6 +4,7 @@
 import {
 	LineHeightControl,
 	__experimentalFontFamilyControl as FontFamilyControl,
+	__experimentalFontAppearanceControl as FontAppearanceControl,
 } from '@wordpress/block-editor';
 import { PanelBody, FontSizePicker } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
@@ -14,9 +15,10 @@ import { __ } from '@wordpress/i18n';
 import { useEditorFeature } from '../editor/utils';
 
 export function useHasTypographyPanel( { supports, name } ) {
+	const hasLineHeight = useHasLineHeightControl( { supports, name } );
+	const hasFontAppearence = useHasAppearenceControl( { supports, name } );
 	return (
-		useHasLineHeightControl( { supports, name } ) ||
-		supports.includes( 'fontSize' )
+		hasLineHeight || hasFontAppearence || supports.includes( 'fontSize' )
 	);
 }
 
@@ -27,6 +29,18 @@ function useHasLineHeightControl( { supports, name } ) {
 	);
 }
 
+function useHasAppearenceControl( { supports, name } ) {
+	const fontStyles = useEditorFeature( 'typography.fontStyles', name );
+	const fontWeights = useEditorFeature( 'typography.fontWeights', name );
+	const hasFontAppearance = !! fontStyles?.length && !! fontWeights?.length;
+
+	return (
+		hasFontAppearance &&
+		supports.includes( 'fontStyle' ) &&
+		supports.includes( 'fontWeight' )
+	);
+}
+
 export default function TypographyPanel( {
 	context: { supports, name },
 	getStyleProperty,
@@ -38,7 +52,10 @@ export default function TypographyPanel( {
 		name
 	);
 	const fontFamilies = useEditorFeature( 'typography.fontFamilies', name );
+	const fontStyles = useEditorFeature( 'typography.fontStyles', name );
+	const fontWeights = useEditorFeature( 'typography.fontWeights', name );
 	const hasLineHeightEnabled = useHasLineHeightControl( { supports, name } );
+	const hasAppearenceControl = useHasAppearenceControl( { supports, name } );
 
 	return (
 		<PanelBody title={ __( 'Typography' ) } initialOpen={ true }>
@@ -69,6 +86,19 @@ export default function TypographyPanel( {
 					}
 				/>
 			) }
+			{ hasAppearenceControl && (
+				<FontAppearanceControl
+					value={ {
+						fontStyle: getStyleProperty( name, 'fontStyle' ),
+						fontWeight: getStyleProperty( name, 'fontWeight' ),
+					} }
+					options={ { fontStyles, fontWeights } }
+					onChange={ ( { fontStyle, fontWeight } ) => {
+						setStyleProperty( name, 'fontStyle', fontStyle );
+						setStyleProperty( name, 'fontWeight', fontWeight );
+					} }
+				/>
+			) }
 		</PanelBody>
 	);
 }