Skip to content

Commit

Permalink
Aligning comments acrossing PHP and JS and making sure they're clearer.
Browse files Browse the repository at this point in the history 
Bumping the lower bound from 14px to 16px
Updating tests
  • Loading branch information
@ramonjd
ramonjd committed Nov 9, 2022
1 parent 2684da7 commit 863d9ae
Show file tree
Hide file tree
Showing 6 changed files with 31 additions and 27 deletions.
8 changes: 4 additions & 4 deletions lib/block-supports/typography.php
View file
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
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
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
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
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
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

0 comments on commit 863d9ae

Please sign in to comment.