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;