From 394d74cefd488a46a02c190a1ec7011615be9443 Mon Sep 17 00:00:00 2001 From: ramonjd Date: Sat, 8 Oct 2022 16:51:25 +1100 Subject: [PATCH 1/6] Forked https://github.com/WordPress/gutenberg/pull/44761 --- .../wordpress-6.1/class-wp-theme-json-6-1.php | 9 ++- .../components/src/font-size-picker/index.tsx | 36 +++++++++-- .../components/src/font-size-picker/types.ts | 21 +++++-- .../components/src/font-size-picker/utils.ts | 30 +++++++-- .../src/components/global-styles/hooks.js | 12 +++- .../global-styles/typography-panel.js | 14 ++++- .../global-styles/use-global-styles-output.js | 7 +++ test/emptytheme/theme.json | 63 +++++++++++++++++-- 8 files changed, 170 insertions(+), 22 deletions(-) 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 524a28f10fbaa8..81f35830875437 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/src/font-size-picker/index.tsx b/packages/components/src/font-size-picker/index.tsx index bc5154801880d2..9059a7c39461b6 100644 --- a/packages/components/src/font-size-picker/index.tsx +++ b/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 = ( 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; diff --git a/packages/components/src/font-size-picker/utils.ts b/packages/components/src/font-size-picker/utils.ts index bb3dd42d4e238f..9b68e3ce46f64c 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 ) ), @@ -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; } diff --git a/packages/edit-site/src/components/global-styles/hooks.js b/packages/edit-site/src/components/global-styles/hooks.js index f6df419a46d008..888deac219f67d 100644 --- a/packages/edit-site/src/components/global-styles/hooks.js +++ b/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, 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 a632f532a174f4..59d7049da619cc 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,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 } ) { Date: Sat, 8 Oct 2022 17:18:14 +1100 Subject: [PATCH 2/6] Ensuring the font size picker select box shows the right labels --- .../components/src/font-size-picker/index.tsx | 32 ++-------- .../src/font-size-picker/test/utils.ts | 15 +++-- .../components/src/font-size-picker/types.ts | 22 ++----- .../components/src/font-size-picker/utils.ts | 11 ++-- .../src/components/global-styles/hooks.js | 12 +--- .../global-styles/typography-panel.js | 1 + test/emptytheme/theme.json | 63 ++----------------- 7 files changed, 32 insertions(+), 124 deletions(-) diff --git a/packages/components/src/font-size-picker/index.tsx b/packages/components/src/font-size-picker/index.tsx index 9059a7c39461b6..3a1f792c04139c 100644 --- a/packages/components/src/font-size-picker/index.tsx +++ b/packages/components/src/font-size-picker/index.tsx @@ -111,20 +111,17 @@ const UnforwardedFontSizePicker = ( ), [ shouldUseSelectControl, fontSizes, disableCustomFontSizes ] ); - const [ selectedOptionSlug, setSelectedOptionSlug ] = useState(); const selectedOption = getSelectedOption( fontSizes, value, shouldUseSelectControl, - disableCustomFontSizes, - selectedOptionSlug + disableCustomFontSizes ); - console.log( 'selectedOption', selectedOption ); + const isCustomValue = selectedOption.slug === CUSTOM_FONT_SIZE; const [ showCustomValueControl, setShowCustomValueControl ] = useState( ! disableCustomFontSizes && isCustomValue ); - const headerHint = useMemo( () => { if ( showCustomValueControl ) { return `(${ __( 'Custom' ) })`; @@ -236,26 +233,16 @@ const UnforwardedFontSizePicker = ( }: { selectedItem: FontSizeSelectOption; } ) => { - const selectedSelectControlOption = - getSelectedOption( - fontSizes, - selectedItem.size, - shouldUseSelectControl, - disableCustomFontSizes, - selectedItem?.slug - ); onChange?.( hasUnits ? selectedItem.size - : Number( selectedItem.size ), - selectedSelectControlOption + : Number( selectedItem.size ) ); if ( selectedItem.key === CUSTOM_FONT_SIZE ) { setShowCustomValueControl( true ); } - setSelectedOptionSlug( selectedItem?.slug ); } } size={ size } /> @@ -266,17 +253,9 @@ const UnforwardedFontSizePicker = ( label={ __( 'Font size' ) } hideLabelFromVision value={ value } - onChange={ ( newValue, optionSlug ) => { - const groupSelectedOption = getSelectedOption( - fontSizes, - newValue, - shouldUseSelectControl, - disableCustomFontSizes, - optionSlug - ); + onChange={ ( newValue ) => { onChange?.( - hasUnits ? newValue : Number( newValue ), - groupSelectedOption + hasUnits ? newValue : Number( newValue ) ); } } isBlock @@ -287,7 +266,6 @@ const UnforwardedFontSizePicker = ( { ).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 688354d9f08627..ec193f51bf6759 100644 --- a/packages/components/src/font-size-picker/types.ts +++ b/packages/components/src/font-size-picker/types.ts @@ -22,15 +22,12 @@ export type FontSizePickerProps = { */ fontSizes?: FontSize[]; /** - * A function that receives the new font size value and an optional selectedOption object, + * A function that receives the new font size value. * 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, - selectedOption?: FontSizeSelectOption | FontSizeOption - ) => void; + onChange?: ( value: number | string | undefined ) => void; /** * The current font size value. */ @@ -84,26 +81,19 @@ export type FontSize = { slug: string; }; -export type FontSizeFluidOptions = { - max?: string; - min?: string; -}; - export type FontSizeOption = Omit< FontSize, 'size' > & - Partial< Pick< FontSize, 'size' > > & { - fluid?: FontSizeFluidOptions; - }; + Partial< Pick< FontSize, 'size' > >; export type FontSizeSelectOption = Pick< FontSizeOption, 'size' > & { key: string; name?: string; - slug?: string; - __experimentalHint?: ReactNode; + __experimentalHint: ReactNode; }; -export type FontSizeToggleGroupOption = FontSize & { +export type FontSizeToggleGroupOption = { key: string; 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 9b68e3ce46f64c..b1779eeb1d25e3 100644 --- a/packages/components/src/font-size-picker/utils.ts +++ b/packages/components/src/font-size-picker/utils.ts @@ -136,10 +136,9 @@ export function getToggleGroupOptions( return { key: slug, value: size, + size, label: labelAliases[ index ], name: name || labelAliases[ index ], - size, - slug, }; } ); } @@ -148,8 +147,7 @@ export function getSelectedOption( fontSizes: FontSize[], value: FontSizePickerProps[ 'value' ], useSelectControl: boolean, - disableCustomFontSizes: boolean = false, - slug: string | undefined + disableCustomFontSizes: boolean = false ): FontSizeOption { if ( ! value ) { return DEFAULT_FONT_SIZE_OPTION; @@ -160,13 +158,12 @@ export function getSelectedOption( 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 + ( option: FontSizeSelectOption ) => option.size === value ) // @ts-ignore : null; diff --git a/packages/edit-site/src/components/global-styles/hooks.js b/packages/edit-site/src/components/global-styles/hooks.js index 888deac219f67d..f6df419a46d008 100644 --- a/packages/edit-site/src/components/global-styles/hooks.js +++ b/packages/edit-site/src/components/global-styles/hooks.js @@ -19,7 +19,6 @@ import { */ import { getValueFromVariable, getPresetVariableFromValue } from './utils'; import { GlobalStylesContext } from './context'; -import { getTypographyFontSizeValue } from './typography-utils'; const EMPTY_CONFIG = { settings: {}, styles: {} }; @@ -109,19 +108,10 @@ export function useStyle( path, blockName, source = 'all' ) { ? `styles.${ path }` : `styles.blocks.${ blockName }.${ path }`; - const setStyle = ( newValue, presetSettings = null ) => { + const setStyle = ( newValue ) => { 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, 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 59d7049da619cc..82df0a57f20599 100644 --- a/packages/edit-site/src/components/global-styles/typography-panel.js +++ b/packages/edit-site/src/components/global-styles/typography-panel.js @@ -155,6 +155,7 @@ export default function TypographyPanel( { name, element, headingLevel } ) { 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, { diff --git a/test/emptytheme/theme.json b/test/emptytheme/theme.json index ce9258489f6199..ed2d7b8d0946aa 100644 --- a/test/emptytheme/theme.json +++ b/test/emptytheme/theme.json @@ -2,63 +2,10 @@ "version": 2, "settings": { "appearanceTools": true, - "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" - } - } - ] + "layout": { + "contentSize": "840px", + "wideSize": "1100px" } - } + }, + "patterns": [ "short-text-surrounded-by-round-images", "partner-logos" ] } From 2e06a6747b6c8df9ed27e8f90a86167f49da3a94 Mon Sep 17 00:00:00 2001 From: ramonjd Date: Sat, 8 Oct 2022 21:54:30 +1100 Subject: [PATCH 3/6] update comment. Typescript has beaten me. It's much more convenient to use getFontSizeOptions(), but I guess we'll have to refactor. --- packages/components/src/font-size-picker/utils.ts | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/packages/components/src/font-size-picker/utils.ts b/packages/components/src/font-size-picker/utils.ts index b1779eeb1d25e3..f7338e1972bda3 100644 --- a/packages/components/src/font-size-picker/utils.ts +++ b/packages/components/src/font-size-picker/utils.ts @@ -159,9 +159,8 @@ export function getSelectedOption( disableCustomFontSizes ); - // @TODO fix types for fontSizeOptions. const selectedOption = fontSizeOptions - ? // @ts-ignore + ? // @ts-ignore @TODO fix types for fontSizeOptions. Array.find() works on the same type only. fontSizeOptions.find( ( option: FontSizeSelectOption ) => option.size === value ) // @ts-ignore From 9d5cfe70697e25db9c73d35cab0f7378e6c6390a Mon Sep 17 00:00:00 2001 From: ramonjd Date: Mon, 10 Oct 2022 08:55:53 +1100 Subject: [PATCH 4/6] Adding comment about Typescript bug (YAY, it wasn't me being dumb with TS for once) --- packages/components/src/font-size-picker/utils.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/components/src/font-size-picker/utils.ts b/packages/components/src/font-size-picker/utils.ts index f7338e1972bda3..02427e041993b4 100644 --- a/packages/components/src/font-size-picker/utils.ts +++ b/packages/components/src/font-size-picker/utils.ts @@ -160,7 +160,8 @@ export function getSelectedOption( ); const selectedOption = fontSizeOptions - ? // @ts-ignore @TODO fix types for fontSizeOptions. Array.find() works on the same type only. + ? // @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 From f5ecb568c5bcdd43aaeba5093b9c91c44a93cea2 Mon Sep 17 00:00:00 2001 From: ramonjd Date: Mon, 10 Oct 2022 11:17:46 +1100 Subject: [PATCH 5/6] Added tests yo --- .../global-styles/test/typography-utils.js | 23 +++++++++++++ .../global-styles/typography-utils.js | 34 +++++++++++++------ 2 files changed, 47 insertions(+), 10 deletions(-) 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 cbc0fe53a3390d..e4ef4ed4b95d33 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-utils.js b/packages/edit-site/src/components/global-styles/typography-utils.js index 464021dfa0b9fc..6d0612bc0ecf74 100644 --- a/packages/edit-site/src/components/global-styles/typography-utils.js +++ b/packages/edit-site/src/components/global-styles/typography-utils.js @@ -4,19 +4,27 @@ * --------------------------------------------------------------- */ +/** + * @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 */ @@ -40,7 +48,13 @@ export function getTypographyFontSizeValue( preset, typographySettings ) { return defaultSize; } - const fluidFontSizeSettings = preset?.fluid || {}; + const fluidFontSizeSettings = + typeof preset?.fluid === 'object' + ? preset.fluid + : { + min: undefined, + max: undefined, + }; // Try to grab explicit min and max fluid font sizes. let minimumFontSizeRaw = fluidFontSizeSettings?.min; From 2ceb581f19609c0a27b8ff98f8d6a2b86de5f276 Mon Sep 17 00:00:00 2001 From: ramonjd Date: Mon, 10 Oct 2022 11:39:31 +1100 Subject: [PATCH 6/6] Changeo loggo --- packages/components/CHANGELOG.md | 3 +++ 1 file changed, 3 insertions(+) diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md index a81579734ed8c8..f462a29f65b1be 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