From 17ef72cd4c6c450d2d9eb3631c0b936b7842dcb3 Mon Sep 17 00:00:00 2001
From: Andrew Serong <14988353+andrewserong@users.noreply.github.com>
Date: Wed, 22 Mar 2023 12:34:48 +1100
Subject: [PATCH 1/8] Fluid Typography: Try adding a ceiling to the calculated
 minimum font size

---
 lib/block-supports/typography.php | 14 ++++++++++++++
 1 file changed, 14 insertions(+)

diff --git a/lib/block-supports/typography.php b/lib/block-supports/typography.php
index 644d65b7615571..2ad45e212e0a8f 100644
--- a/lib/block-supports/typography.php
+++ b/lib/block-supports/typography.php
@@ -517,6 +517,14 @@ function gutenberg_get_typography_font_size_value( $preset, $should_use_fluid_ty
 		)
 	);
 
+	// Sets a ceiling for the minimum font size.
+	$minimum_font_size_ceiling = gutenberg_get_typography_value_and_unit(
+		'64px',
+		array(
+			'coerce_to' => $preferred_size['unit'],
+		)
+	);
+
 	// Don't enforce minimum font size if a font size has explicitly set a min and max value.
 	if ( ! empty( $minimum_font_size_limit ) && ( ! $minimum_font_size_raw && ! $maximum_font_size_raw ) ) {
 		/*
@@ -550,6 +558,12 @@ function gutenberg_get_typography_font_size_value( $preset, $should_use_fluid_ty
 		$minimum_font_size_factor     = min( max( 1 - 0.075 * log( $preferred_font_size_in_px, 2 ), $default_minimum_font_size_factor_min ), $default_minimum_font_size_factor_max );
 		$calculated_minimum_font_size = round( $preferred_size['value'] * $minimum_font_size_factor, 3 );
 
+		// Ensure calculated minimum font size is not greater than the ceiling.
+		// This is to prevent the font size from being too large in smaller viewports.
+		if ( $calculated_minimum_font_size > $minimum_font_size_ceiling['value'] ) {
+			$calculated_minimum_font_size = $minimum_font_size_ceiling['value'];
+		}
+
 		// Only use calculated min font size if it's > $minimum_font_size_limit value.
 		if ( ! empty( $minimum_font_size_limit ) && $calculated_minimum_font_size <= $minimum_font_size_limit['value'] ) {
 			$minimum_font_size_raw = $minimum_font_size_limit['value'] . $minimum_font_size_limit['unit'];

From fe8694982fc91663595e7c2ce158788782683374 Mon Sep 17 00:00:00 2001
From: Andrew Serong <14988353+andrewserong@users.noreply.github.com>
Date: Wed, 22 Mar 2023 14:02:23 +1100
Subject: [PATCH 2/8] Add test to ensure ceiling is skipped when min font size
 is provided

---
 .../global-styles/test/typography-utils.js       | 16 ++++++++++++++++
 phpunit/block-supports/typography-test.php       | 11 +++++++++++
 2 files changed, 27 insertions(+)

diff --git a/packages/block-editor/src/components/global-styles/test/typography-utils.js b/packages/block-editor/src/components/global-styles/test/typography-utils.js
index a91a8f39e8eccc..76d9a22951934c 100644
--- a/packages/block-editor/src/components/global-styles/test/typography-utils.js
+++ b/packages/block-editor/src/components/global-styles/test/typography-utils.js
@@ -423,6 +423,22 @@ describe( 'typography utils', () => {
 				expected:
 					'clamp(100px, 6.25rem + ((1vw - 3.2px) * 7.813), 200px)',
 			},
+
+			{
+				message:
+					'should not use ceiling for minimum font size when custom min font size is set',
+				preset: {
+					size: '200px',
+					fluid: {
+						min: '100px',
+					},
+				},
+				typographySettings: {
+					fluid: true,
+				},
+				expected:
+					'clamp(100px, 6.25rem + ((1vw - 7.68px) * 12.019), 200px)',
+			},
 		].forEach( ( { message, preset, typographySettings, expected } ) => {
 			it( `${ message }`, () => {
 				expect(
diff --git a/phpunit/block-supports/typography-test.php b/phpunit/block-supports/typography-test.php
index 99376bf23adfcf..cc4d8c7c297a98 100644
--- a/phpunit/block-supports/typography-test.php
+++ b/phpunit/block-supports/typography-test.php
@@ -578,6 +578,17 @@ public function data_generate_font_size_preset_fixtures() {
 				'should_use_fluid_typography' => true,
 				'expected_output'             => 'clamp(100px, 6.25rem + ((1vw - 3.2px) * 7.813), 200px)',
 			),
+
+			'should not use ceiling for minimum font size when custom min font size is set' => array(
+				'font_size'                   => array(
+					'size'  => '200px',
+					'fluid' => array(
+						'min' => '100px',
+					),
+				),
+				'should_use_fluid_typography' => true,
+				'expected_output'             => 'clamp(100px, 6.25rem + ((1vw - 7.68px) * 12.019), 200px)',
+			),
 		);
 	}
 

From 6da39695a30ec3cb6b8a2aedd80deea91f8f67b1 Mon Sep 17 00:00:00 2001
From: ramon <ramonjd@gmail.com>
Date: Tue, 11 Apr 2023 13:22:23 +1000
Subject: [PATCH 3/8] 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)

---
 lib/block-supports/typography.php | 8 --------
 packages/block-editor/README.md   | 3 ++-
 2 files changed, 2 insertions(+), 9 deletions(-)

diff --git a/lib/block-supports/typography.php b/lib/block-supports/typography.php
index 2ad45e212e0a8f..c3474a68a68a78 100644
--- a/lib/block-supports/typography.php
+++ b/lib/block-supports/typography.php
@@ -517,14 +517,6 @@ function gutenberg_get_typography_font_size_value( $preset, $should_use_fluid_ty
 		)
 	);
 
-	// Sets a ceiling for the minimum font size.
-	$minimum_font_size_ceiling = gutenberg_get_typography_value_and_unit(
-		'64px',
-		array(
-			'coerce_to' => $preferred_size['unit'],
-		)
-	);
-
 	// Don't enforce minimum font size if a font size has explicitly set a min and max value.
 	if ( ! empty( $minimum_font_size_limit ) && ( ! $minimum_font_size_raw && ! $maximum_font_size_raw ) ) {
 		/*
diff --git a/packages/block-editor/README.md b/packages/block-editor/README.md
index c25c2f7b07cf18..d516fcf721b5fb 100644
--- a/packages/block-editor/README.md
+++ b/packages/block-editor/README.md
@@ -444,7 +444,8 @@ _Returns_
 
 ### getFontSize
 
-Returns the font size object based on an array of named font sizes and the namedFontSize and customFontSize values. If namedFontSize is undefined or not found in fontSizes an object with just the size value based on customFontSize is returned.
+Returns the font size object based on an array of named font sizes and the namedFontSize and customFontSize values.
+If namedFontSize is undefined or not found in fontSizes an object with just the size value based on customFontSize is returned.
 
 _Parameters_
 

From 11b68ca368e5680d0476b8cce81a588f7208dbf3 Mon Sep 17 00:00:00 2001
From: ramon <ramonjd@gmail.com>
Date: Tue, 11 Apr 2023 13:54:04 +1000
Subject: [PATCH 4/8] Fix lint and JS tests

---
 packages/block-editor/README.md | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/packages/block-editor/README.md b/packages/block-editor/README.md
index d516fcf721b5fb..c25c2f7b07cf18 100644
--- a/packages/block-editor/README.md
+++ b/packages/block-editor/README.md
@@ -444,8 +444,7 @@ _Returns_
 
 ### getFontSize
 
-Returns the font size object based on an array of named font sizes and the namedFontSize and customFontSize values.
-If namedFontSize is undefined or not found in fontSizes an object with just the size value based on customFontSize is returned.
+Returns the font size object based on an array of named font sizes and the namedFontSize and customFontSize values. If namedFontSize is undefined or not found in fontSizes an object with just the size value based on customFontSize is returned.
 
 _Parameters_
 

From d6dab886ef08847980e132982315ddd489aebe3b Mon Sep 17 00:00:00 2001
From: ramon <ramonjd@gmail.com>
Date: Tue, 11 Apr 2023 13:57:16 +1000
Subject: [PATCH 5/8] EL LINTO DEL DIABLO!

---
 lib/block-supports/typography.php | 6 ------
 1 file changed, 6 deletions(-)

diff --git a/lib/block-supports/typography.php b/lib/block-supports/typography.php
index c3474a68a68a78..644d65b7615571 100644
--- a/lib/block-supports/typography.php
+++ b/lib/block-supports/typography.php
@@ -550,12 +550,6 @@ function gutenberg_get_typography_font_size_value( $preset, $should_use_fluid_ty
 		$minimum_font_size_factor     = min( max( 1 - 0.075 * log( $preferred_font_size_in_px, 2 ), $default_minimum_font_size_factor_min ), $default_minimum_font_size_factor_max );
 		$calculated_minimum_font_size = round( $preferred_size['value'] * $minimum_font_size_factor, 3 );
 
-		// Ensure calculated minimum font size is not greater than the ceiling.
-		// This is to prevent the font size from being too large in smaller viewports.
-		if ( $calculated_minimum_font_size > $minimum_font_size_ceiling['value'] ) {
-			$calculated_minimum_font_size = $minimum_font_size_ceiling['value'];
-		}
-
 		// Only use calculated min font size if it's > $minimum_font_size_limit value.
 		if ( ! empty( $minimum_font_size_limit ) && $calculated_minimum_font_size <= $minimum_font_size_limit['value'] ) {
 			$minimum_font_size_raw = $minimum_font_size_limit['value'] . $minimum_font_size_limit['unit'];

From 3f23a05f0e3f5bd4eaee4e354e4fc271a404c7e9 Mon Sep 17 00:00:00 2001
From: ramon <ramonjd@gmail.com>
Date: Fri, 14 Apr 2023 13:25:11 +1000
Subject: [PATCH 6/8] Based on
 https://github.com/WordPress/gutenberg/pull/49707 Testing out using
 `settings.layout.wideSize` as the maximum viewport width Updating tests to
 come

---
 lib/block-supports/typography.php                   |  7 +++++--
 packages/block-editor/README.md                     |  2 +-
 .../block-editor/src/hooks/use-typography-props.js  | 12 +++++-------
 packages/block-library/src/search/edit.js           | 13 +++++++++----
 4 files changed, 20 insertions(+), 14 deletions(-)

diff --git a/lib/block-supports/typography.php b/lib/block-supports/typography.php
index 644d65b7615571..e604de53eec07c 100644
--- a/lib/block-supports/typography.php
+++ b/lib/block-supports/typography.php
@@ -467,7 +467,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'] ) ) ?
@@ -481,7 +484,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
index c25c2f7b07cf18..91aa34572648df 100644
--- 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/use-typography-props.js b/packages/block-editor/src/hooks/use-typography-props.js
index da5869ad9aec07..d8c189d7894025 100644
--- a/packages/block-editor/src/hooks/use-typography-props.js
+++ b/packages/block-editor/src/hooks/use-typography-props.js
@@ -19,17 +19,14 @@ import { getComputedFluidTypographyValue } from '../components/font-sizes/fluid-
  * 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 +37,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
index 78ff685ff01fe1..5d82ced145926f 100644
--- 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;

From fff98f0a2924ace3e72e3b826e2fb57fd115c102 Mon Sep 17 00:00:00 2001
From: ramon <ramonjd@gmail.com>
Date: Fri, 21 Apr 2023 10:34:47 +1000
Subject: [PATCH 7/8] Updating tests and generally cleaning up after a bizarre
 rebase session.

---
 .../global-styles/test/typography-utils.js    | 16 ------
 .../src/hooks/test/use-typography-props.js    | 49 ++++++++++++++++++-
 .../src/hooks/use-typography-props.js         |  9 ++--
 phpunit/block-supports/typography-test.php    | 13 +----
 .../theme.json                                |  3 ++
 5 files changed, 56 insertions(+), 34 deletions(-)

diff --git a/packages/block-editor/src/components/global-styles/test/typography-utils.js b/packages/block-editor/src/components/global-styles/test/typography-utils.js
index 76d9a22951934c..a91a8f39e8eccc 100644
--- a/packages/block-editor/src/components/global-styles/test/typography-utils.js
+++ b/packages/block-editor/src/components/global-styles/test/typography-utils.js
@@ -423,22 +423,6 @@ describe( 'typography utils', () => {
 				expected:
 					'clamp(100px, 6.25rem + ((1vw - 3.2px) * 7.813), 200px)',
 			},
-
-			{
-				message:
-					'should not use ceiling for minimum font size when custom min font size is set',
-				preset: {
-					size: '200px',
-					fluid: {
-						min: '100px',
-					},
-				},
-				typographySettings: {
-					fluid: true,
-				},
-				expected:
-					'clamp(100px, 6.25rem + ((1vw - 7.68px) * 12.019), 200px)',
-			},
 		].forEach( ( { message, preset, typographySettings, expected } ) => {
 			it( `${ message }`, () => {
 				expect(
diff --git a/packages/block-editor/src/hooks/test/use-typography-props.js b/packages/block-editor/src/hooks/test/use-typography-props.js
index 01d597a1ff15c2..77b2e0cdf33cb7 100644
--- 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
index d8c189d7894025..d6a6b0629143db 100644
--- a/packages/block-editor/src/hooks/use-typography-props.js
+++ b/packages/block-editor/src/hooks/use-typography-props.js
@@ -11,10 +11,11 @@ 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.
diff --git a/phpunit/block-supports/typography-test.php b/phpunit/block-supports/typography-test.php
index cc4d8c7c297a98..6fd81bcbeca6ca 100644
--- a/phpunit/block-supports/typography-test.php
+++ b/phpunit/block-supports/typography-test.php
@@ -578,17 +578,6 @@ public function data_generate_font_size_preset_fixtures() {
 				'should_use_fluid_typography' => true,
 				'expected_output'             => 'clamp(100px, 6.25rem + ((1vw - 3.2px) * 7.813), 200px)',
 			),
-
-			'should not use ceiling for minimum font size when custom min font size is set' => array(
-				'font_size'                   => array(
-					'size'  => '200px',
-					'fluid' => array(
-						'min' => '100px',
-					),
-				),
-				'should_use_fluid_typography' => true,
-				'expected_output'             => 'clamp(100px, 6.25rem + ((1vw - 7.68px) * 12.019), 200px)',
-			),
 		);
 	}
 
@@ -666,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
index d0ec32d9caac0a..73864f2920039d 100644
--- 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"

From e02991603a48896d9287c0a73336fc54f0697ece Mon Sep 17 00:00:00 2001
From: ramon <ramonjd@gmail.com>
Date: Mon, 1 May 2023 13:00:59 +1000
Subject: [PATCH 8/8] This commit: - elaborates on the purpose of
 layout.wideSize in the theme.json schema

---
 schemas/json/theme.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/schemas/json/theme.json b/schemas/json/theme.json
index 4417daff97cd05..944dcccb52f23c 100644
--- 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"
 						}
 					},