From 4a8c4a2c6a05f475844eff882753e57a49b12cfe Mon Sep 17 00:00:00 2001 From: ramonjd Date: Mon, 10 Oct 2022 14:12:03 +1100 Subject: [PATCH 1/2] Converts incoming raw font size values to value + pixel to remain consistent with the fontsizepicker component. --- lib/block-supports/typography.php | 6 ++++ .../global-styles/test/typography-utils.js | 2 +- phpunit/block-supports/typography-test.php | 28 +++++++++++++++---- 3 files changed, 29 insertions(+), 7 deletions(-) diff --git a/lib/block-supports/typography.php b/lib/block-supports/typography.php index 212b058f822d70..f84bfd2a74b8fb 100644 --- a/lib/block-supports/typography.php +++ b/lib/block-supports/typography.php @@ -230,6 +230,7 @@ function gutenberg_typography_get_css_variable_inline_style( $attributes, $featu /** * Internal method that checks a string for a unit and value and returns an array consisting of `'value'` and `'unit'`, e.g., [ '42', 'rem' ]. + * A raw font size of `value + unit` is expected. If the value is a number, it will convert to `value + 'px'`. * * @access private * @@ -248,6 +249,11 @@ function gutenberg_get_typography_value_and_unit( $raw_value, $options = array() return null; } + // Converts numbers to pixel values by default. + if ( is_numeric( $raw_value ) ) { + $raw_value = $raw_value . 'px'; + } + $defaults = array( 'coerce_to' => '', 'root_size_value' => 16, 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 c70a1e4050e930..39e29894f6cb38 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 @@ -15,7 +15,7 @@ describe( 'typography utils', () => { typographySettings: undefined, expected: '28px', }, - // Default return non-fluid value where `size` is not a number | string. + // Default return non-fluid value where `size` is undefined. { preset: { size: undefined, diff --git a/phpunit/block-supports/typography-test.php b/phpunit/block-supports/typography-test.php index ecc37ec442135c..0b1cba6c83c805 100644 --- a/phpunit/block-supports/typography-test.php +++ b/phpunit/block-supports/typography-test.php @@ -276,7 +276,7 @@ public function test_gutenberg_get_typography_font_size_value( $font_size_preset */ public function data_generate_font_size_preset_fixtures() { return array( - 'default_return_value' => array( + 'default_return_value' => array( 'font_size_preset' => array( 'size' => '28px', ), @@ -284,7 +284,15 @@ public function data_generate_font_size_preset_fixtures() { 'expected_output' => '28px', ), - 'default_return_value_when_fluid_is_false' => array( + 'default_return_value_when_size_is_undefined' => array( + 'font_size_preset' => array( + 'size' => null, + ), + 'should_use_fluid_typography' => false, + 'expected_output' => null, + ), + + 'default_return_value_when_fluid_is_false' => array( 'font_size_preset' => array( 'size' => '28px', 'fluid' => false, @@ -293,7 +301,7 @@ public function data_generate_font_size_preset_fixtures() { 'expected_output' => '28px', ), - 'return_fluid_value' => array( + 'return_fluid_value' => array( 'font_size_preset' => array( 'size' => '1.75rem', ), @@ -301,6 +309,14 @@ public function data_generate_font_size_preset_fixtures() { 'expected_output' => 'clamp(1.3125rem, 1.3125rem + ((1vw - 0.48rem) * 2.524), 2.625rem)', ), + 'return_fluid_value_with_number_coerced_to_px' => array( + 'font_size_preset' => array( + 'size' => 33, + ), + 'should_use_fluid_typography' => true, + 'expected_output' => 'clamp(24.75px, 1.546875rem + ((1vw - 7.68px) * 2.975), 49.5px)', + ), + 'return_default_fluid_values_with_empty_fluid_array' => array( 'font_size_preset' => array( 'size' => '28px', @@ -310,7 +326,7 @@ public function data_generate_font_size_preset_fixtures() { 'expected_output' => 'clamp(21px, 1.3125rem + ((1vw - 7.68px) * 2.524), 42px)', ), - 'return_default_fluid_values_with_null_value' => array( + 'return_default_fluid_values_with_null_value' => array( 'font_size_preset' => array( 'size' => '28px', 'fluid' => null, @@ -319,7 +335,7 @@ public function data_generate_font_size_preset_fixtures() { 'expected_output' => 'clamp(21px, 1.3125rem + ((1vw - 7.68px) * 2.524), 42px)', ), - 'return_size_with_invalid_fluid_units' => array( + 'return_size_with_invalid_fluid_units' => array( 'font_size_preset' => array( 'size' => '10em', 'fluid' => array( @@ -331,7 +347,7 @@ public function data_generate_font_size_preset_fixtures() { 'expected_output' => '10em', ), - 'return_fluid_clamp_value' => array( + 'return_fluid_clamp_value' => array( 'font_size_preset' => array( 'size' => '28px', 'fluid' => array( From 55001adfc48324b492131c03aa276af15dd3fa68 Mon Sep 17 00:00:00 2001 From: ramonjd Date: Mon, 10 Oct 2022 15:44:34 +1100 Subject: [PATCH 2/2] Updating comments / docs --- .../block-editor/src/components/font-sizes/fluid-utils.js | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) 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 ea69585853586c..761cd52c97bc6a 100644 --- a/packages/block-editor/src/components/font-sizes/fluid-utils.js +++ b/packages/block-editor/src/components/font-sizes/fluid-utils.js @@ -147,8 +147,10 @@ export function getComputedFluidTypographyValue( { } /** + * Internal method that checks a string for a unit and value and returns an array consisting of `'value'` and `'unit'`, e.g., [ '42', 'rem' ]. + * A raw font size of `value + unit` is expected. If the value is a number, it will convert to `value + 'px'`. * - * @param {string} rawValue Raw size value from theme.json. + * @param {string|number} rawValue Raw size value from theme.json. * @param {Object|undefined} options Calculation options. * * @return {{ unit: string, value: number }|null} An object consisting of `'value'` and `'unit'` properties. @@ -158,7 +160,8 @@ export function getTypographyValueAndUnit( rawValue, options = {} ) { return null; } - if ( typeof rawValue === 'number' && ! Number.isNaN( rawValue ) ) { + // Converts numbers to pixel values by default. + if ( typeof rawValue === 'number' ) { rawValue = `${ rawValue }px`; }