From cacb970df2b3bbc67072f84bdd7ede32612f0451 Mon Sep 17 00:00:00 2001 From: ramon Date: Fri, 28 Jul 2023 10:33:05 +1000 Subject: [PATCH 1/3] Viewport is one word, so we shouldn't camelCase it. One day the max/min viewport widths will be configurable in theme.json, let's make sure we start off with consistency now. --- packages/block-editor/README.md | 4 +-- .../src/components/font-sizes/fluid-utils.js | 30 +++++++++---------- .../components/font-sizes/test/fluid-utils.js | 12 ++++---- .../global-styles/test/typography-utils.js | 12 ++++---- .../global-styles/typography-utils.js | 8 ++--- 5 files changed, 33 insertions(+), 33 deletions(-) diff --git a/packages/block-editor/README.md b/packages/block-editor/README.md index 2c42b42afc442..44250ec98f586 100644 --- a/packages/block-editor/README.md +++ b/packages/block-editor/README.md @@ -417,8 +417,8 @@ const fontSize = getComputedFluidTypographyValue( { _Parameters_ - _args_ `Object`: -- _args.minimumViewPortWidth_ `?string`: Minimum viewport size from which type will have fluidity. Optional if fontSize is specified. -- _args.maximumViewPortWidth_ `?string`: Maximum size up to which type will have fluidity. Optional if fontSize is specified. +- _args.minimumViewportWidth_ `?string`: Minimum viewport size from which type will have fluidity. Optional if fontSize is specified. +- _args.maximumViewportWidth_ `?string`: Maximum size up to which type will have fluidity. Optional if fontSize is specified. - _args.fontSize_ `[string|number]`: Size to derive maximumFontSize and minimumFontSize from, if necessary. Optional if minimumFontSize and maximumFontSize are specified. - _args.maximumFontSize_ `?string`: Maximum font size for any clamp() calculation. Optional. - _args.minimumFontSize_ `?string`: Minimum font size for any clamp() calculation. Optional. diff --git a/packages/block-editor/src/components/font-sizes/fluid-utils.js b/packages/block-editor/src/components/font-sizes/fluid-utils.js index 4992e83880a9f..f825769fb7508 100644 --- a/packages/block-editor/src/components/font-sizes/fluid-utils.js +++ b/packages/block-editor/src/components/font-sizes/fluid-utils.js @@ -32,8 +32,8 @@ const DEFAULT_MINIMUM_FONT_SIZE_LIMIT = '14px'; * ``` * * @param {Object} args - * @param {?string} args.minimumViewPortWidth Minimum viewport size from which type will have fluidity. Optional if fontSize is specified. - * @param {?string} args.maximumViewPortWidth Maximum size up to which type will have fluidity. Optional if fontSize is specified. + * @param {?string} args.minimumViewportWidth Minimum viewport size from which type will have fluidity. Optional if fontSize is specified. + * @param {?string} args.maximumViewportWidth Maximum size up to which type will have fluidity. Optional if fontSize is specified. * @param {string|number} [args.fontSize] Size to derive maximumFontSize and minimumFontSize from, if necessary. Optional if minimumFontSize and maximumFontSize are specified. * @param {?string} args.maximumFontSize Maximum font size for any clamp() calculation. Optional. * @param {?string} args.minimumFontSize Minimum font size for any clamp() calculation. Optional. @@ -46,8 +46,8 @@ export function getComputedFluidTypographyValue( { minimumFontSize, maximumFontSize, fontSize, - minimumViewPortWidth = DEFAULT_MINIMUM_VIEWPORT_WIDTH, - maximumViewPortWidth = DEFAULT_MAXIMUM_VIEWPORT_WIDTH, + minimumViewportWidth = DEFAULT_MINIMUM_VIEWPORT_WIDTH, + maximumViewportWidth = DEFAULT_MAXIMUM_VIEWPORT_WIDTH, scaleFactor = DEFAULT_SCALE_FACTOR, minimumFontSizeLimit, } ) { @@ -163,19 +163,19 @@ export function getComputedFluidTypographyValue( { } ); // Viewport widths defined for fluid typography. Normalize units - const maximumViewPortWidthParsed = getTypographyValueAndUnit( - maximumViewPortWidth, + const maximumViewportWidthParsed = getTypographyValueAndUnit( + maximumViewportWidth, { coerceTo: fontSizeUnit } ); - const minumumViewPortWidthParsed = getTypographyValueAndUnit( - minimumViewPortWidth, + const minumumViewportWidthParsed = getTypographyValueAndUnit( + minimumViewportWidth, { coerceTo: fontSizeUnit } ); // Protect against unsupported units. if ( - ! maximumViewPortWidthParsed || - ! minumumViewPortWidthParsed || + ! maximumViewportWidthParsed || + ! minumumViewportWidthParsed || ! minimumFontSizeRem ) { return null; @@ -183,18 +183,18 @@ export function getComputedFluidTypographyValue( { // Build CSS rule. // Borrowed from https://websemantics.uk/tools/responsive-font-calculator/. - const minViewPortWidthOffsetValue = roundToPrecision( - minumumViewPortWidthParsed.value / 100, + const minViewportWidthOffsetValue = roundToPrecision( + minumumViewportWidthParsed.value / 100, 3 ); const viewPortWidthOffset = - roundToPrecision( minViewPortWidthOffsetValue, 3 ) + fontSizeUnit; + roundToPrecision( minViewportWidthOffsetValue, 3 ) + fontSizeUnit; const linearFactor = 100 * ( ( maximumFontSizeParsed.value - minimumFontSizeParsed.value ) / - ( maximumViewPortWidthParsed.value - - minumumViewPortWidthParsed.value ) ); + ( maximumViewportWidthParsed.value - + minumumViewportWidthParsed.value ) ); const linearFactorScaled = roundToPrecision( ( linearFactor || 1 ) * scaleFactor, 3 diff --git a/packages/block-editor/src/components/font-sizes/test/fluid-utils.js b/packages/block-editor/src/components/font-sizes/test/fluid-utils.js index a0095073261cc..0a1092a1d8128 100644 --- a/packages/block-editor/src/components/font-sizes/test/fluid-utils.js +++ b/packages/block-editor/src/components/font-sizes/test/fluid-utils.js @@ -56,8 +56,8 @@ describe( 'getComputedFluidTypographyValue()', () => { it( 'should return a fluid font size when given a min and max viewport width', () => { const fluidTypographyValues = getComputedFluidTypographyValue( { fontSize: '30px', - minimumViewPortWidth: '500px', - maximumViewPortWidth: '1000px', + minimumViewportWidth: '500px', + maximumViewportWidth: '1000px', } ); expect( fluidTypographyValues ).toBe( 'clamp(18.959px, 1.185rem + ((1vw - 5px) * 2.208), 30px)' @@ -74,18 +74,18 @@ describe( 'getComputedFluidTypographyValue()', () => { ); } ); - it( 'should return null when maximumViewPortWidth is not a supported value or unit', () => { + it( 'should return null when maximumViewportWidth is not a supported value or unit', () => { const fluidTypographyValues = getComputedFluidTypographyValue( { fontSize: '30px', - maximumViewPortWidth: 'min(calc(100% - 60px), 1200px)', + maximumViewportWidth: 'min(calc(100% - 60px), 1200px)', } ); expect( fluidTypographyValues ).toBeNull(); } ); - it( 'should return `null` font size when minimumViewPortWidth is not a supported value or unit', () => { + it( 'should return `null` font size when minimumViewportWidth is not a supported value or unit', () => { const fluidTypographyValues = getComputedFluidTypographyValue( { fontSize: '33px', - minimumViewPortWidth: 'calc(100% - 60px)', + minimumViewportWidth: 'calc(100% - 60px)', } ); expect( fluidTypographyValues ).toBeNull(); } ); 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 cfbf0ea68edd9..4bdcd3d1d22d8 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 @@ -192,7 +192,7 @@ describe( 'typography utils', () => { { message: - 'should apply maxViewPortWidth as maximum viewport width', + 'should apply maxViewportWidth as maximum viewport width', preset: { size: '80px', fluid: { @@ -202,7 +202,7 @@ describe( 'typography utils', () => { }, typographySettings: { fluid: { - maxViewPortWidth: '1100px', + maxViewportWidth: '1100px', }, }, expected: @@ -548,18 +548,18 @@ describe( 'typography utils', () => { layout: { wideSize: '1000rem' }, }, expected: { - fluid: { maxViewPortWidth: '1000rem', minFontSize: '16px' }, + fluid: { maxViewportWidth: '1000rem', minFontSize: '16px' }, }, }, { message: - 'should prioritize fluid `maxViewPortWidth` over `layout.wideSize`', + 'should prioritize fluid `maxViewportWidth` over `layout.wideSize`', settings: { - typography: { fluid: { maxViewPortWidth: '10px' } }, + typography: { fluid: { maxViewportWidth: '10px' } }, layout: { wideSize: '1000rem' }, }, - expected: { fluid: { maxViewPortWidth: '10px' } }, + expected: { fluid: { maxViewportWidth: '10px' } }, }, ].forEach( ( { message, settings, expected } ) => { it( `${ message }`, () => { 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 8eaefefbdb83e..2e7377e4b663c 100644 --- a/packages/block-editor/src/components/global-styles/typography-utils.js +++ b/packages/block-editor/src/components/global-styles/typography-utils.js @@ -25,8 +25,8 @@ import { getComputedFluidTypographyValue } from '../font-sizes/fluid-utils'; /** * @typedef {Object} TypographySettings - * @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 {?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. @@ -67,7 +67,7 @@ export function getTypographyFontSizeValue( preset, typographyOptions ) { maximumFontSize: preset?.fluid?.max, fontSize: defaultSize, minimumFontSizeLimit: fluidTypographySettings?.minFontSize, - maximumViewPortWidth: fluidTypographySettings?.maxViewPortWidth, + maximumViewportWidth: fluidTypographySettings?.maxViewportWidth, } ); if ( !! fluidFontSizeValue ) { @@ -102,7 +102,7 @@ export function getFluidTypographyOptionsFromSettings( settings ) { layoutSettings?.wideSize ? { fluid: { - maxViewPortWidth: layoutSettings.wideSize, + maxViewportWidth: layoutSettings.wideSize, ...typographySettings.fluid, }, } From 21ddab474f7ae4b07498960d3c90e9bfcf04ebc7 Mon Sep 17 00:00:00 2001 From: ramon Date: Fri, 28 Jul 2023 13:35:40 +1000 Subject: [PATCH 2/3] Changed `viewPortWidthOffset` to `viewportWidthOffset` --- .../block-editor/src/components/font-sizes/fluid-utils.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/block-editor/src/components/font-sizes/fluid-utils.js b/packages/block-editor/src/components/font-sizes/fluid-utils.js index f825769fb7508..574adf604e9b1 100644 --- a/packages/block-editor/src/components/font-sizes/fluid-utils.js +++ b/packages/block-editor/src/components/font-sizes/fluid-utils.js @@ -188,7 +188,7 @@ export function getComputedFluidTypographyValue( { 3 ); - const viewPortWidthOffset = + const viewportWidthOffset = roundToPrecision( minViewportWidthOffsetValue, 3 ) + fontSizeUnit; const linearFactor = 100 * @@ -199,7 +199,7 @@ export function getComputedFluidTypographyValue( { ( linearFactor || 1 ) * scaleFactor, 3 ); - const fluidTargetFontSize = `${ minimumFontSizeRem.value }${ minimumFontSizeRem.unit } + ((1vw - ${ viewPortWidthOffset }) * ${ linearFactorScaled })`; + const fluidTargetFontSize = `${ minimumFontSizeRem.value }${ minimumFontSizeRem.unit } + ((1vw - ${ viewportWidthOffset }) * ${ linearFactorScaled })`; return `clamp(${ minimumFontSize }, ${ fluidTargetFontSize }, ${ maximumFontSize })`; } From d998df007644fbcea5aff162d0b1ee85c7206495 Mon Sep 17 00:00:00 2001 From: ramon Date: Fri, 28 Jul 2023 14:09:15 +1000 Subject: [PATCH 3/3] Minumum does not exist :-P --- .../block-editor/src/components/font-sizes/fluid-utils.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/block-editor/src/components/font-sizes/fluid-utils.js b/packages/block-editor/src/components/font-sizes/fluid-utils.js index 574adf604e9b1..b26d542708c37 100644 --- a/packages/block-editor/src/components/font-sizes/fluid-utils.js +++ b/packages/block-editor/src/components/font-sizes/fluid-utils.js @@ -167,7 +167,7 @@ export function getComputedFluidTypographyValue( { maximumViewportWidth, { coerceTo: fontSizeUnit } ); - const minumumViewportWidthParsed = getTypographyValueAndUnit( + const minimumViewportWidthParsed = getTypographyValueAndUnit( minimumViewportWidth, { coerceTo: fontSizeUnit } ); @@ -175,7 +175,7 @@ export function getComputedFluidTypographyValue( { // Protect against unsupported units. if ( ! maximumViewportWidthParsed || - ! minumumViewportWidthParsed || + ! minimumViewportWidthParsed || ! minimumFontSizeRem ) { return null; @@ -184,7 +184,7 @@ export function getComputedFluidTypographyValue( { // Build CSS rule. // Borrowed from https://websemantics.uk/tools/responsive-font-calculator/. const minViewportWidthOffsetValue = roundToPrecision( - minumumViewportWidthParsed.value / 100, + minimumViewportWidthParsed.value / 100, 3 ); @@ -194,7 +194,7 @@ export function getComputedFluidTypographyValue( { 100 * ( ( maximumFontSizeParsed.value - minimumFontSizeParsed.value ) / ( maximumViewportWidthParsed.value - - minumumViewportWidthParsed.value ) ); + minimumViewportWidthParsed.value ) ); const linearFactorScaled = roundToPrecision( ( linearFactor || 1 ) * scaleFactor, 3