Add: Support for other units and CSS properties in Font Size presets

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];
 	}
 

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

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

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 ) || '' }
 						/>
 					</div>
 				) }
@@ -122,10 +145,10 @@ export default function FontSizePicker( {
 				<RangeControl
 					className="components-font-size-picker__custom-input"
 					label={ __( 'Custom Size' ) }
-					value={ value || '' }
+					value={ ( isPixelValue && noUnitsValue ) || '' }
 					initialPosition={ fallbackFontSize }
 					onChange={ ( newValue ) => {
-						onChange( newValue );
+						onChange( hasUnits ? newValue + 'px' : newValue );
 					} }
 					min={ 12 }
 					max={ 100 }