diff --git a/lib/block-supports/typography.php b/lib/block-supports/typography.php index 6bb95a1d74645e..8cfeda2b0641b5 100644 --- 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 index 2306e61522f07e..cbc0fe53a3390d 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,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 index 53c782da0697af..464021dfa0b9fc 100644 --- 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 index 48f4e4ccbe5b96..f5b5ac954f9e21 100644 --- a/phpunit/block-supports/typography-test.php +++ b/phpunit/block-supports/typography-test.php @@ -226,7 +226,7 @@ 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', ), @@ -234,7 +234,16 @@ public function data_generate_font_size_preset_fixtures() { '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 index 7a1567579162bb..25a973d26ff5ab 100644 --- 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.",