From f4f5e37259deebec48df606cb0d9e96ad2b4748c Mon Sep 17 00:00:00 2001 From: Ramon Date: Mon, 8 May 2023 10:59:51 +1000 Subject: [PATCH] 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 https://github.com/WordPress/gutenberg/pull/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 <14988353+andrewserong@users.noreply.github.com> --- lib/block-supports/typography.php | 7 ++- packages/block-editor/README.md | 2 +- .../src/hooks/test/use-typography-props.js | 49 ++++++++++++++++++- .../src/hooks/use-typography-props.js | 21 ++++---- packages/block-library/src/search/edit.js | 13 +++-- phpunit/block-supports/typography-test.php | 2 +- .../theme.json | 3 ++ schemas/json/theme.json | 2 +- 8 files changed, 77 insertions(+), 22 deletions(-) diff --git a/lib/block-supports/typography.php b/lib/block-supports/typography.php index afd410b3b9e88f..f1d29217e38830 100644 --- 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 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/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 da5869ad9aec07..d6a6b0629143db 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 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; diff --git a/phpunit/block-supports/typography-test.php b/phpunit/block-supports/typography-test.php index 99376bf23adfcf..6fd81bcbeca6ca 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 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" diff --git a/schemas/json/theme.json b/schemas/json/theme.json index 47fb6f00e7195e..5f9fd13c041575 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" } },