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;