Fluid typography: extract logic to derive fluid typography settings

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

@@ -1,7 +1,10 @@
 /**
  * Internal dependencies
  */
-import { getTypographyFontSizeValue } from '../typography-utils';
+import {
+	getTypographyFontSizeValue,
+	getFluidTypographyOptionsFromSettings,
+} from '../typography-utils';
 
 describe( 'typography utils', () => {
 	describe( 'getTypographyFontSizeValue', () => {
@@ -483,4 +486,87 @@ describe( 'typography utils', () => {
 			} );
 		} );
 	} );
+
+	describe( 'typography utils', () => {
+		[
+			{
+				message:
+					'should return `undefined` when settings is `undefined`',
+				settings: undefined,
+				expected: { fluid: undefined },
+			},
+
+			{
+				message:
+					'should return `undefined` when typography is `undefined`',
+				settings: {},
+				expected: { fluid: undefined },
+			},
+
+			{
+				message:
+					'should return `undefined` when typography.fluid is `undefined`',
+				settings: { typography: {} },
+				expected: { fluid: undefined },
+			},
+
+			{
+				message:
+					'should return `false` when typography.fluid is disabled by `false`',
+				settings: { typography: { fluid: false } },
+				expected: { fluid: false },
+			},
+
+			{
+				message: 'should return `{}` when typography.fluid is empty',
+				settings: { typography: { fluid: {} } },
+				expected: { fluid: {} },
+			},
+
+			{
+				message:
+					'should return false when typography.fluid is disabled and layout.wideSize is defined',
+				settings: {
+					typography: { fluid: false },
+					layout: { wideSize: '1000rem' },
+				},
+				expected: { fluid: false },
+			},
+
+			{
+				message:
+					'should return true when fluid is enabled by a boolean',
+				settings: { typography: { fluid: true } },
+				expected: { fluid: true },
+			},
+
+			{
+				message:
+					'should return fluid settings with merged `layout.wideSize`d',
+				settings: {
+					typography: { fluid: { minFontSize: '16px' } },
+					layout: { wideSize: '1000rem' },
+				},
+				expected: {
+					fluid: { maxViewPortWidth: '1000rem', minFontSize: '16px' },
+				},
+			},
+
+			{
+				message:
+					'should prioritize fluid `maxViewPortWidth` over `layout.wideSize`',
+				settings: {
+					typography: { fluid: { maxViewPortWidth: '10px' } },
+					layout: { wideSize: '1000rem' },
+				},
+				expected: { fluid: { maxViewPortWidth: '10px' } },
+			},
+		].forEach( ( { message, settings, expected } ) => {
+			it( `${ message }`, () => {
+				expect(
+					getFluidTypographyOptionsFromSettings( settings )
+				).toEqual( expected );
+			} );
+		} );
+	} );
 } );

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

@@ -37,38 +37,29 @@ import { getComputedFluidTypographyValue } from '../font-sizes/fluid-utils';
  * Takes into account fluid typography parameters and attempts to return a css formula depending on available, valid values.
  *
  * @param {Preset}                     preset
- * @param {Object}                     typographySettings
- * @param {boolean|TypographySettings} typographySettings.fluid Whether fluid typography is enabled, and, optionally, fluid font size options.
+ * @param {Object}                     typographyOptions
+ * @param {boolean|TypographySettings} typographyOptions.fluid Whether fluid typography is enabled, and, optionally, fluid font size options.
  *
  * @return {string|*} A font-size value or the value of preset.size.
  */
