diff --git a/lib/compat/wordpress-6.1/class-wp-theme-json-6-1.php b/lib/compat/wordpress-6.1/class-wp-theme-json-6-1.php index 524a28f10fbaa..81f3583087543 100644 --- a/lib/compat/wordpress-6.1/class-wp-theme-json-6-1.php +++ b/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 ) ); } diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md index a81579734ed8c..f462a29f65b1b 100644 --- a/packages/components/CHANGELOG.md +++ b/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 diff --git a/packages/components/src/font-size-picker/index.tsx b/packages/components/src/font-size-picker/index.tsx index bc5154801880d..3a1f792c04139 100644 --- a/packages/components/src/font-size-picker/index.tsx +++ b/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 diff --git a/packages/components/src/font-size-picker/test/utils.ts b/packages/components/src/font-size-picker/test/utils.ts index 656c6473cd861..d3838314c61ad 100644 --- a/packages/components/src/font-size-picker/test/utils.ts +++ b/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', }, ] ); } ); diff --git a/packages/components/src/font-size-picker/types.ts b/packages/components/src/font-size-picker/types.ts index 2c824125bb7e1..ec193f51bf675 100644 --- a/packages/components/src/font-size-picker/types.ts +++ b/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; }; diff --git a/packages/components/src/font-size-picker/utils.ts b/packages/components/src/font-size-picker/utils.ts index bb3dd42d4e238..02427e041993b 100644 --- a/packages/components/src/font-size-picker/utils.ts +++ b/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; } diff --git a/packages/edit-site/src/components/global-styles/test/typography-utils.js b/packages/edit-site/src/components/global-styles/test/typography-utils.js index cbc0fe53a3390..e4ef4ed4b95d3 100644 --- a/packages/edit-site/src/components/global-styles/test/typography-utils.js +++ b/packages/edit-site/src/components/global-styles/test/typography-utils.js @@ -26,6 +26,29 @@ describe( 'typography utils', () => { }, expected: '28px', }, + // 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: { diff --git a/packages/edit-site/src/components/global-styles/typography-panel.js b/packages/edit-site/src/components/global-styles/typography-panel.js index a632f532a174f..82df0a57f2059 100644 --- a/packages/edit-site/src/components/global-styles/typography-panel.js +++ b/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 } ) {