Fluid typography: covert font size number values to pixels (#44807)

* Converts incoming raw font size values to value + pixel to remain consistent with the fontsizepicker component. * Updating comments / docs
WordPress · Oct 10, 2022 · a302614 · a302614
1 parent b70b8b8
commit a302614
Show file tree

Hide file tree

Showing 4 changed files with 34 additions and 9 deletions.
diff --git 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/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`;
 	}
 

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
@@ -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
@@ -276,15 +276,23 @@ 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',
 				),
 				'should_use_fluid_typography' => false,
 				'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,14 +301,22 @@ 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',
 				),
 				'should_use_fluid_typography' => true,
 				'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(