Fluid Typography: ensure global styles preset fluid sizes are calcula…

…ted correctly (#44791)

* Forked #44761

* Ensuring the font size picker select box shows the right labels

* update comment. Typescript has beaten me. It's much more convenient to use getFontSizeOptions(), but I guess we'll have to refactor.

* Adding comment about Typescript bug (YAY, it wasn't me being dumb with TS for once)

* Added tests yo

* Changeo loggo

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/CHANGELOG.md

@@ -2,6 +2,9 @@
 
 ## Unreleased
 
+### Bug Fix 
+-   `FontSizePicker`: Ensure that fluid font size presets appear correctly in the UI controls ([#44791](https://github.com/WordPress/gutenberg/pull/44791))
+
 ## 21.2.0 (2022-10-05)
 
 ### Enhancements

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,27 @@ 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
+		? // @TODO Array.find() triggers error on array types unions. It's a bug. See: https://github.com/microsoft/TypeScript/issues/44373.
+		  // @ts-ignore
+		  fontSizeOptions.find(
+				( option: FontSizeSelectOption ) => option.size === value
+		  ) // @ts-ignore
+		: null;
+
+	return selectedOption || CUSTOM_FONT_SIZE_OPTION;
 }

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

@@ -34,17 +34,41 @@ describe( 'typography utils', () => {
 					},
 					expected: '28px',
 				},
-				// Should coerce number to `px` and return non-fluid value.
+				// Should coerce number to `px` and return fluid value.
 				{
 					preset: {
 						size: 33,
+						fluid: true,
 					},
 					typographySettings: {
 						fluid: true,
 					},
 					expected:
 						'clamp(24.75px, 1.546875rem + ((1vw - 7.68px) * 2.975), 49.5px)',
 				},
+				// Should return incoming value when already clamped.
+				{
+					preset: {
+						size: 'clamp(21px, 1.3125rem + ((1vw - 7.68px) * 2.524), 42px)',
+						fluid: false,
+					},
+					typographySettings: {
+						fluid: true,
+					},
+					expected:
+						'clamp(21px, 1.3125rem + ((1vw - 7.68px) * 2.524), 42px)',
+				},
+				// Should return incoming value with unsupported unit.
+				{
+					preset: {
+						size: '1000%',
+						fluid: false,
+					},
+					typographySettings: {
+						fluid: true,
+					},
+					expected: '1000%',
+				},
 				// Should return fluid value.
 				{
 					preset: {

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/typography-utils.js

@@ -9,19 +9,27 @@
  */
 import { getComputedFluidTypographyValue } from '@wordpress/block-editor';
 
+/**
+ * @typedef {Object} FluidPreset
+ * @property {string|undefined} max A maximum font size value.
+ * @property {string|undefined} min A minimum font size value.
+ */
+
+/**
+ * @typedef {Object} Preset
+ * @property {string}                        size  A default font size.
+ * @property {string}                        name  A font size name, displayed in the UI.
+ * @property {string}                        slug  A font size slug
+ * @property {boolean|FluidPreset|undefined} fluid A font size slug
+ */
+
 /**
  * Returns a font-size value based on a given font-size preset.
  * Takes into account fluid typography parameters and attempts to return a css formula depending on available, valid values.
  *
- * @param {Object}           preset
- * @param {string}           preset.size              A default font size.
- * @param {string}           preset.name              A font size name, displayed in the UI.
- * @param {string}           preset.slug              A font size slug.
- * @param {Object}           preset.fluid
- * @param {string|undefined} preset.fluid.max         A maximum font size value.
- * @param {string|undefined} preset.fluid.min         A minimum font size value.
- * @param {Object}           typographySettings
- * @param {boolean}          typographySettings.fluid Whether fluid typography is enabled.
+ * @param {Preset}  preset
+ * @param {Object}  typographySettings
+ * @param {boolean} typographySettings.fluid Whether fluid typography is enabled.
  *
  * @return {string} An font-size value
  */

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