Forked #44761

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,11 +111,20 @@ const UnforwardedFontSizePicker = (
 			),
 		[ shouldUseSelectControl, fontSizes, disableCustomFontSizes ]
 	);
-	const selectedOption = getSelectedOption( fontSizes, value );
+	const [ selectedOptionSlug, setSelectedOptionSlug ] = useState();
+	const selectedOption = getSelectedOption(
+		fontSizes,
+		value,
+		shouldUseSelectControl,
+		disableCustomFontSizes,
+		selectedOptionSlug
+	);
+	console.log( 'selectedOption', selectedOption );
 	const isCustomValue = selectedOption.slug === CUSTOM_FONT_SIZE;
 	const [ showCustomValueControl, setShowCustomValueControl ] = useState(
 		! disableCustomFontSizes && isCustomValue
 	);
+
 	const headerHint = useMemo( () => {
 		if ( showCustomValueControl ) {
 			return `(${ __( 'Custom' ) })`;
@@ -227,16 +236,26 @@ const UnforwardedFontSizePicker = (
 								}: {
 									selectedItem: FontSizeSelectOption;
 								} ) => {
+									const selectedSelectControlOption =
+										getSelectedOption(
+											fontSizes,
+											selectedItem.size,
+											shouldUseSelectControl,
+											disableCustomFontSizes,
+											selectedItem?.slug
+										);
 									onChange?.(
 										hasUnits
 											? selectedItem.size
-											: Number( selectedItem.size )
+											: Number( selectedItem.size ),
+										selectedSelectControlOption
 									);
 									if (
 										selectedItem.key === CUSTOM_FONT_SIZE
 									) {
 										setShowCustomValueControl( true );
 									}
+									setSelectedOptionSlug( selectedItem?.slug );
 								} }
 								size={ size }
 							/>
@@ -247,9 +266,17 @@ const UnforwardedFontSizePicker = (
 							label={ __( 'Font size' ) }
 							hideLabelFromVision
 							value={ value }
-							onChange={ ( newValue ) => {
+							onChange={ ( newValue, optionSlug ) => {
+								const groupSelectedOption = getSelectedOption(
+									fontSizes,
+									newValue,
+									shouldUseSelectControl,
+									disableCustomFontSizes,
+									optionSlug
+								);
 								onChange?.(
-									hasUnits ? newValue : Number( newValue )
+									hasUnits ? newValue : Number( newValue ),
+									groupSelectedOption
 								);
 							} }
 							isBlock
@@ -260,6 +287,7 @@ const UnforwardedFontSizePicker = (
 									<ToggleGroupControlOption
 										key={ option.key }
 										value={ option.value }
+										slug={ option.slug }
 										label={ option.label }
 										aria-label={ option.name }
 										showTooltip={ true }

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

@@ -22,12 +22,15 @@ export type FontSizePickerProps = {
 	 */
 	fontSizes?: FontSize[];
 	/**
-	 * A function that receives the new font size value.
+	 * A function that receives the new font size value and an optional selectedOption object,
 	 * If onChange is called without any parameter, it should reset the value,
 	 * attending to what reset means in that context, e.g., set the font size to
 	 * undefined or set the font size a starting value.
 	 */
-	onChange?: ( value: number | string | undefined ) => void;
+	onChange?: (
+		value: number | string | undefined,
+		selectedOption?: FontSizeSelectOption | FontSizeOption
+	) => void;
 	/**
 	 * The current font size value.
 	 */
@@ -81,16 +84,24 @@ export type FontSize = {
 	slug: string;
 };
 
+export type FontSizeFluidOptions = {
+	max?: string;
+	min?: string;
+};
+
 export type FontSizeOption = Omit< FontSize, 'size' > &
-	Partial< Pick< FontSize, 'size' > >;
+	Partial< Pick< FontSize, 'size' > > & {
+		fluid?: FontSizeFluidOptions;
+	};
 
 export type FontSizeSelectOption = Pick< FontSizeOption, 'size' > & {
 	key: string;
 	name?: string;
-	__experimentalHint: ReactNode;
+	slug?: string;
+	__experimentalHint?: ReactNode;
 };
 
-export type FontSizeToggleGroupOption = {
+export type FontSizeToggleGroupOption = FontSize & {
 	key: string;
 	value: number | string;
 	label: 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 ) ),
@@ -136,19 +138,37 @@ export function getToggleGroupOptions(
 			value: size,
 			label: labelAliases[ index ],
 			name: name || labelAliases[ index ],
+			size,
+			slug,
 		};
 	} );
 }
 
 export function getSelectedOption(
 	fontSizes: FontSize[],
-	value: FontSizePickerProps[ 'value' ]
+	value: FontSizePickerProps[ 'value' ],
+	useSelectControl: boolean,
+	disableCustomFontSizes: boolean = false,
+	slug: string | undefined
 ): 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
 	);
+console.log( 'fontSizeOptions', fontSizeOptions, value, slug );
+	// @TODO fix types for fontSizeOptions.
+	const selectedOption = fontSizeOptions
+		? // @ts-ignore
+		  fontSizeOptions.find(
+				( option: FontSizeSelectOption ) =>
+					slug === option.slug || option.size === value
+		  ) // @ts-ignore
+		: null;
+
+	return selectedOption || CUSTOM_FONT_SIZE_OPTION;
 }

packages/edit-site/src/components/global-styles/hooks.js

@@ -19,6 +19,7 @@ import {
  */
 import { getValueFromVariable, getPresetVariableFromValue } from './utils';
 import { GlobalStylesContext } from './context';
+import { getTypographyFontSizeValue } from './typography-utils';
 
 const EMPTY_CONFIG = { settings: {}, styles: {} };
 
@@ -108,10 +109,19 @@ export function useStyle( path, blockName, source = 'all' ) {
 		? `styles.${ path }`
 		: `styles.blocks.${ blockName }.${ path }`;
 
-	const setStyle = ( newValue ) => {
+	const setStyle = ( newValue, presetSettings = null ) => {
 		setUserConfig( ( currentConfig ) => {
 			// Deep clone `currentConfig` to avoid mutating it later.
 			const newUserConfig = JSON.parse( JSON.stringify( currentConfig ) );
+
+			// Convert font size styles to fluid if fluid is activated.
+			if ( finalPath.indexOf( 'typography.fontSize' ) !== -1 && presetSettings ) {
+				newValue = getTypographyFontSizeValue(
+			{ ...presetSettings, size: newValue },
+					mergedConfig?.settings?.typography
+				);
+			}
+
 			set(
 				newUserConfig,
 				finalPath,

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,18 @@ 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 );
+
+	const fontSizesWithFluidValues = fontSizes.map( ( font ) => {
+		if ( !! fluidTypography ) {
+			font.size = getTypographyFontSizeValue( font, {
+				fluid: fluidTypography,
+			} );
+		}
+		return font;
+	} );
+
 	const disableCustomFontSizes = ! useSetting(
 		'typography.customFontSize',
 		name
@@ -240,7 +252,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

test/emptytheme/theme.json

@@ -2,10 +2,63 @@
 	"version": 2,
 	"settings": {
 		"appearanceTools": true,
-		"layout": {
-			"contentSize": "840px",
-			"wideSize": "1100px"
+		"typography": {
+			"fluid": true,
+			"fontSizes": [
+				{
+					"fluid": {
+						"min": "0.875rem",
+						"max": "1rem"
+					},
+					"size": "1rem",
+					"slug": "small"
+				},
+				{
+					"fluid": {
+						"min": "1rem",
+						"max": "1.125rem"
+					},
+					"size": "1.125rem",
+					"slug": "medium"
+				},
+				{
+					"size": "1.9rem",
+					"slug": "not-so-large",
+					"fluid": {
+						"min": "1.9rem",
+						"max": "2rem"
+					}
+				},
+				{
+					"size": "3.5rem",
+					"slug": "large",
+					"fluid": {
+						"min": "3rem",
+						"max": "5rem"
+					}
+				},
+				{
+					"size": "2.25rem",
+					"slug": "x-large",
+					"fluid": false
+				},
+				{
+					"size": "10rem",
+					"slug": "xx-large",
+					"fluid": {
+						"min": "4rem",
+						"max": "20rem"
+					}
+				},
+				{
+					"size": "14rem",
+					"slug": "Colossal",
+					"fluid": {
+						"min": "8rem",
+						"max": "30rem"
+					}
+				}
+			]
 		}
-	},
-	"patterns": [ "short-text-surrounded-by-round-images", "partner-logos" ]
+	}
 }