diff --git a/packages/block-editor/README.md b/packages/block-editor/README.md index 2c42b42afc4424..44250ec98f586d 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 4992e83880a9f4..b26d542708c375 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 minimumViewportWidthParsed = getTypographyValueAndUnit( + minimumViewportWidth, { coerceTo: fontSizeUnit } ); // Protect against unsupported units. if ( - ! maximumViewPortWidthParsed || - ! minumumViewPortWidthParsed || + ! maximumViewportWidthParsed || + ! minimumViewportWidthParsed || ! minimumFontSizeRem ) { return null; @@ -183,23 +183,23 @@ export function getComputedFluidTypographyValue( { // Build CSS rule. // Borrowed from https://websemantics.uk/tools/responsive-font-calculator/. - const minViewPortWidthOffsetValue = roundToPrecision( - minumumViewPortWidthParsed.value / 100, + const minViewportWidthOffsetValue = roundToPrecision( + minimumViewportWidthParsed.value / 100, 3 ); - const viewPortWidthOffset = - roundToPrecision( minViewPortWidthOffsetValue, 3 ) + fontSizeUnit; + const viewportWidthOffset = + roundToPrecision( minViewportWidthOffsetValue, 3 ) + fontSizeUnit; const linearFactor = 100 * ( ( maximumFontSizeParsed.value - minimumFontSizeParsed.value ) / - ( maximumViewPortWidthParsed.value - - minumumViewPortWidthParsed.value ) ); + ( maximumViewportWidthParsed.value - + minimumViewportWidthParsed.value ) ); const linearFactorScaled = roundToPrecision( ( 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 })`; } 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 a0095073261cc7..0a1092a1d8128c 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 cfbf0ea68edd94..4bdcd3d1d22d89 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 8eaefefbdb83eb..2e7377e4b663c4 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, }, }