Reuse util function to keep consistent font appearance label (#35860)

WordPress · Oct 25, 2021 · 19da62a · 19da62a
1 parent f4ea8c8
commit 19da62a
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 15 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
@@ -55,6 +55,26 @@ const FONT_WEIGHTS = [
 	},
 ];
 
+/**
+ * Adjusts font appearance field label in case either font styles or weights
+ * are disabled.
+ *
+ * @param {boolean} hasFontStyles  Whether font styles are enabled and present.
+ * @param {boolean} hasFontWeights Whether font weights are enabled and present.
+ * @return {string} A label representing what font appearance is being edited.
+ */
+export const getFontAppearanceLabel = ( hasFontStyles, hasFontWeights ) => {
+	if ( ! hasFontStyles ) {
+		return __( 'Font weight' );
+	}
+
+	if ( ! hasFontWeights ) {
+		return __( 'Font style' );
+	}
+
+	return __( 'Appearance' );
+};
+
 /**
  * Control to display unified font style and weight options.
  *
@@ -70,6 +90,7 @@ export default function FontAppearanceControl( props ) {
 		value: { fontStyle, fontWeight },
 	} = props;
 	const hasStylesOrWeights = hasFontStyles || hasFontWeights;
+	const label = getFontAppearanceLabel( hasFontStyles, hasFontWeights );
 	const defaultOption = {
 		key: 'default',
 		name: __( 'Default' ),
@@ -152,19 +173,6 @@ export default function FontAppearanceControl( props ) {
 				option.style.fontWeight === fontWeight
 		) || selectOptions[ 0 ];
 
-	// Adjusts field label in case either styles or weights are disabled.
-	const getLabel = () => {
-		if ( ! hasFontStyles ) {
-			return __( 'Font weight' );
-		}
-
-		if ( ! hasFontWeights ) {
-			return __( 'Font style' );
-		}
-
-		return __( 'Appearance' );
-	};
-
 	// Adjusts screen reader description based on styles or weights.
 	const getDescribedBy = () => {
 		if ( ! currentSelection ) {
@@ -198,7 +206,7 @@ export default function FontAppearanceControl( props ) {
 		hasStylesOrWeights && (
 			<CustomSelectControl
 				className="components-font-appearance-control"
-				label={ getLabel() }
+				label={ label }
 				describedBy={ getDescribedBy() }
 				options={ selectOptions }
 				value={ currentSelection }

diff --git a/packages/block-editor/src/hooks/typography.js b/packages/block-editor/src/hooks/typography.js
@@ -9,6 +9,7 @@ import { __ } from '@wordpress/i18n';
  * Internal dependencies
  */
 import InspectorControls from '../components/inspector-controls';
+import { getFontAppearanceLabel } from '../components/font-appearance-control';
 
 import {
 	LINE_HEIGHT_SUPPORT_KEY,
@@ -24,6 +25,8 @@ import {
 	hasFontAppearanceValue,
 	resetFontAppearance,
 	useIsFontAppearanceDisabled,
+	useIsFontStyleDisabled,
+	useIsFontWeightDisabled,
 } from './font-appearance';
 import {
 	FONT_FAMILY_SUPPORT_KEY,
@@ -83,6 +86,9 @@ export function TypographyPanel( props ) {
 	const isTextTransformDisabled = useIsTextTransformDisabled( props );
 	const isLetterSpacingDisabled = useIsLetterSpacingDisabled( props );
 
+	const hasFontStyles = ! useIsFontStyleDisabled( props );
+	const hasFontWeights = ! useIsFontWeightDisabled( props );
+
 	const isDisabled = useIsTypographyDisabled( props );
 	const isSupported = hasTypographySupport( props.name );
 
@@ -147,7 +153,10 @@ export function TypographyPanel( props ) {
 				<ToolsPanelItem
 					className="single-column"
 					hasValue={ () => hasFontAppearanceValue( props ) }
-					label={ __( 'Appearance' ) }
+					label={ getFontAppearanceLabel(
+						hasFontStyles,
+						hasFontWeights
+					) }
 					onDeselect={ () => resetFontAppearance( props ) }
 					isShownByDefault={ defaultControls?.fontAppearance }
 					resetAllFilter={ ( newAttributes ) => ( {