Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fluid typography: rename viewport variables #53082

Merged
merged 3 commits into from
Jul 28, 2023
Merged

Fluid typography: rename viewport variables #53082

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
cacb970
Viewport is one word, so we shouldn't camelCase it.
ramonjd Jul 28, 2023
21ddab4
Changed `viewPortWidthOffset` to `viewportWidthOffset`
ramonjd Jul 28, 2023
d998df0
Minumum does not exist :-P
ramonjd Jul 28, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions packages/block-editor/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
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
Open in desktop
Original file line number Diff line number Diff line change
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
Open in desktop
Original file line number Diff line number Diff line change
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
Open in desktop
Original file line number Diff line number Diff line change
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
Open in desktop
Original file line number Diff line number Diff line change
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