Fluid Typography: ensure global styles preset fluid sizes are calculated correctly

lib/compat/wordpress-6.1/class-wp-theme-json-6-1.php

@@ -1047,8 +1047,15 @@ protected static function compute_style_properties( $styles, $settings = array()
 				continue;
 			}
 
-			// Calculate fluid typography rules where available.
+			// Calculates fluid typography rules where available.
 			if ( 'font-size' === $css_property ) {
+				/*
+				 * gutenberg_get_typography_font_size_value() will check
+				 * if fluid typography has been activated and also
+				 * whether the incoming value can be converted to a fluid value.
+				 * Values that already have a "clamp()" function will not pass the test,
+				 * and therefore the original $value will be returned.
+				 */
 				$value = gutenberg_get_typography_font_size_value( array( 'size' => $value ) );
 			}
 

packages/components/src/font-size-picker/index.tsx

@@ -111,7 +111,13 @@ const UnforwardedFontSizePicker = (
 			),
 		[ shouldUseSelectControl, fontSizes, disableCustomFontSizes ]
 	);
-	const selectedOption = getSelectedOption( fontSizes, value );
+	const selectedOption = getSelectedOption(
+		fontSizes,
+		value,
+		shouldUseSelectControl,
+		disableCustomFontSizes
+	);
+
 	const isCustomValue = selectedOption.slug === CUSTOM_FONT_SIZE;
 	const [ showCustomValueControl, setShowCustomValueControl ] = useState(
 		! disableCustomFontSizes && isCustomValue

packages/components/src/font-size-picker/test/utils.ts

@@ -120,33 +120,38 @@ describe( 'getToggleGroupOptions', () => {
 		).toEqual( [
 			{
 				key: '1',
-				value: '1',
 				label: 'S',
 				name: '1',
+				size: '1',
+				value: '1',
 			},
 			{
 				key: '2',
-				value: '2',
 				label: 'M',
 				name: '2',
+				size: '2',
+				value: '2',
 			},
 			{
 				key: '3',
-				value: '3',
 				label: 'L',
 				name: '3',
+				size: '3',
+				value: '3',
 			},
 			{
 				key: '4',
-				value: '4',
 				label: 'XL',
 				name: '4',
+				size: '4',
+				value: '4',
 			},
 			{
 				key: '5',
-				value: '5',
 				label: 'XXL',
 				name: 'XXL',
+				value: '5',
+				size: '5',
 			},
 		] );
 	} );

packages/components/src/font-size-picker/types.ts

@@ -95,4 +95,5 @@ export type FontSizeToggleGroupOption = {
 	value: number | string;
 	label: string;
 	name: string;
+	size?: number | string;
 };

packages/components/src/font-size-picker/utils.ts

@@ -112,7 +112,9 @@ function getSelectOptions(
 	];
 	return options.map( ( { slug, name, size } ) => ( {
 		key: slug,
-		name,
+		name: name || slug,
+		label: name || slug,
+		slug,
 		size,
 		__experimentalHint:
 			size && isSimpleCssValue( size ) && parseFloat( String( size ) ),
@@ -134,6 +136,7 @@ export function getToggleGroupOptions(
 		return {
 			key: slug,
 			value: size,
+			size,
 			label: labelAliases[ index ],
 			name: name || labelAliases[ index ],
 		};
@@ -142,13 +145,26 @@ export function getToggleGroupOptions(
 
 export function getSelectedOption(
 	fontSizes: FontSize[],
-	value: FontSizePickerProps[ 'value' ]
+	value: FontSizePickerProps[ 'value' ],
+	useSelectControl: boolean,
+	disableCustomFontSizes: boolean = false
 ): FontSizeOption {
 	if ( ! value ) {
 		return DEFAULT_FONT_SIZE_OPTION;
 	}
-	return (
-		fontSizes.find( ( font ) => font.size === value ) ||
-		CUSTOM_FONT_SIZE_OPTION
+
+	const fontSizeOptions = getFontSizeOptions(
+		useSelectControl,
+		fontSizes,
+		disableCustomFontSizes
 	);
+
+	const selectedOption = fontSizeOptions
+		? // @ts-ignore @TODO fix types for fontSizeOptions. Array.find() works on the same type only.
+		  fontSizeOptions.find(
+				( option: FontSizeSelectOption ) => option.size === value
+		  ) // @ts-ignore
+		: null;
+
+	return selectedOption || CUSTOM_FONT_SIZE_OPTION;
 }

packages/edit-site/src/components/global-styles/typography-panel.js

@@ -19,6 +19,7 @@ import { __ } from '@wordpress/i18n';
  * Internal dependencies
  */
 import { getSupportedGlobalStylesPanels, useSetting, useStyle } from './hooks';
+import { getTypographyFontSizeValue } from './typography-utils';
 
 export function useHasTypographyPanel( name ) {
 	const hasFontFamily = useHasFontFamilyControl( name );
@@ -151,7 +152,19 @@ export default function TypographyPanel( { name, element, headingLevel } ) {
 	} else if ( element && element !== 'text' ) {
 		prefix = `elements.${ element }.`;
 	}
+	const [ fluidTypography ] = useSetting( 'typography.fluid', name );
 	const [ fontSizes ] = useSetting( 'typography.fontSizes', name );
+
+	// Convert static font size values to fluid font sizes if fluidTypography is activated.
+	const fontSizesWithFluidValues = fontSizes.map( ( font ) => {
+		if ( !! fluidTypography ) {
+			font.size = getTypographyFontSizeValue( font, {
+				fluid: fluidTypography,
+			} );
+		}
+		return font;
+	} );
+
 	const disableCustomFontSizes = ! useSetting(
 		'typography.customFontSize',
 		name
@@ -240,7 +253,7 @@ export default function TypographyPanel( { name, element, headingLevel } ) {
 					<FontSizePicker
 						value={ fontSize }
 						onChange={ setFontSize }
-						fontSizes={ fontSizes }
+						fontSizes={ fontSizesWithFluidValues }
 						disableCustomFontSizes={ disableCustomFontSizes }
 						withReset={ false }
 						size="__unstable-large"

packages/edit-site/src/components/global-styles/use-global-styles-output.js

@@ -279,6 +279,13 @@ export function getStylesDeclarations(
 
 		// Calculate fluid typography rules where available.
 		if ( cssProperty === 'font-size' ) {
+			/*
+			 * getTypographyFontSizeValue() will check
+			 * if fluid typography has been activated and also
+			 * whether the incoming value can be converted to a fluid value.
+			 * Values that already have a "clamp()" function will not pass the test,
+			 * and therefore the original $value will be returned.
+			 */
 			ruleValue = getTypographyFontSizeValue(
 				{ size: ruleValue },
 				tree?.settings?.typography