Use available font weights and styles in FontAppearanceControl

packages/block-editor/src/components/font-appearance-control/index.js

@@ -3,57 +3,12 @@
  */
 import { CustomSelectControl } from '@wordpress/components';
 import { useMemo } from '@wordpress/element';
-import { __, _x, sprintf } from '@wordpress/i18n';
-
-const FONT_STYLES = [
-	{
-		name: _x( 'Regular', 'font style' ),
-		value: 'normal',
-	},
-	{
-		name: _x( 'Italic', 'font style' ),
-		value: 'italic',
-	},
-];
-
-const FONT_WEIGHTS = [
-	{
-		name: _x( 'Thin', 'font weight' ),
-		value: '100',
-	},
-	{
-		name: _x( 'Extra Light', 'font weight' ),
-		value: '200',
-	},
-	{
-		name: _x( 'Light', 'font weight' ),
-		value: '300',
-	},
-	{
-		name: _x( 'Regular', 'font weight' ),
-		value: '400',
-	},
-	{
-		name: _x( 'Medium', 'font weight' ),
-		value: '500',
-	},
-	{
-		name: _x( 'Semi Bold', 'font weight' ),
-		value: '600',
-	},
-	{
-		name: _x( 'Bold', 'font weight' ),
-		value: '700',
-	},
-	{
-		name: _x( 'Extra Bold', 'font weight' ),
-		value: '800',
-	},
-	{
-		name: _x( 'Black', 'font weight' ),
-		value: '900',
-	},
-];
+import { __, sprintf } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import { getFontStylesAndWeights } from '../../utils/get-font-styles-and-weights';
 
 /**
  * Adjusts font appearance field label in case either font styles or weights
@@ -76,7 +31,7 @@ const getFontAppearanceLabel = ( hasFontStyles, hasFontWeights ) => {
 };
 
 /**
- * Control to display unified font style and weight options.
+ * Control to display font style and weight options of the active font.
  *
  * @param {Object} props Component props.
  *
@@ -87,6 +42,7 @@ export default function FontAppearanceControl( props ) {
 		onChange,
 		hasFontStyles = true,
 		hasFontWeights = true,
+		fontFamilyFaces,
 		value: { fontStyle, fontWeight },
 		...otherProps
 	} = props;
@@ -97,43 +53,22 @@ export default function FontAppearanceControl( props ) {
 		name: __( 'Default' ),
 		style: { fontStyle: undefined, fontWeight: undefined },
 	};
+	const { fontStyles, fontWeights, combinedStyleAndWeightOptions } =
+		getFontStylesAndWeights( fontFamilyFaces );
 
-	// Combines both font style and weight options into a single dropdown.
+	// Generates select options for combined font styles and weights.
 	const combineOptions = () => {
 		const combinedOptions = [ defaultOption ];
-
-		FONT_STYLES.forEach( ( { name: styleName, value: styleValue } ) => {
-			FONT_WEIGHTS.forEach(
-				( { name: weightName, value: weightValue } ) => {
-					const optionName =
-						styleValue === 'normal'
-							? weightName
-							: sprintf(
-									/* translators: 1: Font weight name. 2: Font style name. */
-									__( '%1$s %2$s' ),
-									weightName,
-									styleName
-							  );
-
-					combinedOptions.push( {
-						key: `${ styleValue }-${ weightValue }`,
-						name: optionName,
-						style: {
-							fontStyle: styleValue,
-							fontWeight: weightValue,
-						},
-					} );
-				}
-			);
-		} );
-
+		if ( combinedStyleAndWeightOptions ) {
+			combinedOptions.push( ...combinedStyleAndWeightOptions );
+		}
 		return combinedOptions;
 	};
 
 	// Generates select options for font styles only.
 	const styleOptions = () => {
 		const combinedOptions = [ defaultOption ];
-		FONT_STYLES.forEach( ( { name, value } ) => {
+		fontStyles.forEach( ( { name, value } ) => {
 			combinedOptions.push( {
 				key: value,
 				name,
@@ -146,7 +81,7 @@ export default function FontAppearanceControl( props ) {
 	// Generates select options for font weights only.
 	const weightOptions = () => {
 		const combinedOptions = [ defaultOption ];
-		FONT_WEIGHTS.forEach( ( { name, value } ) => {
+		fontWeights.forEach( ( { name, value } ) => {
 			combinedOptions.push( {
 				key: value,
 				name,
@@ -158,12 +93,19 @@ export default function FontAppearanceControl( props ) {
 
 	// Map font styles and weights to select options.
 	const selectOptions = useMemo( () => {
+		// Display combined available font style and weight options.
 		if ( hasFontStyles && hasFontWeights ) {
 			return combineOptions();
 		}
 
+		// Display only font style options or font weight options.
 		return hasFontStyles ? styleOptions() : weightOptions();
-	}, [ props.options ] );
+	}, [
+		props.options,
+		fontStyles,
+		fontWeights,
+		combinedStyleAndWeightOptions,
+	] );
 
 	// Find current selection by comparing font style & weight against options,
 	// and fall back to the Default option if there is no matching option.