From 1f3514e6828d35a439122d9d336638e30668ff55 Mon Sep 17 00:00:00 2001 From: Jorge Date: Mon, 26 Oct 2020 20:36:31 +0000 Subject: [PATCH] Add: Support for other units besides px and advanced CSS properties on the font size presets. --- lib/global-styles.php | 6 +++ packages/components/CHANGELOG.md | 5 +++ .../components/src/font-size-picker/README.md | 4 +- .../components/src/font-size-picker/index.js | 45 ++++++++++++++----- 4 files changed, 47 insertions(+), 13 deletions(-) diff --git a/lib/global-styles.php b/lib/global-styles.php index 2b4173f58d9e27..46bbf2c86c964b 100644 --- a/lib/global-styles.php +++ b/lib/global-styles.php @@ -334,6 +334,12 @@ function gutenberg_experimental_global_styles_get_theme_support_settings() { $theme_settings['global']['settings']['typography'] = array(); } $theme_settings['global']['settings']['typography']['fontSizes'] = array(); + // Back-compatibility for presets without units. + foreach ( $theme_font_sizes[0] as &$font_size ) { + if ( is_numeric( $font_size['size'] ) ) { + $font_size['size'] = $font_size['size'] . 'px'; + } + } $theme_settings['global']['settings']['typography']['fontSizes'] = $theme_font_sizes[0]; } diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md index edebec183b48c6..5b5c7782332000 100644 --- a/packages/components/CHANGELOG.md +++ b/packages/components/CHANGELOG.md @@ -4,6 +4,11 @@ - Introduce `Navigation` component as `__experimentalNavigation` for displaying a hierarchy of items. + +### Breaking Change + +- Introduce support for other units and advanced CSS properties on `FontSizePicker`. Provided the value passed to the `FontSizePicker` is a string or one of the size options passed is a string, onChange will start to be called with a string value instead of a number. On WordPress usage, font size options are now automatically converted to strings with the default "px" unit added. + ## 10.0.0 (2020-07-07) ### Breaking Change diff --git a/packages/components/src/font-size-picker/README.md b/packages/components/src/font-size-picker/README.md index aa4e0ccefdb2f5..c1b6bcd70f9d97 100644 --- a/packages/components/src/font-size-picker/README.md +++ b/packages/components/src/font-size-picker/README.md @@ -68,7 +68,7 @@ If no value exists, this prop defines the starting position for the font size pi ### fontSizes An array of font size objects. The object should contain properties size, name, and slug. -The property `size` contains a number with the font size value, in `px`. +The property `size` contains a number with the font size value, in `px` or a string specifying the font size CSS property that should be used eg: "13px", "1em", or "clamp(12px, 5vw, 100px)". The `name` property includes a label for that font size e.g.: `Small`. The `slug` property is a string with a unique identifier for the font size. Used for the class generation process. @@ -89,7 +89,7 @@ If onChange is called without any parameter, it should reset the value, attendin The current font size value. -- Type: `Number` +- Type: `Number | String` - Required: No ### withSlider diff --git a/packages/components/src/font-size-picker/index.js b/packages/components/src/font-size-picker/index.js index a762aa979c591f..6909af4068f3ef 100644 --- a/packages/components/src/font-size-picker/index.js +++ b/packages/components/src/font-size-picker/index.js @@ -1,3 +1,8 @@ +/** + * External dependencies + */ +import { isNumber, isString } from 'lodash'; + /** * WordPress dependencies */ @@ -19,9 +24,7 @@ const CUSTOM_FONT_SIZE = 'custom'; function getSelectValueFromFontSize( fontSizes, value ) { if ( value ) { - const fontSizeValue = fontSizes.find( - ( font ) => font.size === Number( value ) - ); + const fontSizeValue = fontSizes.find( ( font ) => font.size === value ); return fontSizeValue ? fontSizeValue.slug : CUSTOM_FONT_SIZE; } return DEFAULT_FONT_SIZE; @@ -41,6 +44,7 @@ function getSelectOptions( optionsArray, disableCustomFontSizes ) { return optionsArray.map( ( option ) => ( { key: option.slug, name: option.name, + size: option.size, style: { fontSize: option.size }, } ) ); } @@ -53,6 +57,20 @@ export default function FontSizePicker( { value, withSlider = false, } ) { + const hasUnits = + isString( value ) || + ( fontSizes[ 0 ] && isString( fontSizes[ 0 ].size ) ); + + let noUnitsValue; + if ( ! hasUnits ) { + noUnitsValue = value; + } else { + noUnitsValue = parseInt( value ); + } + + const isPixelValue = + isNumber( value ) || ( isString( value ) && value.endsWith( 'px' ) ); + const instanceId = useInstanceId( FontSizePicker ); const options = useMemo( @@ -81,10 +99,11 @@ export default function FontSizePicker( { ( option ) => option.key === selectedFontSizeSlug ) } onChange={ ( { selectedItem } ) => { - const selectedValue = - selectedItem.style && - selectedItem.style.fontSize; - onChange( Number( selectedValue ) ); + if ( hasUnits ) { + onChange( selectedItem.size ); + } else { + onChange( Number( selectedItem.size ) ); + } } } /> ) } @@ -99,10 +118,14 @@ export default function FontSizePicker( { type="number" min={ 1 } onChange={ ( event ) => { - onChange( Number( event.target.value ) ); + if ( hasUnits ) { + onChange( event.target.value + 'px' ); + } else { + onChange( Number( event.target.value ) ); + } } } aria-label={ __( 'Custom' ) } - value={ value || '' } + value={ ( isPixelValue && noUnitsValue ) || '' } /> ) } @@ -122,10 +145,10 @@ export default function FontSizePicker( { { - onChange( newValue ); + onChange( hasUnits ? newValue + 'px' : newValue ); } } min={ 12 } max={ 100 }