-export function getTypographyFontSizeValue( preset, typographySettings ) {
+export function getTypographyFontSizeValue( preset, typographyOptions ) {
 	const { size: defaultSize } = preset;
 
-	/*
-	 * Catches falsy values and 0/'0'.
-	 * Fluid calculations cannot be performed on 0.
-	 */
-	if ( ! defaultSize || '0' === defaultSize ) {
-		return defaultSize;
-	}
-
-	if (
-		! typographySettings?.fluid ||
-		( typeof typographySettings?.fluid === 'object' &&
-			Object.keys( typographySettings.fluid ).length === 0 )
-	) {
+	if ( ! isFluidTypographyEnabled( typographyOptions ) ) {
 		return defaultSize;
 	}
-
-	// A font size has explicitly bypassed fluid calculations.
-	if ( false === preset?.fluid ) {
+	/*
+	 * Checks whether a font size has explicitly bypassed fluid calculations.
+	 * Also catches falsy values and 0/'0'.
+	 * Fluid calculations cannot be performed on `0`.
+	 */
+	if ( ! defaultSize || '0' === defaultSize || false === preset?.fluid ) {
 		return defaultSize;
 	}
 
 	const fluidTypographySettings =
-		typeof typographySettings?.fluid === 'object'
-			? typographySettings?.fluid
+		typeof typographyOptions?.fluid === 'object'
+			? typographyOptions?.fluid
 			: {};
 
 	const fluidFontSizeValue = getComputedFluidTypographyValue( {
@@ -85,3 +76,37 @@ export function getTypographyFontSizeValue( preset, typographySettings ) {
 
 	return defaultSize;
 }
+
+function isFluidTypographyEnabled( typographySettings ) {
+	const fluidSettings = typographySettings?.fluid;
+	return (
+		true === fluidSettings ||
+		( fluidSettings &&
+			typeof fluidSettings === 'object' &&
+			Object.keys( fluidSettings ).length > 0 )
+	);
+}
+
+/**
+ * Returns fluid typography settings from theme.json setting object.
+ *
+ * @param {Object} settings            Theme.json settings
+ * @param {Object} settings.typography Theme.json typography settings
+ * @param {Object} settings.layout     Theme.json layout settings
+ * @return {TypographySettings} Fluid typography settings
+ */
+export function getFluidTypographyOptionsFromSettings( settings ) {
+	const typographySettings = settings?.typography;
+	const layoutSettings = settings?.layout;
+	return isFluidTypographyEnabled( typographySettings ) &&
+		layoutSettings?.wideSize
+		? {
+				fluid: {
+					maxViewPortWidth: layoutSettings.wideSize,
+					...typographySettings.fluid,
+				},
+		  }
+		: {
+				fluid: typographySettings?.fluid,
+		  };
+}

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

@@ -22,7 +22,10 @@ import { getCSSRules } from '@wordpress/style-engine';
  */
 import { PRESET_METADATA, ROOT_BLOCK_SELECTOR, scopeSelector } from './utils';
 import { getBlockCSSSelector } from './get-block-css-selector';
-import { getTypographyFontSizeValue } from './typography-utils';
+import {
+	getTypographyFontSizeValue,
+	getFluidTypographyOptionsFromSettings,
+} from './typography-utils';
 import { GlobalStylesContext } from './context';
 import { useGlobalSetting } from './hooks';
 import { PresetDuotoneFilter } from '../duotone/components';
@@ -396,21 +399,9 @@ 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 },
-				typographySettings
+				getFluidTypographyOptionsFromSettings( tree?.settings )
 			);
 		}
 

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

@@ -7,7 +7,10 @@ import fastDeepEqual from 'fast-deep-equal/es6';
 /**
  * Internal dependencies
  */
-import { getTypographyFontSizeValue } from './typography-utils';
+import {
+	getTypographyFontSizeValue,
+	getFluidTypographyOptionsFromSettings,
+} from './typography-utils';
 
 /* Supporting data. */
 export const ROOT_BLOCK_NAME = 'root';
@@ -76,16 +79,7 @@ export const PRESET_METADATA = [
 		valueFunc: ( preset, settings ) =>
 			getTypographyFontSizeValue(
 				preset,
-				!! settings?.typography?.fluid && settings?.layout?.wideSize
-					? {
-							fluid: {
-								maxViewPortWidth: settings?.layout?.wideSize,
-								...settings?.typography?.fluid,
-							},
-					  }
-					: {
-							fluid: settings?.typography?.fluid,
-					  }
+				getFluidTypographyOptionsFromSettings( settings )
 			),
 		valueKey: 'size',
 		cssVarInfix: 'font-size',