Typography: add explicit bypass for fluid font size calculation (#42757)

* Allowing for an explicit `false` value in the fluid font size property to bypass fluid calculations for a specific font. * Updating site editor presets
WordPress · Jul 29, 2022 · 7a85f3b · 7a85f3b
1 parent 8f0c091
commit 7a85f3b
Show file tree

Hide file tree

Showing 5 changed files with 59 additions and 5 deletions.
diff --git a/lib/block-supports/typography.php b/lib/block-supports/typography.php
@@ -378,6 +378,11 @@ function gutenberg_get_typography_font_size_value( $preset, $should_use_fluid_ty
 	// Font sizes.
 	$fluid_font_size_settings = isset( $preset['fluid'] ) ? $preset['fluid'] : null;
 
+	// A font size has explicitly bypassed fluid calculations.
+	if ( false === $fluid_font_size_settings ) {
+		return $preset['size'];
+	}
+
 	// Try to grab explicit min and max fluid font sizes.
 	$minimum_font_size_raw = isset( $fluid_font_size_settings['min'] ) ? $fluid_font_size_settings['min'] : null;
 	$maximum_font_size_raw = isset( $fluid_font_size_settings['max'] ) ? $fluid_font_size_settings['max'] : null;

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,6 +15,17 @@ describe( 'typography utils', () => {
 					typographySettings: undefined,
 					expected: '28px',
 				},
+				// Should return non-fluid value when fluid is `false`.
+				{
+					preset: {
+						size: '28px',
+						fluid: false,
+					},
+					typographySettings: {
+						fluid: true,
+					},
+					expected: '28px',
+				},
 				// Should return fluid value.
 				{
 					preset: {
@@ -38,6 +49,20 @@ describe( 'typography utils', () => {
 					expected:
 						'clamp(21px, 1.3125rem + ((1vw - 7.68px) * 2.524), 42px)',
 				},
+
+				// Should return default fluid values with null values.
+				{
+					preset: {
+						size: '28px',
+						fluid: null,
+					},
+					typographySettings: {
+						fluid: true,
+					},
+					expected:
+						'clamp(21px, 1.3125rem + ((1vw - 7.68px) * 2.524), 42px)',
+				},
+
 				// Should return size with invalid fluid units.
 				{
 					preset: {

diff --git a/packages/edit-site/src/components/global-styles/typography-utils.js b/packages/edit-site/src/components/global-styles/typography-utils.js
@@ -35,6 +35,11 @@ export function getTypographyFontSizeValue( preset, typographySettings ) {
 	const DEFAULT_SCALE_FACTOR = 1;
 
 	// Font sizes.
+	// A font size has explicitly bypassed fluid calculations.
+	if ( false === preset?.fluid ) {
+		return defaultSize;
+	}
+
 	const fluidFontSizeSettings = preset?.fluid || {};
 
 	// Try to grab explicit min and max fluid font sizes.

diff --git a/phpunit/block-supports/typography-test.php b/phpunit/block-supports/typography-test.php
@@ -226,15 +226,24 @@ function test_gutenberg_get_typography_font_size_value( $font_size_preset, $shou
 	 */
 	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',
 			),
 
-			'return_fluid_value'                   => array(
+			'default_return_value_when_fluid_is_false'    => array(
+				'font_size_preset'            => array(
+					'size'  => '28px',
+					'fluid' => false,
+				),
+				'should_use_fluid_typography' => true,
+				'expected_output'             => '28px',
+			),
+
+			'return_fluid_value'                          => array(
 				'font_size_preset'            => array(
 					'size' => '1.75rem',
 				),
@@ -251,7 +260,16 @@ 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_default_fluid_values_with_null_value' => array(
+				'font_size_preset'            => array(
+					'size'  => '28px',
+					'fluid' => null,
+				),
+				'should_use_fluid_typography' => true,
+				'expected_output'             => 'clamp(21px, 1.3125rem + ((1vw - 7.68px) * 2.524), 42px)',
+			),
+
+			'return_size_with_invalid_fluid_units'        => array(
 				'font_size_preset'            => array(
 					'size'  => '10em',
 					'fluid' => array(
@@ -263,7 +281,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(

diff --git a/schemas/json/theme.json b/schemas/json/theme.json
@@ -364,7 +364,8 @@
 										"type": "string"
 									},
 									"fluid": {
-										"type": "object",
+										"description": "Specifics the minimum and maximum font size value of a fluid font size. Set to `false` to bypass fluid calculations and use the static `size` value.",
+										"type": [ "object", "boolean" ],
 										"properties": {
 											"min": {
 												"description": "A min font size for fluid font size calculations in px, rem or em.",