From a993bfd8e108561bc2ca37a13415847d87c2019f Mon Sep 17 00:00:00 2001 From: Ramon Date: Thu, 1 Jun 2023 16:21:26 +1000 Subject: [PATCH] Fluid typography: ensure max viewport width is used in the editor (#51146) * #49815 added `settings.layout.wideSize` as the default value for the maximum viewport size in relation to calculating fluid fontsize values. Unfortunately this maxViewPortWidth value was not being passed to `getTypographyFontSizeValue()` This commit correct this omission and adds extra unit tests to both the JS and PHP versions. * To avoid backwards compat problems I'm trying to keep the function signature the same, hence the gymnastics here. Because we support fluid: true and fluid: {...values}, we have to ensure the param object is correctly set so that we can know if fluid typography is enabled or not. The alternative could be a third argument to the `getTypographyFontSizeValue()` function, e.g., `isFluidEnabled` * My blod is typo * Why chain? Break the chains! --- .../global-styles/test/typography-utils.js | 52 +++++++++++++++++++ .../global-styles/typography-utils.js | 14 ++--- .../global-styles/use-global-styles-output.js | 14 ++++- .../src/components/global-styles/utils.js | 16 +++++- phpunit/block-supports/typography-test.php | 24 +++++++++ schemas/json/theme.json | 2 +- 6 files changed, 111 insertions(+), 11 deletions(-) diff --git a/packages/block-editor/src/components/global-styles/test/typography-utils.js b/packages/block-editor/src/components/global-styles/test/typography-utils.js index a91a8f39e8eccc..29f0ff52a95010 100644 --- a/packages/block-editor/src/components/global-styles/test/typography-utils.js +++ b/packages/block-editor/src/components/global-styles/test/typography-utils.js @@ -170,6 +170,58 @@ describe( 'typography utils', () => { 'clamp(17.905px, 1.119rem + ((1vw - 3.2px) * 0.789), 28px)', }, + { + message: + 'returns clamp value where min and max fluid values defined', + preset: { + size: '80px', + fluid: { + min: '70px', + max: '125px', + }, + }, + typographySettings: { + fluid: true, + }, + expected: + 'clamp(70px, 4.375rem + ((1vw - 3.2px) * 4.297), 125px)', + }, + + { + message: + 'should apply maxViewPortWidth as maximum viewport width', + preset: { + size: '80px', + fluid: { + min: '70px', + max: '125px', + }, + }, + typographySettings: { + fluid: { + maxViewPortWidth: '1100px', + }, + }, + expected: + 'clamp(70px, 4.375rem + ((1vw - 3.2px) * 7.051), 125px)', + }, + + { + message: 'returns clamp value where max is equal to size', + preset: { + size: '7.8125rem', + fluid: { + min: '4.375rem', + max: '7.8125rem', + }, + }, + typographySettings: { + fluid: true, + }, + expected: + 'clamp(4.375rem, 4.375rem + ((1vw - 0.2rem) * 4.298), 7.8125rem)', + }, + { message: 'should return clamp value if min font size is greater than max', diff --git a/packages/block-editor/src/components/global-styles/typography-utils.js b/packages/block-editor/src/components/global-styles/typography-utils.js index bfbc2569211c3d..6d7c7f9f910cc9 100644 --- a/packages/block-editor/src/components/global-styles/typography-utils.js +++ b/packages/block-editor/src/components/global-styles/typography-utils.js @@ -20,17 +20,16 @@ import { getComputedFluidTypographyValue } from '../font-sizes/fluid-utils'; * @property {?string|?number} 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 + * @property {boolean|FluidPreset|undefined} fluid Specifies the minimum and maximum font size value of a fluid font size. */ /** * @typedef {Object} TypographySettings - * @property {?string|?number} size A default font size. - * @property {?string} minViewPortWidth Minimum viewport size from which type will have fluidity. Optional if size is specified. - * @property {?string} maxViewPortWidth Maximum size up to which type will have fluidity. Optional if size is specified. - * @property {?number} scaleFactor A scale factor to determine how fast a font scales within boundaries. Optional. - * @property {?number} minFontSizeFactor How much to scale defaultFontSize by to derive minimumFontSize. Optional. - * @property {?string} minFontSize The smallest a calculated font size may be. Optional. + * @property {?string} minViewPortWidth Minimum viewport size from which type will have fluidity. Optional if size is specified. + * @property {?string} maxViewPortWidth Maximum size up to which type will have fluidity. Optional if size is specified. + * @property {?number} scaleFactor A scale factor to determine how fast a font scales within boundaries. Optional. + * @property {?number} minFontSizeFactor How much to scale defaultFontSize by to derive minimumFontSize. Optional. + * @property {?string} minFontSize The smallest a calculated font size may be. Optional. */ /** @@ -77,6 +76,7 @@ export function getTypographyFontSizeValue( preset, typographySettings ) { maximumFontSize: preset?.fluid?.max, fontSize: defaultSize, minimumFontSizeLimit: fluidTypographySettings?.minFontSize, + maximumViewPortWidth: fluidTypographySettings?.maxViewPortWidth, } ); if ( !! fluidFontSizeValue ) { diff --git a/packages/block-editor/src/components/global-styles/use-global-styles-output.js b/packages/block-editor/src/components/global-styles/use-global-styles-output.js index 55dbab06de1529..d496041627d070 100644 --- a/packages/block-editor/src/components/global-styles/use-global-styles-output.js +++ b/packages/block-editor/src/components/global-styles/use-global-styles-output.js @@ -396,9 +396,21 @@ export function getStylesDeclarations( * Values that already have a "clamp()" function will not pass the test, * and therefore the original $value will be returned. */ + const typographySettings = + !! tree?.settings?.typography?.fluid && + tree?.settings?.layout?.wideSize + ? { + fluid: { + maxViewPortWidth: tree.settings.layout.wideSize, + ...tree.settings.typography.fluid, + }, + } + : { + fluid: tree?.settings?.typography?.fluid, + }; ruleValue = getTypographyFontSizeValue( { size: ruleValue }, - tree?.settings?.typography + typographySettings ); } diff --git a/packages/block-editor/src/components/global-styles/utils.js b/packages/block-editor/src/components/global-styles/utils.js index 0207110ae52234..c25b70bbab89d5 100644 --- a/packages/block-editor/src/components/global-styles/utils.js +++ b/packages/block-editor/src/components/global-styles/utils.js @@ -73,8 +73,20 @@ export const PRESET_METADATA = [ }, { path: [ 'typography', 'fontSizes' ], - valueFunc: ( preset, { typography: typographySettings } ) => - getTypographyFontSizeValue( preset, typographySettings ), + valueFunc: ( preset, settings ) => + getTypographyFontSizeValue( + preset, + !! settings?.typography?.fluid && settings?.layout?.wideSize + ? { + fluid: { + maxViewPortWidth: settings?.layout?.wideSize, + ...settings?.typography?.fluid, + }, + } + : { + fluid: settings?.typography?.fluid, + } + ), valueKey: 'size', cssVarInfix: 'font-size', classes: [ { classSuffix: 'font-size', propertyName: 'font-size' } ], diff --git a/phpunit/block-supports/typography-test.php b/phpunit/block-supports/typography-test.php index 6fd81bcbeca6ca..cfb3f19a1a7ae0 100644 --- a/phpunit/block-supports/typography-test.php +++ b/phpunit/block-supports/typography-test.php @@ -432,6 +432,30 @@ public function data_generate_font_size_preset_fixtures() { 'expected_output' => 'clamp(17.905px, 1.119rem + ((1vw - 3.2px) * 0.789), 28px)', ), + 'returns clamp value where min and max fluid values defined' => array( + 'font_size' => array( + 'size' => '80px', + 'fluid' => array( + 'min' => '70px', + 'max' => '125px', + ), + ), + 'should_use_fluid_typography' => true, + 'expected_output' => 'clamp(70px, 4.375rem + ((1vw - 3.2px) * 4.297), 125px)', + ), + + 'returns clamp value where max is equal to size' => array( + 'font_size' => array( + 'size' => '7.8125rem', + 'fluid' => array( + 'min' => '4.375rem', + 'max' => '7.8125rem', + ), + ), + 'should_use_fluid_typography' => true, + 'expected_output' => 'clamp(4.375rem, 4.375rem + ((1vw - 0.2rem) * 4.298), 7.8125rem)', + ), + 'returns clamp value if min font size is greater than max' => array( 'font_size' => array( 'size' => '3rem', diff --git a/schemas/json/theme.json b/schemas/json/theme.json index 5f9fd13c041575..8c2f06d5c7c22f 100644 --- a/schemas/json/theme.json +++ b/schemas/json/theme.json @@ -487,7 +487,7 @@ "type": "string" }, "fluid": { - "description": "Specifics the minimum and maximum font size value of a fluid font size. Set to `false` to bypass fluid calculations and use the static `size` value.", + "description": "Specifies the minimum and maximum font size value of a fluid font size. Set to `false` to bypass fluid calculations and use the static `size` value.", "oneOf": [ { "type": "object",