Skip to content

Fluid typography: adjust font size min and max rules #45536

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

Merged
ramonjd merged 9 commits into from
Nov 10, 2022
Merged

Fluid typography: adjust font size min and max rules #45536

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
c030e5e
Initial commit. No tests.
ramonjd Nov 4, 2022
65d25d1
Update PHP unit tests
ramonjd Nov 4, 2022
3643f1b
Updating JS tests
ramonjd Nov 6, 2022
5553bb3
Updating global styles JS tests
ramonjd Nov 6, 2022
d74b80e
Update typography props JS units tests to reflect new max value
ramonjd Nov 8, 2022
e743d31
Aligning comments acrossing PHP and JS and making sure they're clearer.
ramonjd Nov 8, 2022
3e1882f
Updating global styles tests
ramonjd Nov 9, 2022
f925b5f
Revert "Updating global styles tests"
ramonjd Nov 9, 2022
01fc69f
Revert "Aligning comments acrossing PHP and JS and making sure they'r…
ramonjd Nov 9, 2022
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
Prev Previous commit
Next Next commit
Aligning comments acrossing PHP and JS and making sure they're clearer. 
Bumping the lower bound from 14px to 16px
Updating tests
  • Loading branch information
@ramonjd
ramonjd committed Nov 10, 2022
commit e743d3187958831170cea8ba7ff898b59fdf8b5d
8 changes: 4 additions & 4 deletions lib/block-supports/typography.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -462,7 +462,7 @@ function gutenberg_get_typography_font_size_value( $preset, $should_use_fluid_ty
$default_minimum_viewport_width = '768px';
$default_minimum_font_size_factor = 0.75;
$default_scale_factor = 1;
$default_minimum_font_size_limit = '14px';
$default_minimum_font_size_limit = '16px';

// Font sizes.
$fluid_font_size_settings = isset( $preset['fluid'] ) ? $preset['fluid'] : null;
Expand Down Expand Up @@ -492,7 +492,7 @@ function gutenberg_get_typography_font_size_value( $preset, $should_use_fluid_ty
)
);

