Skip to content

Commit

Permalink
Fluid typography: rename viewport variables (#53082)
Browse files Browse the repository at this point in the history 
* 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.

* Changed `viewPortWidthOffset` to `viewportWidthOffset`

* Minumum does not exist :-P
  • Loading branch information
@ramonjd
ramonjd committed Jul 28, 2023
1 parent 85a4785 commit 7c0284b
Show file tree
Hide file tree
Showing 5 changed files with 35 additions and 35 deletions.
4 changes: 2 additions & 2 deletions packages/block-editor/README.md
View file
Expand Up @@ -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.
Expand Down
34 changes: 17 additions & 17 deletions packages/block-editor/src/components/font-sizes/fluid-utils.js
View file
Expand Up @@ -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.
Expand All @@ -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,
} ) {
Expand Down Expand Up @@ -163,43 +163,43 @@ 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;
}

// 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 })`;
}
Expand Down
12 changes: 6 additions & 6 deletions packages/block-editor/src/components/font-sizes/test/fluid-utils.js
View file
Expand Up @@ -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)'
Expand All @@ -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();
} );
Expand Down
12 changes: 6 additions & 6 deletions packages/block-editor/src/components/global-styles/test/typography-utils.js
View file
Expand Up @@ -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: {
Expand All @@ -202,7 +202,7 @@ describe( 'typography utils', () => {
},
typographySettings: {
fluid: {
maxViewPortWidth: '1100px',
maxViewportWidth: '1100px',
},
},
expected:
Expand Down Expand Up @@ -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 }`, () => {
Expand Down
8 changes: 4 additions & 4 deletions packages/block-editor/src/components/global-styles/typography-utils.js
View file
Expand Up @@ -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.
Expand Down Expand Up @@ -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 ) {
Expand Down Expand Up @@ -102,7 +102,7 @@ export function getFluidTypographyOptionsFromSettings( settings ) {
layoutSettings?.wideSize
? {
fluid: {
maxViewPortWidth: layoutSettings.wideSize,
maxViewportWidth: layoutSettings.wideSize,
...typographySettings.fluid,
},
}
Expand Down

1 comment on commit 7c0284b

@github-actions
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Flaky tests detected in 7c0284b.
Some tests passed with failed attempts. The failures may not be related to this commit but are still reported for visibility. See the documentation for more information.

🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/5688434265
📝 Reported issues:

Please sign in to comment.