diff --git a/lib/block-supports/typography.php b/lib/block-supports/typography.php index 01d223b84281e..7ba4b9dd21846 100644 --- a/lib/block-supports/typography.php +++ b/lib/block-supports/typography.php @@ -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; @@ -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 @@ -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 { diff --git a/packages/block-editor/README.md b/packages/block-editor/README.md index 5760f1584c5db..d0f81f24e8beb 100644 --- a/packages/block-editor/README.md +++ b/packages/block-editor/README.md @@ -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_ diff --git a/packages/block-editor/src/components/font-sizes/fluid-utils.js b/packages/block-editor/src/components/font-sizes/fluid-utils.js index de8a27e3014e8..ed97794f9e113 100644 --- a/packages/block-editor/src/components/font-sizes/fluid-utils.js +++ b/packages/block-editor/src/components/font-sizes/fluid-utils.js @@ -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 @@ -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 && @@ -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 ) { @@ -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 @@ -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. diff --git a/packages/block-editor/src/components/font-sizes/test/fluid-utils.js b/packages/block-editor/src/components/font-sizes/test/fluid-utils.js index 15805431a959f..04a391814dcc1 100644 --- a/packages/block-editor/src/components/font-sizes/test/fluid-utils.js +++ b/packages/block-editor/src/components/font-sizes/test/fluid-utils.js @@ -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)' ); } ); diff --git a/packages/edit-site/src/components/global-styles/test/typography-utils.js b/packages/edit-site/src/components/global-styles/test/typography-utils.js index 647b02cb4be1f..becbb4cc474a0 100644 --- a/packages/edit-site/src/components/global-styles/test/typography-utils.js +++ b/packages/edit-site/src/components/global-styles/test/typography-utils.js @@ -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', }, { @@ -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: { @@ -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)', }, { diff --git a/phpunit/block-supports/typography-test.php b/phpunit/block-supports/typography-test.php index 63fd98d1e524f..d674b637940d4 100644 --- a/phpunit/block-supports/typography-test.php +++ b/phpunit/block-supports/typography-test.php @@ -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( @@ -529,7 +529,7 @@ 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( @@ -537,7 +537,7 @@ public function data_generate_font_size_preset_fixtures() { ), ), '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( @@ -698,7 +698,7 @@ public function data_generate_replace_inline_font_styles_with_fluid_values_fixtu 'block_content' => '

A paragraph inside a group

', 'font_size_value' => '20px', 'should_use_fluid_typography' => true, - 'expected_output' => '

A paragraph inside a group

', + 'expected_output' => '

A paragraph inside a group

', ), 'return_content_with_first_match_replace_only' => array( 'block_content' => "
\n \n

A paragraph inside a group

",