Skip to content

Commit

Permalink
Fluid typography: ensure max viewport width is used in the editor (#5…
Browse files Browse the repository at this point in the history 
…1146)

* #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.

* 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`

* My blod is typo

* Why chain? Break the chains!
  • Loading branch information
@ramonjd
ramonjd authored Jun 1, 2023
1 parent 423d79e commit a993bfd
Show file tree
Hide file tree
Showing 6 changed files with 111 additions and 11 deletions.
52 changes: 52 additions & 0 deletions packages/block-editor/src/components/global-styles/test/typography-utils.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand Down
14 changes: 7 additions & 7 deletions packages/block-editor/src/components/global-styles/typography-utils.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 Specifies 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.
*/

/**
Expand Down Expand Up @@ -77,6 +76,7 @@ export function getTypographyFontSizeValue( preset, typographySettings ) {
maximumFontSize: preset?.fluid?.max,
fontSize: defaultSize,
minimumFontSizeLimit: fluidTypographySettings?.minFontSize,
maximumViewPortWidth: fluidTypographySettings?.maxViewPortWidth,
} );

if ( !! fluidFontSizeValue ) {
Expand Down
14 changes: 13 additions & 1 deletion packages/block-editor/src/components/global-styles/use-global-styles-output.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -396,9 +396,21 @@ 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 },
tree?.settings?.typography
typographySettings
);
}

Expand Down
16 changes: 14 additions & 2 deletions packages/block-editor/src/components/global-styles/utils.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -73,8 +73,20 @@ export const PRESET_METADATA = [
},
{
path: [ 'typography', 'fontSizes' ],
valueFunc: ( preset, { typography: typographySettings } ) =>
getTypographyFontSizeValue( preset, typographySettings ),
valueFunc: ( preset, settings ) =>
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' } ],
Expand Down
24 changes: 24 additions & 0 deletions phpunit/block-supports/typography-test.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand Down
2 changes: 1 addition & 1 deletion schemas/json/theme.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down

1 comment on commit a993bfd

@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 a993bfd.
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/5141039335
📝 Reported issues:

Please sign in to comment.