From 01fc69f17ea9f56f09cb0148b2e3ecf57892b882 Mon Sep 17 00:00:00 2001 From: ramonjd Date: Thu, 10 Nov 2022 03:26:25 +1100 Subject: [PATCH] Revert "Aligning comments acrossing PHP and JS and making sure they're clearer." This reverts commit 863d9aefb96ca02275638311d81b4738628c2461. --- lib/block-supports/typography.php | 8 +++---- packages/block-editor/README.md | 7 +++---- .../src/components/font-sizes/fluid-utils.js | 21 ++++++++----------- .../components/font-sizes/test/fluid-utils.js | 4 ++-- .../global-styles/test/typography-utils.js | 8 +++---- phpunit/block-supports/typography-test.php | 10 ++++----- 6 files changed, 27 insertions(+), 31 deletions(-) diff --git a/lib/block-supports/typography.php b/lib/block-supports/typography.php index 7ba4b9dd21846..01d223b84281e 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 = '16px'; + $default_minimum_font_size_limit = '14px'; // 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 ) ); - // Enforce lower bound font size if a font size has not explicitly set a min and/or a max value. + // Don't enforce minimum font size if a font size has explicitly set a min and 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 fluid min font size is provided, create one using + * If no minimumFontSize 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 is greater that the minimum font size limit. + // Only use calculated min font size if it's > $minimum_font_size_limit value. 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 d0f81f24e8beb..5760f1584c5db 100644 --- a/packages/block-editor/README.md +++ b/packages/block-editor/README.md @@ -400,10 +400,9 @@ _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 down by -minimumFontSizeFactor to arrive at the minimum font size. - -The incoming `fontSize` value is used for the maximum font size value. +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. _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 ed97794f9e113..de8a27e3014e8 100644 --- a/packages/block-editor/src/components/font-sizes/fluid-utils.js +++ b/packages/block-editor/src/components/font-sizes/fluid-utils.js @@ -9,16 +9,15 @@ 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 = '16px'; +const DEFAULT_MINIMUM_FONT_SIZE_LIMIT = '14px'; /** * 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 down by - * minimumFontSizeFactor to arrive at the minimum font size. - * - * The incoming `fontSize` value is used for the maximum font size value. + * 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. * * @example * ```js @@ -75,7 +74,7 @@ export function getComputedFluidTypographyValue( { } ); - // Enforce lower bound font size if a font size has not explicitly set a min and/or a max value. + // Don't enforce minimum font size if a font size has explicitly set a min and max value. if ( !! minimumFontSizeLimitParsed?.value && ! minimumFontSize && @@ -97,7 +96,7 @@ export function getComputedFluidTypographyValue( { } /* - * If no fluid min font size is provided, create one using + * If no minimumFontSize is provided, create one using * the given font size multiplied by the min font size scale factor. */ if ( ! minimumFontSize ) { @@ -106,7 +105,7 @@ export function getComputedFluidTypographyValue( { 3 ); - // Only use calculated min font size if it is greater that the minimum font size limit. + // Only use calculated min font size if it's > $minimum_font_size_limit value. if ( !! minimumFontSizeLimitParsed?.value && calculatedMinimumFontSize < minimumFontSizeLimitParsed?.value @@ -121,10 +120,8 @@ 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 04a391814dcc1..15805431a959f 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 and apply lower bound when given a min and max font size factor', () => { + it( 'should return a fluid font size when given a min and max font size factor', () => { const fluidTypographyValues = getComputedFluidTypographyValue( { fontSize: '30px', minimumFontSizeFactor: '0.5', maximumFontSizeFactor: '2', } ); expect( fluidTypographyValues ).toBe( - 'clamp(16px, 1rem + ((1vw - 7.68px) * 1.683), 30px)' + 'clamp(15px, 0.938rem + ((1vw - 7.68px) * 1.803), 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 becbb4cc474a0..647b02cb4be1f 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: '16px', + size: '14px', }, typographySettings: { fluid: true, }, - expected: '16px', + expected: '14px', }, { @@ -304,7 +304,7 @@ describe( 'typography utils', () => { { message: - 'should apply lower bound test when only fluid max is set', + 'should not 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(1rem, 1rem + ((1vw - 0.48rem) * 36.538), 20rem)', + 'clamp(0.875rem, 0.875rem + ((1vw - 0.48rem) * 36.779), 20rem)', }, { diff --git a/phpunit/block-supports/typography-test.php b/phpunit/block-supports/typography-test.php index d674b637940d4..63fd98d1e524f 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' => '16px', + 'size' => '14px', ), 'should_use_fluid_typography' => true, - 'expected_output' => '16px', + 'expected_output' => '14px', ), '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 apply lower bound test when only fluid max is set' => array( + 'should not 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(1rem, 1rem + ((1vw - 0.48rem) * 36.538), 20rem)', + 'expected_output' => 'clamp(0.875rem, 0.875rem + ((1vw - 0.48rem) * 36.779), 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

",