// Don't enforce minimum font size if a font size has explicitly set a min and max value.
// Enforce lower bound font size if a font size has not explicitly set a min and/or a max value.
if ( ! empty( $minimum_font_size_limit ) && ( ! $minimum_font_size_raw && ! $maximum_font_size_raw ) ) {
/*
* If a minimum size was not passed to this function
Expand All @@ -510,13 +510,13 @@ function gutenberg_get_typography_font_size_value( $preset, $should_use_fluid_ty
}

/*
* If no minimumFontSize is provided, create one using
* If no fluid min font size is provided, create one using
* the given font size multiplied by the min font size scale factor.
*/
if ( ! $minimum_font_size_raw ) {
$calculated_minimum_font_size = round( $preferred_size['value'] * $default_minimum_font_size_factor, 3 );

// Only use calculated min font size if it's > $minimum_font_size_limit value.
// Only use calculated min font size if it is greater that the minimum font size limit.
if ( ! empty( $minimum_font_size_limit ) && $calculated_minimum_font_size <= $minimum_font_size_limit['value'] ) {
$minimum_font_size_raw = $minimum_font_size_limit['value'] . $minimum_font_size_limit['unit'];
} else {
Expand Down
7 changes: 4 additions & 3 deletions packages/block-editor/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -400,9 +400,10 @@ _Returns_
Computes a fluid font-size value that uses clamp(). A minimum and maxinmum
font size OR a single font size can be specified.

If a single font size is specified, it is scaled up and down by
minimumFontSizeFactor and maximumFontSizeFactor to arrive at the minimum and
maximum sizes.
If a single font size is specified, it is scaled down by
minimumFontSizeFactor to arrive at the minimum font size.

The incoming `fontSize` value is used for the maximum font size value.

_Usage_

Expand Down
21 changes: 12 additions & 9 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 @@ -9,15 +9,16 @@ const DEFAULT_MAXIMUM_VIEWPORT_WIDTH = '1600px';
const DEFAULT_MINIMUM_VIEWPORT_WIDTH = '768px';
const DEFAULT_SCALE_FACTOR = 1;
const DEFAULT_MINIMUM_FONT_SIZE_FACTOR = 0.75;
const DEFAULT_MINIMUM_FONT_SIZE_LIMIT = '14px';
const DEFAULT_MINIMUM_FONT_SIZE_LIMIT = '16px';

/**
* Computes a fluid font-size value that uses clamp(). A minimum and maxinmum
* font size OR a single font size can be specified.
*
* If a single font size is specified, it is scaled up and down by
* minimumFontSizeFactor and maximumFontSizeFactor to arrive at the minimum and
* maximum sizes.
* If a single font size is specified, it is scaled down by
* minimumFontSizeFactor to arrive at the minimum font size.
*
* The incoming `fontSize` value is used for the maximum font size value.
*
* @example
* ```js
Expand Down Expand Up @@ -74,7 +75,7 @@ export function getComputedFluidTypographyValue( {
}
);

// Don't enforce minimum font size if a font size has explicitly set a min and max value.
// Enforce lower bound font size if a font size has not explicitly set a min and/or a max value.
if (
!! minimumFontSizeLimitParsed?.value &&
! minimumFontSize &&
Expand All @@ -96,7 +97,7 @@ export function getComputedFluidTypographyValue( {
}

/*
* If no minimumFontSize is provided, create one using
* If no fluid min font size is provided, create one using
* the given font size multiplied by the min font size scale factor.
*/
if ( ! minimumFontSize ) {
Expand All @@ -105,7 +106,7 @@ export function getComputedFluidTypographyValue( {
3
);

// Only use calculated min font size if it's > $minimum_font_size_limit value.
// Only use calculated min font size if it is greater that the minimum font size limit.
if (
!! minimumFontSizeLimitParsed?.value &&
calculatedMinimumFontSize < minimumFontSizeLimitParsed?.value
Expand All @@ -120,8 +121,10 @@ export function getComputedFluidTypographyValue( {
// Grab the minimum font size and normalize it in order to use the value for calculations.
const minimumFontSizeParsed = getTypographyValueAndUnit( minimumFontSize );

// We get a 'preferred' unit to keep units consistent when calculating,
// otherwise the result will not be accurate.
/*
* We get a 'preferred' unit to keep units consistent when calculating,
* otherwise the result will not be accurate.
*/
const fontSizeUnit = minimumFontSizeParsed?.unit || 'rem';

// Grabs the maximum font size and normalize it in order to use the value for calculations.
Expand Down
4 changes: 2 additions & 2 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 @@ -67,14 +67,14 @@ describe( 'getComputedFluidTypographyValue()', () => {
);
} );

it( 'should return a fluid font size when given a min and max font size factor', () => {
it( 'should return a fluid font size and apply lower bound when given a min and max font size factor', () => {
const fluidTypographyValues = getComputedFluidTypographyValue( {
fontSize: '30px',
minimumFontSizeFactor: '0.5',
maximumFontSizeFactor: '2',
} );
expect( fluidTypographyValues ).toBe(
'clamp(15px, 0.938rem + ((1vw - 7.68px) * 1.803), 30px)'
'clamp(16px, 1rem + ((1vw - 7.68px) * 1.683), 30px)'
);
} );

Expand Down
8 changes: 4 additions & 4 deletions packages/edit-site/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 @@ -215,12 +215,12 @@ describe( 'typography utils', () => {
message:
'returns value when size is equal to lower bounds and no fluid min/max set',
preset: {
size: '14px',
size: '16px',
},
typographySettings: {
fluid: true,
},
expected: '14px',
expected: '16px',
},

{
Expand Down Expand Up @@ -304,7 +304,7 @@ describe( 'typography utils', () => {

{
message:
'should not apply lower bound test when only fluid max is set',
'should apply lower bound test when only fluid max is set',
preset: {
size: '0.875rem',
fluid: {
Expand All @@ -315,7 +315,7 @@ describe( 'typography utils', () => {
fluid: true,
},
expected:
'clamp(0.875rem, 0.875rem + ((1vw - 0.48rem) * 36.779), 20rem)',
'clamp(1rem, 1rem + ((1vw - 0.48rem) * 36.538), 20rem)',
},

{
Expand Down
10 changes: 5 additions & 5 deletions phpunit/block-supports/typography-test.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -466,10 +466,10 @@ public function data_generate_font_size_preset_fixtures() {

'returns value when size is equal to lower bounds and no fluid min/max set' => array(
'font_size' => array(
'size' => '14px',
'size' => '16px',
),
'should_use_fluid_typography' => true,
'expected_output' => '14px',
'expected_output' => '16px',
),

'returns clamp value with different min max units' => array(
Expand Down Expand Up @@ -529,15 +529,15 @@ public function data_generate_font_size_preset_fixtures() {
'expected_output' => 'clamp(12px, 0.75rem + ((1vw - 7.68px) * 0.962), 20px)',
),

'should not apply lower bound test when only fluid max is set' => array(
'should apply lower bound test when only fluid max is set' => array(
'font_size' => array(
'size' => '0.875rem',
'fluid' => array(
'max' => '20rem',
),
),
'should_use_fluid_typography' => true,
'expected_output' => 'clamp(0.875rem, 0.875rem + ((1vw - 0.48rem) * 36.779), 20rem)',
'expected_output' => 'clamp(1rem, 1rem + ((1vw - 0.48rem) * 36.538), 20rem)',
),

'returns clamp value when min and max font sizes are equal' => array(
Expand Down Expand Up @@ -698,7 +698,7 @@ public function data_generate_replace_inline_font_styles_with_fluid_values_fixtu
'block_content' => '<p class="has-medium-font-size" style=" font-size: 20px ; ">A paragraph inside a group</p>',
'font_size_value' => '20px',
'should_use_fluid_typography' => true,
'expected_output' => '<p class="has-medium-font-size" style=" font-size:clamp(15px, 0.938rem + ((1vw - 7.68px) * 0.601), 20px); ">A paragraph inside a group</p>',
'expected_output' => '<p class="has-medium-font-size" style=" font-size:clamp(16px, 1rem + ((1vw - 7.68px) * 0.481), 20px); ">A paragraph inside a group</p>',
),
'return_content_with_first_match_replace_only' => array(
'block_content' => "<div class=\"wp-block-group\" style=\"font-size:1.5em\"> \n \n<p style=\"font-size:1.5em\">A paragraph inside a group</p></div>",
Expand Down