From 0cc7625edfd3768123beb446443b9b730ed2c5c4 Mon Sep 17 00:00:00 2001 From: ramon Date: Thu, 1 Jun 2023 12:33:11 +1000 Subject: [PATCH 1/4] #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. --- .../global-styles/test/typography-utils.js | 52 +++++++++++++++++++ .../global-styles/typography-utils.js | 14 ++--- .../global-styles/use-global-styles-output.js | 7 ++- .../src/components/global-styles/utils.js | 9 +++- phpunit/block-supports/typography-test.php | 24 +++++++++ 5 files changed, 96 insertions(+), 10 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..75d2a9039accee 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 Specifics 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..0767b059f8fd4c 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 @@ -398,7 +398,12 @@ export function getStylesDeclarations( */ ruleValue = getTypographyFontSizeValue( { size: ruleValue }, - tree?.settings?.typography + { + fluid: { + maxViewPortWidth: tree?.settings?.layout?.wideSize, + ...tree?.settings?.typography?.fluid, + }, + } ); } diff --git a/packages/block-editor/src/components/global-styles/utils.js b/packages/block-editor/src/components/global-styles/utils.js index 0207110ae52234..99376ee78d1313 100644 --- a/packages/block-editor/src/components/global-styles/utils.js +++ b/packages/block-editor/src/components/global-styles/utils.js @@ -73,8 +73,13 @@ export const PRESET_METADATA = [ }, { path: [ 'typography', 'fontSizes' ], - valueFunc: ( preset, { typography: typographySettings } ) => - getTypographyFontSizeValue( preset, typographySettings ), + valueFunc: ( preset, settings ) => + getTypographyFontSizeValue( preset, { + fluid: { + maxViewPortWidth: settings?.layout?.wideSize, + ...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', From 2afe3577c8e8764d228749817985bd026c87d203 Mon Sep 17 00:00:00 2001 From: ramon Date: Thu, 1 Jun 2023 13:43:55 +1000 Subject: [PATCH 2/4] 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` --- .../global-styles/use-global-styles-output.js | 20 +++++++++++++------ .../src/components/global-styles/utils.js | 19 ++++++++++++------ 2 files changed, 27 insertions(+), 12 deletions(-) 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 0767b059f8fd4c..d4728a053c960b 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,14 +396,22 @@ 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 }, - { - fluid: { - maxViewPortWidth: tree?.settings?.layout?.wideSize, - ...tree?.settings?.typography?.fluid, - }, - } + typographySettings ); } diff --git a/packages/block-editor/src/components/global-styles/utils.js b/packages/block-editor/src/components/global-styles/utils.js index 99376ee78d1313..c25b70bbab89d5 100644 --- a/packages/block-editor/src/components/global-styles/utils.js +++ b/packages/block-editor/src/components/global-styles/utils.js @@ -74,12 +74,19 @@ export const PRESET_METADATA = [ { path: [ 'typography', 'fontSizes' ], valueFunc: ( preset, settings ) => - getTypographyFontSizeValue( preset, { - fluid: { - maxViewPortWidth: settings?.layout?.wideSize, - ...settings?.typography?.fluid, - }, - } ), + 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' } ], From a247dfd15c194401dc7ae5e24557e449d4de9e48 Mon Sep 17 00:00:00 2001 From: ramon Date: Thu, 1 Jun 2023 15:38:18 +1000 Subject: [PATCH 3/4] My blod is typo --- .../src/components/global-styles/typography-utils.js | 2 +- schemas/json/theme.json | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) 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 75d2a9039accee..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,7 +20,7 @@ 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 Specifics the minimum and maximum font size value of a fluid font size. + * @property {boolean|FluidPreset|undefined} fluid Specifies the minimum and maximum font size value of a fluid font size. */ /** 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", From dfb71317464b3ac483ec1c5e1bb69c5c08e9e181 Mon Sep 17 00:00:00 2001 From: ramon Date: Thu, 1 Jun 2023 15:39:37 +1000 Subject: [PATCH 4/4] Why chain? Break the chains! --- .../src/components/global-styles/use-global-styles-output.js | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) 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 d4728a053c960b..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 @@ -401,9 +401,8 @@ export function getStylesDeclarations( tree?.settings?.layout?.wideSize ? { fluid: { - maxViewPortWidth: - tree?.settings?.layout?.wideSize, - ...tree?.settings?.typography?.fluid, + maxViewPortWidth: tree.settings.layout.wideSize, + ...tree.settings.typography.fluid, }, } : {