diff --git a/lib/block-supports/typography.php b/lib/block-supports/typography.php index 644d65b761557..e604de53eec07 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 c25c2f7b07cf1..91aa34572648d 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/test/use-typography-props.js b/packages/block-editor/src/hooks/test/use-typography-props.js index 01d597a1ff15c..77b2e0cdf33cb 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 da5869ad9aec0..d6a6b0629143d 100644 --- 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 index 78ff685ff01fe..5d82ced145926 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; diff --git a/phpunit/block-supports/typography-test.php b/phpunit/block-supports/typography-test.php index 99376bf23adfc..6fd81bcbeca6c 100644 --- 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 index d0ec32d9caac0..73864f2920039 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" diff --git a/schemas/json/theme.json b/schemas/json/theme.json index 4417daff97cd0..944dcccb52f23 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" } },