Fluid typography: ensure max viewport width is used in the editor (Wo…

…rdPress#51146)

* WordPress#49815 added `settings.layout.wideSize` as the default value for the maximum viewport size in relation to calculating fluid fontsize values.
Unfortunately this maxViewPortWidth value was not being passed to `getTypographyFontSizeValue()`
This commit correct this omission and adds extra unit tests to both the JS and PHP versions.

* To avoid backwards compat problems I'm trying to keep the function signature the same, hence the gymnastics here.
Because we support fluid: true and fluid: {...values}, we have to ensure the param object is correctly set so that we can know if fluid typography is enabled or not.
The alternative could be a third argument to the `getTypographyFontSizeValue()` function, e.g., `isFluidEnabled`

* My blod is typo

* Why chain? Break the chains!

packages/block-editor/src/components/global-styles/test/typography-utils.js

@@ -170,6 +170,58 @@ describe( 'typography utils', () => {
 					'clamp(17.905px, 1.119rem + ((1vw - 3.2px) * 0.789), 28px)',
 			},
 
+			{
+				message:
+					'returns clamp value where min and max fluid values defined',
+				preset: {
+					size: '80px',
+					fluid: {
+						min: '70px',
+						max: '125px',
+					},
+				},
+				typographySettings: {
+					fluid: true,
+				},
+				expected:
+					'clamp(70px, 4.375rem + ((1vw - 3.2px) * 4.297), 125px)',
+			},
+
+			{
+				message:
+					'should apply maxViewPortWidth as maximum viewport width',
+				preset: {
+					size: '80px',
+					fluid: {
+						min: '70px',
+						max: '125px',
+					},
+				},
+				typographySettings: {
+					fluid: {
+						maxViewPortWidth: '1100px',
+					},
+				},
+				expected:
+					'clamp(70px, 4.375rem + ((1vw - 3.2px) * 7.051), 125px)',
+			},
+
+			{
+				message: 'returns clamp value where max is equal to size',
+				preset: {
+					size: '7.8125rem',
+					fluid: {
+						min: '4.375rem',
+						max: '7.8125rem',
+					},
+				},
+				typographySettings: {
+					fluid: true,
+				},
+				expected:
+					'clamp(4.375rem, 4.375rem + ((1vw - 0.2rem) * 4.298), 7.8125rem)',
+			},
+
 			{
 				message:
 					'should return clamp value if min font size is greater than max',

packages/block-editor/src/components/global-styles/typography-utils.js

@@ -20,17 +20,16 @@ import { getComputedFluidTypographyValue } from '../font-sizes/fluid-utils';
  * @property {?string|?number}               size  A default font size.
  * @property {string}                        name  A font size name, displayed in the UI.
  * @property {string}                        slug  A font size slug
- * @property {boolean|FluidPreset|undefined} fluid A font size slug
+ * @property {boolean|FluidPreset|undefined} fluid Specifies the minimum and maximum font size value of a fluid font size.
  */
 
 /**
  * @typedef {Object} TypographySettings
- * @property {?string|?number} size              A default font size.
- * @property {?string}         minViewPortWidth  Minimum viewport size from which type will have fluidity. Optional if size is specified.
- * @property {?string}         maxViewPortWidth  Maximum size up to which type will have fluidity. Optional if size is specified.
- * @property {?number}         scaleFactor       A scale factor to determine how fast a font scales within boundaries. Optional.
- * @property {?number}         minFontSizeFactor How much to scale defaultFontSize by to derive minimumFontSize. Optional.
- * @property {?string}         minFontSize       The smallest a calculated font size may be. Optional.
+ * @property {?string} minViewPortWidth  Minimum viewport size from which type will have fluidity. Optional if size is specified.
+ * @property {?string} maxViewPortWidth  Maximum size up to which type will have fluidity. Optional if size is specified.
+ * @property {?number} scaleFactor       A scale factor to determine how fast a font scales within boundaries. Optional.
+ * @property {?number} minFontSizeFactor How much to scale defaultFontSize by to derive minimumFontSize. Optional.
+ * @property {?string} minFontSize       The smallest a calculated font size may be. Optional.
  */
 
 /**
@@ -77,6 +76,7 @@ export function getTypographyFontSizeValue( preset, typographySettings ) {
 		maximumFontSize: preset?.fluid?.max,
 		fontSize: defaultSize,
 		minimumFontSizeLimit: fluidTypographySettings?.minFontSize,
+		maximumViewPortWidth: fluidTypographySettings?.maxViewPortWidth,
 	} );
 
 	if ( !! fluidFontSizeValue ) {

packages/block-editor/src/components/global-styles/use-global-styles-output.js

@@ -396,9 +396,21 @@ export function getStylesDeclarations(
 			 * Values that already have a "clamp()" function will not pass the test,
 			 * and therefore the original $value will be returned.
 			 */
+			const typographySettings =
+				!! tree?.settings?.typography?.fluid &&
+				tree?.settings?.layout?.wideSize
+					? {
+							fluid: {
+								maxViewPortWidth: tree.settings.layout.wideSize,
+								...tree.settings.typography.fluid,
+							},
+					  }
+					: {
+							fluid: tree?.settings?.typography?.fluid,
+					  };
 			ruleValue = getTypographyFontSizeValue(
 				{ size: ruleValue },
-				tree?.settings?.typography
+				typographySettings
 			);
 		}
 

packages/block-editor/src/components/global-styles/utils.js

@@ -73,8 +73,20 @@ export const PRESET_METADATA = [
 	},
 	{
 		path: [ 'typography', 'fontSizes' ],
-		valueFunc: ( preset, { typography: typographySettings } ) =>
-			getTypographyFontSizeValue( preset, typographySettings ),
+		valueFunc: ( preset, settings ) =>
+			getTypographyFontSizeValue(
+				preset,
+				!! settings?.typography?.fluid && settings?.layout?.wideSize
+					? {
+							fluid: {
+								maxViewPortWidth: settings?.layout?.wideSize,
+								...settings?.typography?.fluid,
+							},
+					  }
+					: {
+							fluid: settings?.typography?.fluid,
+					  }
+			),
 		valueKey: 'size',
 		cssVarInfix: 'font-size',
 		classes: [ { classSuffix: 'font-size', propertyName: 'font-size' } ],

phpunit/block-supports/typography-test.php

@@ -432,6 +432,30 @@ public function data_generate_font_size_preset_fixtures() {
 				'expected_output'             => 'clamp(17.905px, 1.119rem + ((1vw - 3.2px) * 0.789), 28px)',
 			),
 
+			'returns clamp value where min and max fluid values defined' => array(
+				'font_size'                   => array(
+					'size'  => '80px',
+					'fluid' => array(
+						'min' => '70px',
+						'max' => '125px',
+					),
+				),
+				'should_use_fluid_typography' => true,
+				'expected_output'             => 'clamp(70px, 4.375rem + ((1vw - 3.2px) * 4.297), 125px)',
+			),
+
+			'returns clamp value where max is equal to size' => array(
+				'font_size'                   => array(
+					'size'  => '7.8125rem',
+					'fluid' => array(
+						'min' => '4.375rem',
+						'max' => '7.8125rem',
+					),
+				),
+				'should_use_fluid_typography' => true,
+				'expected_output'             => 'clamp(4.375rem, 4.375rem + ((1vw - 0.2rem) * 4.298), 7.8125rem)',
+			),
+
 			'returns clamp value if min font size is greater than max' => array(
 				'font_size'                   => array(
 					'size'  => '3rem',

schemas/json/theme.json

@@ -487,7 +487,7 @@
 										"type": "string"
 									},
 									"fluid": {
-										"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.",
+										"description": "Specifies 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.",
 										"oneOf": [
 											{
 												"type": "object",