Fluid typography: use layout.wideSize as max viewport width (#49815)

* Fluid Typography: Try adding a ceiling to the calculated minimum font size * Add test to ensure ceiling is skipped when min font size is provided * In this commit, we use a logarithmic scale factor to calculate a minimum font scale that tapers out as the font size increases. The calculation is only performed where there no min font size is passed to the fluid font size methods. The min font scale factor is constrained by min and max values. Tests are updated to reflect the new clamp values. Docs are updated to reflect API change in JS function (removing minimumFontSizeFactor arg) * Fix lint and JS tests * EL LINTO DEL DIABLO! * Based on #49707 Testing out using `settings.layout.wideSize` as the maximum viewport width Updating tests to come * Updating tests and generally cleaning up after a bizarre rebase session. * This commit: - elaborates on the purpose of layout.wideSize in the theme.json schema --------- Co-authored-by: Andrew Serong <[email protected]>
WordPress · May 8, 2023 · f4f5e37 · f4f5e37
1 parent 1e5364f
commit f4f5e37
Show file tree

Hide file tree

Showing 8 changed files with 77 additions and 22 deletions.
diff --git a/lib/block-supports/typography.php b/lib/block-supports/typography.php
@@ -428,7 +428,10 @@ function gutenberg_get_typography_font_size_value( $preset, $should_use_fluid_ty
 	}
 
 	// Checks if fluid font sizes are activated.
-	$typography_settings         = gutenberg_get_global_settings( array( 'typography' ) );
+	$global_settings     = gutenberg_get_global_settings();
+	$typography_settings = isset( $global_settings['typography'] ) ? $global_settings['typography'] : array();
+	$layout_settings     = isset( $global_settings['layout'] ) ? $global_settings['layout'] : array();
+
 	$should_use_fluid_typography
 		= isset( $typography_settings['fluid'] ) &&
 		( true === $typography_settings['fluid'] || is_array( $typography_settings['fluid'] ) ) ?
@@ -442,7 +445,7 @@ function gutenberg_get_typography_font_size_value( $preset, $should_use_fluid_ty
 	$fluid_settings = isset( $typography_settings['fluid'] ) && is_array( $typography_settings['fluid'] ) ? $typography_settings['fluid'] : array();
 
 	// Defaults.
-	$default_maximum_viewport_width       = '1600px';
+	$default_maximum_viewport_width       = isset( $layout_settings['wideSize'] ) ? $layout_settings['wideSize'] : '1600px';
 	$default_minimum_viewport_width       = '320px';
 	$default_minimum_font_size_factor_max = 0.75;
 	$default_minimum_font_size_factor_min = 0.25;

diff --git a/packages/block-editor/README.md b/packages/block-editor/README.md
@@ -539,7 +539,7 @@ Provides the CSS class names and inline styles for a block's typography support
 _Parameters_
 
 -   _attributes_ `Object`: Block attributes.
--   _fluidTypographySettings_ `Object|boolean`: If boolean, whether the function should try to convert font sizes to fluid values, otherwise an object containing theme fluid typography settings.
+-   _settings_ `Object|boolean`: Merged theme.json settings
 
 _Returns_
 

diff --git a/packages/block-editor/src/hooks/test/use-typography-props.js b/packages/block-editor/src/hooks/test/use-typography-props.js
@@ -39,7 +39,15 @@ describe( 'getTypographyClassesAndStyles', () => {
 				},
 			},
 		};
-		expect( getTypographyClassesAndStyles( attributes, true ) ).toEqual( {
+		expect(
+			getTypographyClassesAndStyles( attributes, {
+				typography: {
+					fluid: {
+						minFontSize: '1rem',
+					},
+				},
+			} )
+		).toEqual( {
 			className: 'has-tofu-font-family',
 			style: {
 				letterSpacing: '22px',
@@ -63,7 +71,11 @@ describe( 'getTypographyClassesAndStyles', () => {
 		};
 		expect(
 			getTypographyClassesAndStyles( attributes, {
-				minFontSize: '1rem',
+				typography: {
+					fluid: {
+						minFontSize: '1rem',
+					},
+				},
 			} )
 		).toEqual( {
 			className: 'has-tofu-font-family',
@@ -75,4 +87,37 @@ describe( 'getTypographyClassesAndStyles', () => {
 			},
 		} );
 	} );
+
+	it( 'should use layout.wideSize for the maximum viewport value', () => {
+		const attributes = {
+			fontFamily: 'tofu',
+			style: {
+				typography: {
+					textDecoration: 'underline',
+					fontSize: '2rem',
+					textTransform: 'uppercase',
+				},
+			},
+		};
+		expect(
+			getTypographyClassesAndStyles( attributes, {
+				typography: {
+					fluid: {
+						minFontSize: '1rem',
+					},
+				},
+				layout: {
+					wideSize: '1000px',
+				},
+			} )
+		).toEqual( {
+			className: 'has-tofu-font-family',
+			style: {
+				textDecoration: 'underline',
+				fontSize:
+					'clamp(1.25rem, 1.25rem + ((1vw - 0.2rem) * 1.765), 2rem)',
+				textTransform: 'uppercase',
+			},
+		} );
+	} );
 } );
diff --git a/packages/block-editor/src/hooks/use-typography-props.js b/packages/block-editor/src/hooks/use-typography-props.js
@@ -11,25 +11,23 @@ import { getInlineStyles } from './style';
 import { getFontSizeClass } from '../components/font-sizes';
 import { getComputedFluidTypographyValue } from '../components/font-sizes/fluid-utils';
 
-// This utility is intended to assist where the serialization of the typography
-// block support is being skipped for a block but the typography related CSS
-// styles still need to be generated so they can be applied to inner elements.
-
+/*
+ * This utility is intended to assist where the serialization of the typography
+ * block support is being skipped for a block but the typography related CSS
+ * styles still need to be generated so they can be applied to inner elements.
+ */
 /**
  * Provides the CSS class names and inline styles for a block's typography support
  * attributes.
  *
- * @param {Object}         attributes              Block attributes.
- * @param {Object|boolean} fluidTypographySettings If boolean, whether the function should try to convert font sizes to fluid values,
- *                                                 otherwise an object containing theme fluid typography settings.
+ * @param {Object}         attributes Block attributes.
+ * @param {Object|boolean} settings   Merged theme.json settings
  *
  * @return {Object} Typography block support derived CSS classes & styles.
  */
-export function getTypographyClassesAndStyles(
-	attributes,
-	fluidTypographySettings
-) {
+export function getTypographyClassesAndStyles( attributes, settings ) {
 	let typographyStyles = attributes?.style?.typography || {};
+	const fluidTypographySettings = settings?.typography?.fluid;
 
 	if (
 		!! fluidTypographySettings &&
@@ -40,6 +38,7 @@ export function getTypographyClassesAndStyles(
 			getComputedFluidTypographyValue( {
 				fontSize: attributes?.style?.typography?.fontSize,
 				minimumFontSizeLimit: fluidTypographySettings?.minFontSize,
+				maximumViewPortWidth: settings?.layout?.wideSize,
 			} ) || attributes?.style?.typography?.fontSize;
 		typographyStyles = {
 			...typographyStyles,

diff --git a/packages/block-library/src/search/edit.js b/packages/block-library/src/search/edit.js
@@ -115,10 +115,15 @@ export default function SearchEdit( {
 
 	const colorProps = useColorProps( attributes );
 	const fluidTypographySettings = useSetting( 'typography.fluid' );
-	const typographyProps = useTypographyProps(
-		attributes,
-		fluidTypographySettings
-	);
+	const layout = useSetting( 'layout' );
+	const typographyProps = useTypographyProps( attributes, {
+		typography: {
+			fluid: fluidTypographySettings,
+		},
+		layout: {
+			wideSize: layout?.wideSize,
+		},
+	} );
 	const unitControlInstanceId = useInstanceId( UnitControl );
 	const unitControlInputId = `wp-block-search__width-${ unitControlInstanceId }`;
 	const isButtonPositionInside = 'button-inside' === buttonPosition;

diff --git a/phpunit/block-supports/typography-test.php b/phpunit/block-supports/typography-test.php
@@ -655,7 +655,7 @@ public function data_generate_block_supports_font_size_fixtures() {
 			'returns clamp value using custom fluid config' => array(
 				'font_size_value' => '17px',
 				'theme_slug'      => 'block-theme-child-with-fluid-typography-config',
-				'expected_output' => 'font-size:clamp(16px, 1rem + ((1vw - 3.2px) * 0.078), 17px);',
+				'expected_output' => 'font-size:clamp(16px, 1rem + ((1vw - 3.2px) * 0.147), 17px);',
 			),
 			'returns value when font size <= custom min font size bound' => array(
 				'font_size_value' => '15px',

diff --git a/phpunit/data/themedir1/block-theme-child-with-fluid-typography-config/theme.json b/phpunit/data/themedir1/block-theme-child-with-fluid-typography-config/theme.json
@@ -2,6 +2,9 @@
 	"version": 2,
 	"settings": {
 		"appearanceTools": true,
+		"layout": {
+			"wideSize": "1000px"
+		},
 		"typography": {
 			"fluid": {
 				"minFontSize": "16px"

diff --git a/schemas/json/theme.json b/schemas/json/theme.json
@@ -266,7 +266,7 @@
 							"type": "string"
 						},
 						"wideSize": {
-							"description": "Sets the max-width of wide (`.alignwide`) content.",
+							"description": "Sets the max-width of wide (`.alignwide`) content. Also used as the maximum viewport when calculating fluid font sizes",
 							"type": "string"
 						}
 					},