@wordpress/block-editor 13.2.0 → 13.3.0

package/src/components/font-appearance-control/index.js

@@ -1,60 +1,19 @@
 /**
  * WordPress dependencies
  */
-import { CustomSelectControl } from '@wordpress/components';
+import { privateApis as componentsPrivateApis } 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';
+import { unlock } from '../../lock-unlock';
+
+const { CustomSelectControlV2Legacy: CustomSelectControl } = unlock(
+	componentsPrivateApis
+);
 /**
  * Adjusts font appearance field label in case either font styles or weights
  * are disabled.
@@ -76,7 +35,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 +46,7 @@ export default function FontAppearanceControl( props ) {
 		onChange,
 		hasFontStyles = true,
 		hasFontWeights = true,
+		fontFamilyFaces,
 		value: { fontStyle, fontWeight },
 		...otherProps
 	} = props;
@@ -97,43 +57,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 +85,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 +97,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.

package/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;
 	}
 }