Based on #49707

Testing out using `settings.layout.wideSize` as the maximum viewport width Updating tests to come
WordPress · Apr 14, 2023 · ad7e599 · ad7e599
1 parent 8c5b1be
commit ad7e599
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 14 deletions.
diff --git 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
@@ -526,7 +526,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
@@ -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
@@ -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;