From 7973d9cc5890b64c78e86cb86e1d52d8df55fc69 Mon Sep 17 00:00:00 2001 From: Ramon Date: Fri, 16 Dec 2022 10:26:16 +1100 Subject: [PATCH] Fluid typography: add configurable settings for minimum font size to theme.json (#42489) * Reinstating the commit in edeaca7068196f8960453965fe7fa64632d573ef so we can test fluid configuration Update docs * Adding a filter pre-calculations * $fluid_settings was missing * Removing filter Pulling across config changes to JS * Add config slot for minFontSize * Adding config to test theme * Updating args to include `minimumFontSizeLimit` Fixed `typographySettings` check * Updating tests and fixing settings logic Updating schema Changelogs * Ensure that a theme's fluid font size settings are used when calculating custom font sizes and search block font sizes. * Validating incoming viewport widths and min font size against accepted units. * Ensure we check for fluid settings validity in getTypographyClassesAndStyles * Rolling back configurable values to the global minimum font size only. Updating tests. * Remove config assignment from getTypographyClassesAndStyles and updated tests. * Adding frontend test for unsupported units in min font size config * simplifying condition so that it's readable in screen widths < 100000px --- .../theme-json-reference/theme-json-living.md | 2 +- lib/block-supports/typography.php | 11 ++- packages/block-editor/CHANGELOG.md | 1 + packages/block-editor/README.md | 3 +- .../src/components/font-sizes/fluid-utils.js | 8 +- packages/block-editor/src/hooks/font-size.js | 17 +++- .../src/hooks/test/use-typography-props.js | 26 +++++ .../src/hooks/use-typography-props.js | 22 +++-- packages/block-library/src/search/edit.js | 4 +- packages/edit-site/CHANGELOG.md | 6 +- .../global-styles/test/typography-utils.js | 95 ++++++++++++++----- .../global-styles/typography-utils.js | 28 +++++- phpunit/block-supports/typography-test.php | 49 ++++++---- .../style.css | 8 ++ .../theme.json | 11 +++ schemas/json/theme.json | 19 +++- 16 files changed, 243 insertions(+), 67 deletions(-) create mode 100644 phpunit/data/themedir1/block-theme-child-with-fluid-typography-config/style.css create mode 100644 phpunit/data/themedir1/block-theme-child-with-fluid-typography-config/theme.json diff --git a/docs/reference-guides/theme-json-reference/theme-json-living.md b/docs/reference-guides/theme-json-reference/theme-json-living.md index a694cf63e909f..9b074edace6ae 100644 --- a/docs/reference-guides/theme-json-reference/theme-json-living.md +++ b/docs/reference-guides/theme-json-reference/theme-json-living.md @@ -119,7 +119,7 @@ Settings related to typography. | customFontSize | boolean | true | | | fontStyle | boolean | true | | | fontWeight | boolean | true | | -| fluid | boolean | | | +| fluid | undefined | false | | | letterSpacing | boolean | true | | | lineHeight | boolean | false | | | textDecoration | boolean | true | | diff --git a/lib/block-supports/typography.php b/lib/block-supports/typography.php index 01d223b84281e..809fba1a6e7ac 100644 --- a/lib/block-supports/typography.php +++ b/lib/block-supports/typography.php @@ -451,18 +451,25 @@ 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' ) ); - $should_use_fluid_typography = isset( $typography_settings['fluid'] ) && true === $typography_settings['fluid'] ? true : $should_use_fluid_typography; + $should_use_fluid_typography + = isset( $typography_settings['fluid'] ) && + ( true === $typography_settings['fluid'] || is_array( $typography_settings['fluid'] ) ) ? + true : + $should_use_fluid_typography; if ( ! $should_use_fluid_typography ) { return $preset['size']; } + $fluid_settings = isset( $typography_settings['fluid'] ) && is_array( $typography_settings['fluid'] ) ? $typography_settings['fluid'] : array(); + // Defaults. $default_maximum_viewport_width = '1600px'; $default_minimum_viewport_width = '768px'; $default_minimum_font_size_factor = 0.75; $default_scale_factor = 1; - $default_minimum_font_size_limit = '14px'; + $has_min_font_size = isset( $fluid_settings['minFontSize'] ) && ! empty( gutenberg_get_typography_value_and_unit( $fluid_settings['minFontSize'] ) ); + $default_minimum_font_size_limit = $has_min_font_size ? $fluid_settings['minFontSize'] : '14px'; // Font sizes. $fluid_font_size_settings = isset( $preset['fluid'] ) ? $preset['fluid'] : null; diff --git a/packages/block-editor/CHANGELOG.md b/packages/block-editor/CHANGELOG.md index 21666d999c1d1..34cd726c55fdf 100644 --- a/packages/block-editor/CHANGELOG.md +++ b/packages/block-editor/CHANGELOG.md @@ -9,6 +9,7 @@ ### Enhancements - `URLInput`: the `renderSuggestions` callback prop now receives `currentInputValue` as a new parameter ([45806](https://github.com/WordPress/gutenberg/pull/45806)). +- Fluid typography: add configurable fluid typography settings for minimum font size to theme.json ([#42489](https://github.com/WordPress/gutenberg/pull/42489)). ### Bug Fix diff --git a/packages/block-editor/README.md b/packages/block-editor/README.md index 5760f1584c5db..5a861eaa1acad 100644 --- a/packages/block-editor/README.md +++ b/packages/block-editor/README.md @@ -428,6 +428,7 @@ _Parameters_ - _args.minimumFontSize_ `?string`: Minimum font size for any clamp() calculation. Optional. - _args.scaleFactor_ `?number`: A scale factor to determine how fast a font scales within boundaries. Optional. - _args.minimumFontSizeFactor_ `?number`: How much to scale defaultFontSize by to derive minimumFontSize. Optional. +- _args.minimumFontSizeLimit_ `?string`: The smallest a calculated font size may be. Optional. _Returns_ @@ -520,7 +521,7 @@ attributes. _Parameters_ - _attributes_ `Object`: Block attributes. -- _isFluidFontSizeActive_ `boolean`: Whether the function should try to convert font sizes to fluid values. +- _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. _Returns_ diff --git a/packages/block-editor/src/components/font-sizes/fluid-utils.js b/packages/block-editor/src/components/font-sizes/fluid-utils.js index de8a27e3014e8..f5816e9823d7a 100644 --- a/packages/block-editor/src/components/font-sizes/fluid-utils.js +++ b/packages/block-editor/src/components/font-sizes/fluid-utils.js @@ -40,6 +40,7 @@ const DEFAULT_MINIMUM_FONT_SIZE_LIMIT = '14px'; * @param {?string} args.minimumFontSize Minimum font size for any clamp() calculation. Optional. * @param {?number} args.scaleFactor A scale factor to determine how fast a font scales within boundaries. Optional. * @param {?number} args.minimumFontSizeFactor How much to scale defaultFontSize by to derive minimumFontSize. Optional. + * @param {?string} args.minimumFontSizeLimit The smallest a calculated font size may be. Optional. * * @return {string|null} A font-size value using clamp(). */ @@ -51,8 +52,13 @@ export function getComputedFluidTypographyValue( { maximumViewPortWidth = DEFAULT_MAXIMUM_VIEWPORT_WIDTH, scaleFactor = DEFAULT_SCALE_FACTOR, minimumFontSizeFactor = DEFAULT_MINIMUM_FONT_SIZE_FACTOR, - minimumFontSizeLimit = DEFAULT_MINIMUM_FONT_SIZE_LIMIT, + minimumFontSizeLimit, } ) { + // Validate incoming settings and set defaults. + minimumFontSizeLimit = !! getTypographyValueAndUnit( minimumFontSizeLimit ) + ? minimumFontSizeLimit + : DEFAULT_MINIMUM_FONT_SIZE_LIMIT; + /* * Calculates missing minimumFontSize and maximumFontSize from * defaultFontSize if provided. diff --git a/packages/block-editor/src/hooks/font-size.js b/packages/block-editor/src/hooks/font-size.js index 6cb950afc4564..0c7a71fd23d68 100644 --- a/packages/block-editor/src/hooks/font-size.js +++ b/packages/block-editor/src/hooks/font-size.js @@ -324,13 +324,22 @@ function addEditPropsForFluidCustomFontSizes( blockType ) { // BlockListContext.Provider. If we set fontSize using editor. // BlockListBlock instead of using getEditWrapperProps then the value is // clobbered when the core/style/addEditProps filter runs. - const isFluidTypographyEnabled = - !! select( blockEditorStore ).getSettings().__experimentalFeatures + const fluidTypographyConfig = + select( blockEditorStore ).getSettings().__experimentalFeatures ?.typography?.fluid; + const fluidTypographySettings = + typeof fluidTypographyConfig === 'object' + ? fluidTypographyConfig + : {}; + const newFontSize = - fontSize && isFluidTypographyEnabled - ? getComputedFluidTypographyValue( { fontSize } ) + fontSize && !! fluidTypographyConfig + ? getComputedFluidTypographyValue( { + fontSize, + minimumFontSizeLimit: + fluidTypographySettings?.minFontSize, + } ) : null; if ( newFontSize === null ) { 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 00557881467ca..12336eb2c44af 100644 --- a/packages/block-editor/src/hooks/test/use-typography-props.js +++ b/packages/block-editor/src/hooks/test/use-typography-props.js @@ -47,4 +47,30 @@ describe( 'getTypographyClassesAndStyles', () => { }, } ); } ); + + it( 'should return configured fluid font size styles', () => { + const attributes = { + fontFamily: 'tofu', + style: { + typography: { + textDecoration: 'underline', + fontSize: '2rem', + textTransform: 'uppercase', + }, + }, + }; + expect( + getTypographyClassesAndStyles( attributes, { + minFontSize: '1rem', + } ) + ).toEqual( { + className: 'has-tofu-font-family', + style: { + textDecoration: 'underline', + fontSize: + 'clamp(1.5rem, 1.5rem + ((1vw - 0.48rem) * 0.962), 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 d70ae08aafc59..da5869ad9aec0 100644 --- a/packages/block-editor/src/hooks/use-typography-props.js +++ b/packages/block-editor/src/hooks/use-typography-props.js @@ -19,23 +19,31 @@ 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 {boolean} isFluidFontSizeActive Whether the function should try to convert font sizes to fluid values. + * @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. * * @return {Object} Typography block support derived CSS classes & styles. */ export function getTypographyClassesAndStyles( attributes, - isFluidFontSizeActive + fluidTypographySettings ) { let typographyStyles = attributes?.style?.typography || {}; - if ( isFluidFontSizeActive ) { + if ( + !! fluidTypographySettings && + ( true === fluidTypographySettings || + Object.keys( fluidTypographySettings ).length !== 0 ) + ) { + const newFontSize = + getComputedFluidTypographyValue( { + fontSize: attributes?.style?.typography?.fontSize, + minimumFontSizeLimit: fluidTypographySettings?.minFontSize, + } ) || attributes?.style?.typography?.fontSize; typographyStyles = { ...typographyStyles, - fontSize: getComputedFluidTypographyValue( { - fontSize: attributes?.style?.typography?.fontSize, - } ), + fontSize: newFontSize, }; } diff --git a/packages/block-library/src/search/edit.js b/packages/block-library/src/search/edit.js index a3db69287f8f7..78ff685ff01fe 100644 --- a/packages/block-library/src/search/edit.js +++ b/packages/block-library/src/search/edit.js @@ -114,10 +114,10 @@ export default function SearchEdit( { } const colorProps = useColorProps( attributes ); - const fluidTypographyEnabled = useSetting( 'typography.fluid' ); + const fluidTypographySettings = useSetting( 'typography.fluid' ); const typographyProps = useTypographyProps( attributes, - fluidTypographyEnabled + fluidTypographySettings ); const unitControlInstanceId = useInstanceId( UnitControl ); const unitControlInputId = `wp-block-search__width-${ unitControlInstanceId }`; diff --git a/packages/edit-site/CHANGELOG.md b/packages/edit-site/CHANGELOG.md index 83dcb848d66b3..357668d600d11 100644 --- a/packages/edit-site/CHANGELOG.md +++ b/packages/edit-site/CHANGELOG.md @@ -4,7 +4,11 @@ ### Breaking Changes -- Updated dependencies to require React 18 ([45235](https://github.com/WordPress/gutenberg/pull/45235)) +- Updated dependencies to require React 18 ([45235](https://github.com/WordPress/gutenberg/pull/45235)). + +### Enhancements + +- Fluid typography: add configurable fluid typography settings for minimum font size to theme.json ([#42489](https://github.com/WordPress/gutenberg/pull/42489)). ## 4.19.0 (2022-11-16) diff --git a/packages/edit-site/src/components/global-styles/test/typography-utils.js b/packages/edit-site/src/components/global-styles/test/typography-utils.js index 647b02cb4be1f..9d0213cb53e55 100644 --- a/packages/edit-site/src/components/global-styles/test/typography-utils.js +++ b/packages/edit-site/src/components/global-styles/test/typography-utils.js @@ -7,7 +7,8 @@ describe( 'typography utils', () => { describe( 'getTypographyFontSizeValue', () => { [ { - message: 'returns value when fluid typography is deactivated', + message: + 'should return value when fluid typography is not active', preset: { size: '28px', }, @@ -16,7 +17,7 @@ describe( 'typography utils', () => { }, { - message: 'returns value where font size is 0', + message: 'should return value where font size is 0', preset: { size: 0, }, @@ -25,7 +26,7 @@ describe( 'typography utils', () => { }, { - message: "returns value where font size is '0'", + message: "should return value where font size is '0'", preset: { size: '0', }, @@ -34,7 +35,7 @@ describe( 'typography utils', () => { }, { - message: 'returns value where `size` is `null`.', + message: 'should return value where `size` is `null`.', preset: { size: null, }, @@ -43,7 +44,7 @@ describe( 'typography utils', () => { }, { - message: 'returns value when fluid is `false`', + message: 'should return value when fluid is `false`', preset: { size: '28px', fluid: false, @@ -55,7 +56,7 @@ describe( 'typography utils', () => { }, { - message: 'returns already clamped value', + message: 'should return already clamped value', preset: { size: 'clamp(21px, 1.313rem + ((1vw - 7.68px) * 2.524), 42px)', fluid: false, @@ -68,7 +69,7 @@ describe( 'typography utils', () => { }, { - message: 'returns value with unsupported unit', + message: 'should return value with unsupported unit', preset: { size: '1000%', fluid: false, @@ -80,7 +81,7 @@ describe( 'typography utils', () => { }, { - message: 'returns clamp value with rem min and max units', + message: 'should return clamp value with rem min and max units', preset: { size: '1.75rem', }, @@ -92,7 +93,7 @@ describe( 'typography utils', () => { }, { - message: 'returns clamp value with eem min and max units', + message: 'should return clamp value with eem min and max units', preset: { size: '1.75em', }, @@ -104,7 +105,7 @@ describe( 'typography utils', () => { }, { - message: 'returns clamp value for floats', + message: 'should return clamp value for floats', preset: { size: '100.175px', }, @@ -116,7 +117,8 @@ describe( 'typography utils', () => { }, { - message: 'coerces integer to `px` and returns clamp value', + message: + 'should coerce integer to `px` and returns clamp value', preset: { size: 33, fluid: true, @@ -129,7 +131,7 @@ describe( 'typography utils', () => { }, { - message: 'coerces float to `px` and returns clamp value', + message: 'should coerce float to `px` and returns clamp value', preset: { size: 100.23, fluid: true, @@ -142,7 +144,8 @@ describe( 'typography utils', () => { }, { - message: 'returns clamp value when `fluid` is empty array', + message: + 'should return clamp value when `fluid` is empty array', preset: { size: '28px', fluid: [], @@ -155,7 +158,7 @@ describe( 'typography utils', () => { }, { - message: 'returns clamp value when `fluid` is `null`', + message: 'should return clamp value when `fluid` is `null`', preset: { size: '28px', fluid: null, @@ -169,7 +172,7 @@ describe( 'typography utils', () => { { message: - 'returns clamp value if min font size is greater than max', + 'should return clamp value if min font size is greater than max', preset: { size: '3rem', fluid: { @@ -185,7 +188,7 @@ describe( 'typography utils', () => { }, { - message: 'returns value with invalid min/max fluid units', + message: 'should return value with invalid min/max fluid units', preset: { size: '10em', fluid: { @@ -201,7 +204,7 @@ describe( 'typography utils', () => { { message: - 'returns value when size is < lower bounds and no fluid min/max set', + 'should return value when size is < lower bounds and no fluid min/max set', preset: { size: '3px', }, @@ -213,7 +216,7 @@ describe( 'typography utils', () => { { message: - 'returns value when size is equal to lower bounds and no fluid min/max set', + 'should return value when size is equal to lower bounds and no fluid min/max set', preset: { size: '14px', }, @@ -224,7 +227,8 @@ describe( 'typography utils', () => { }, { - message: 'returns clamp value with different min max units', + message: + 'should return clamp value with different min max units', preset: { size: '28px', fluid: { @@ -240,7 +244,8 @@ describe( 'typography utils', () => { }, { - message: 'returns clamp value where no fluid max size is set', + message: + 'should return clamp value where no fluid max size is set', preset: { size: '28px', fluid: { @@ -255,7 +260,8 @@ describe( 'typography utils', () => { }, { - message: 'returns clamp value where no fluid min size is set', + message: + 'should return clamp value where no fluid min size is set', preset: { size: '28px', fluid: { @@ -320,7 +326,7 @@ describe( 'typography utils', () => { { message: - 'returns clamp value when min and max font sizes are equal', + 'should return clamp value when min and max font sizes are equal', preset: { size: '4rem', fluid: { @@ -333,8 +339,51 @@ describe( 'typography utils', () => { }, expected: 'clamp(30px, 1.875rem + ((1vw - 7.68px) * 1), 30px)', }, + + { + message: + 'should use default min font size value where min font size unit in fluid config is not supported', + preset: { + size: '15px', + }, + typographySettings: { + fluid: { + minFontSize: '16%', + }, + }, + expected: + 'clamp(14px, 0.875rem + ((1vw - 7.68px) * 0.12), 15px)', + }, + + // Equivalent custom config PHP unit tests in `test_should_covert_font_sizes_to_fluid_values()`. + { + message: 'should return clamp value using custom fluid config', + preset: { + size: '17px', + }, + typographySettings: { + fluid: { + minFontSize: '16px', + }, + }, + expected: 'clamp(16px, 1rem + ((1vw - 7.68px) * 0.12), 17px)', + }, + + { + message: + 'should return value when font size <= custom min font size bound', + preset: { + size: '15px', + }, + typographySettings: { + fluid: { + minFontSize: '16px', + }, + }, + expected: '15px', + }, ].forEach( ( { message, preset, typographySettings, expected } ) => { - it( `should ${ message }`, () => { + it( `${ message }`, () => { expect( getTypographyFontSizeValue( preset, typographySettings ) ).toBe( expected ); diff --git a/packages/edit-site/src/components/global-styles/typography-utils.js b/packages/edit-site/src/components/global-styles/typography-utils.js index a792d1875005c..5720fdeb6ce91 100644 --- a/packages/edit-site/src/components/global-styles/typography-utils.js +++ b/packages/edit-site/src/components/global-styles/typography-utils.js @@ -23,13 +23,23 @@ import { getComputedFluidTypographyValue } from '@wordpress/block-editor'; * @property {boolean|FluidPreset|undefined} fluid A font size slug */ +/** + * @typedef {Object} TypographySettings + * @property {?string|?number} size A default font size. + * @property {?string} minViewPortWidth Minimum viewport size from which type will have fluidity. Optional if size is specified. + * @property {?string} maxViewPortWidth Maximum size up to which type will have fluidity. Optional if size is specified. + * @property {?number} scaleFactor A scale factor to determine how fast a font scales within boundaries. Optional. + * @property {?number} minFontSizeFactor How much to scale defaultFontSize by to derive minimumFontSize. Optional. + * @property {?string} minFontSize The smallest a calculated font size may be. Optional. + */ + /** * Returns a font-size value based on a given font-size preset. * Takes into account fluid typography parameters and attempts to return a css formula depending on available, valid values. * - * @param {Preset} preset - * @param {Object} typographySettings - * @param {boolean} typographySettings.fluid Whether fluid typography is enabled. + * @param {Preset} preset + * @param {Object} typographySettings + * @param {boolean|TypographySettings} typographySettings.fluid Whether fluid typography is enabled, and, optionally, fluid font size options. * * @return {string|*} A font-size value or the value of preset.size. */ @@ -44,7 +54,11 @@ export function getTypographyFontSizeValue( preset, typographySettings ) { return defaultSize; } - if ( true !== typographySettings?.fluid ) { + if ( + ! typographySettings?.fluid || + ( typeof typographySettings?.fluid === 'object' && + Object.keys( typographySettings.fluid ).length === 0 ) + ) { return defaultSize; } @@ -53,10 +67,16 @@ export function getTypographyFontSizeValue( preset, typographySettings ) { return defaultSize; } + const fluidTypographySettings = + typeof typographySettings?.fluid === 'object' + ? typographySettings?.fluid + : {}; + const fluidFontSizeValue = getComputedFluidTypographyValue( { minimumFontSize: preset?.fluid?.min, maximumFontSize: preset?.fluid?.max, fontSize: defaultSize, + minimumFontSizeLimit: fluidTypographySettings?.minFontSize, } ); if ( !! fluidFontSizeValue ) { diff --git a/phpunit/block-supports/typography-test.php b/phpunit/block-supports/typography-test.php index 63fd98d1e524f..1b9b6f97c63f6 100644 --- a/phpunit/block-supports/typography-test.php +++ b/phpunit/block-supports/typography-test.php @@ -557,22 +557,18 @@ public function data_generate_font_size_preset_fixtures() { /** * Tests that custom font sizes are converted to fluid values * in inline block supports styles, - * when "settings.typography.fluid" is set to `true`. + * when "settings.typography.fluid" is set to `true` or contains configured values. * * @covers ::gutenberg_register_typography_support * * @dataProvider data_generate_block_supports_font_size_fixtures * - * @param string $font_size_value The block supports custom font size value. - * @param bool $should_use_fluid_typography An override to switch fluid typography "on". Can be used for unit testing. - * @param string $expected_output Expected value of style property from gutenberg_apply_typography_support(). + * @param string $font_size_value The block supports custom font size value. + * @param string $theme_slug A theme slug corresponding to an available test theme. + * @param string $expected_output Expected value of style property from gutenberg_apply_typography_support(). */ - public function test_should_covert_font_sizes_to_fluid_values( $font_size_value, $should_use_fluid_typography, $expected_output ) { - if ( $should_use_fluid_typography ) { - switch_theme( 'block-theme-child-with-fluid-typography' ); - } else { - switch_theme( 'default' ); - } + public function test_should_covert_font_sizes_to_fluid_values( $font_size_value, $theme_slug, $expected_output ) { + switch_theme( $theme_slug ); $this->test_block_name = 'test/font-size-fluid-value'; register_block_type( @@ -614,15 +610,30 @@ public function test_should_covert_font_sizes_to_fluid_values( $font_size_value, */ public function data_generate_block_supports_font_size_fixtures() { return array( - 'default_return_value' => array( - 'font_size_value' => '50px', - 'should_use_fluid_typography' => false, - 'expected_output' => 'font-size:50px;', - ), - 'return_value_with_fluid_typography' => array( - 'font_size_value' => '50px', - 'should_use_fluid_typography' => true, - 'expected_output' => 'font-size:clamp(37.5px, 2.344rem + ((1vw - 7.68px) * 1.502), 50px);', + 'returns value when fluid typography is not active' => array( + 'font_size_value' => '15px', + 'theme_slug' => 'default', + 'expected_output' => 'font-size:15px;', + ), + 'returns clamp value using default config' => array( + 'font_size_value' => '15px', + 'theme_slug' => 'block-theme-child-with-fluid-typography', + 'expected_output' => 'font-size:clamp(14px, 0.875rem + ((1vw - 7.68px) * 0.12), 15px);', + ), + 'returns value when font size <= default min font size bound' => array( + 'font_size_value' => '13px', + 'theme_slug' => 'block-theme-child-with-fluid-typography', + 'expected_output' => 'font-size:13px;', + ), + '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 - 7.68px) * 0.12), 17px);', + ), + 'returns value when font size <= custom min font size bound' => array( + 'font_size_value' => '15px', + 'theme_slug' => 'block-theme-child-with-fluid-typography-config', + 'expected_output' => 'font-size:15px;', ), ); } diff --git a/phpunit/data/themedir1/block-theme-child-with-fluid-typography-config/style.css b/phpunit/data/themedir1/block-theme-child-with-fluid-typography-config/style.css new file mode 100644 index 0000000000000..19abbecf86f4c --- /dev/null +++ b/phpunit/data/themedir1/block-theme-child-with-fluid-typography-config/style.css @@ -0,0 +1,8 @@ +/* +Theme Name: Block Theme Child Theme With Fluid Typography +Theme URI: https://wordpress.org/ +Description: For testing purposes only. +Template: block-theme +Version: 1.0.0 +Text Domain: block-theme-child-with-fluid-typography +*/ 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 new file mode 100644 index 0000000000000..d0ec32d9caac0 --- /dev/null +++ b/phpunit/data/themedir1/block-theme-child-with-fluid-typography-config/theme.json @@ -0,0 +1,11 @@ +{ + "version": 2, + "settings": { + "appearanceTools": true, + "typography": { + "fluid": { + "minFontSize": "16px" + } + } + } +} diff --git a/schemas/json/theme.json b/schemas/json/theme.json index 1a8aa67b0967b..d734926219308 100644 --- a/schemas/json/theme.json +++ b/schemas/json/theme.json @@ -353,8 +353,23 @@ "default": true }, "fluid": { - "description": "Opts into fluid typography.", - "type": "boolean" + "description": "Enables fluid typography and allows users to set global fluid typography parameters.", + "oneOf": [ + { + "type": "object", + "properties": { + "minFontSize": { + "description": "Allow users to set a global minimum font size boundary in px, rem or em. Custom font sizes below this value will not be clamped, and all calculated minimum font sizes will be, a at minimum, this value.", + "type": "string" + } + }, + "additionalProperties": false + }, + { + "type": "boolean" + } + ], + "default": false }, "letterSpacing": { "description": "Allow users to set custom letter spacing.",