fix: typography font size steps

Author: Arukuen

src/components/font-size-control/index.js

@@ -41,9 +41,9 @@ const FontSizeControl = props => {
 				// Change font-size so as not to surprise the user.
 				if ( props.value !== '' ) {
 					if ( value === 'em' || value === 'rem' ) {
-						props.onChange( pxToEm( props.value ) )
+						props.onChange( String( pxToEm( props.value ) ) )
 					} else if ( value === 'px' ) {
-						props.onChange( emToPx( props.value ) )
+						props.onChange( String( emToPx( props.value ) ) )
 					}
 				}
 

src/global-settings.php

@@ -299,13 +299,13 @@ public function register_global_settings() {
 						'type' => 'string',
 					),
 					'fontSize' => array(
-						'type' => 'number',
+						'type' => 'string',
 					),
 					'tabletFontSize' => array(
-						'type' => 'number',
+						'type' => 'string',
 					),
 					'mobileFontSize' => array(
-						'type' => 'number',
+						'type' => 'string',
 					),
 					'fontSizeUnit' => array(
 						'type' => 'string',

src/plugins/global-settings/typography/typography-picker.js

@@ -9,6 +9,7 @@ import { i18n } from 'stackable'
 import { upperFirst, omit } from 'lodash'
 import classnames from 'classnames'
 import { generateStyles } from '~stackable/block-components'
+import { usePresetControls } from '~stackable/hooks'
 
 /**
  * WordPress dependencies
@@ -45,9 +46,22 @@ const TypographyPicker = props => {
 		'ugb-global-settings-typography-control--with-description': createDescription( value ),
 	} )
 
+	const useTypographyAsPresets = useSelect( select =>
+		select( 'stackable/global-preset-controls.custom' )?.getUseTypographyAsPresets() ?? false
+	)
+
+	const presetMarks = usePresetControls( 'fontSizes' )
+		?.getPresetMarks( { customOnly: useTypographyAsPresets } ) || null
+
 	return (
 		<TypographyControl
-			fontSizeProps={ { units: [ 'px', 'em', 'rem' ] } }
+			fontSizeProps={ {
+				units: [ 'px', 'em', 'rem' ],
+				min: [ 0, 0, 0 ],
+				sliderMax: [ 150, 7, 7 ],
+				step: [ 1, 0.05, 0.05 ],
+				marks: presetMarks,
+			} }
 			lineHeightUnits={ [ 'px', 'em', 'rem' ] }
 			className={ mainClasses }
 			label={ label }

src/util/typography/styles.js

@@ -16,6 +16,10 @@ import { camelCase } from 'lodash'
  */
 import { sprintf } from '@wordpress/i18n'
 
+const isCSSVarValue = value => {
+	return typeof value === 'string' && value.startsWith( 'var' )
+}
+
 export const createTypographyStyles = ( attrNameTemplate = '%s', screen = 'desktop', blockAttributes = {}, options = {} ) => {
 	const getAttrName = attrName => camelCase( sprintf( attrNameTemplate, attrName ) )
 	const getValue = __getValue( blockAttributes, getAttrName, '' )
@@ -34,10 +38,14 @@ export const createTypographyStyles = ( attrNameTemplate = '%s', screen = 'deskt
 	const tabletFontSize = getValue( 'TabletFontSize' )
 	const mobileFontSize = getValue( 'MobileFontSize' )
 
+	const desktopFontSizeUnit = isCSSVarValue( desktopFontSize ) ? '' : getValue( 'FontSizeUnit' ) || 'px'
+	const tabletFontSizeUnit = isCSSVarValue( tabletFontSize ) ? '' : getValue( 'FontSizeUnit' ) || 'px'
+	const mobileFontSizeUnit = isCSSVarValue( mobileFontSize ) ? '' : getValue( 'FontSizeUnit' ) || 'px'
+
 	if ( screen !== 'tablet' && screen !== 'mobile' ) { // Desktop.
 		styles = {
 			fontFamily: getValue( 'FontFamily' ) !== '' ? getFontFamily( getValue( 'FontFamily' ) ) : undefined,
-			fontSize: desktopFontSize !== '' ? appendImportant( `${ desktopFontSize }${ getValue( 'FontSizeUnit' ) || 'px' }`, importantSize ) : undefined,
+			fontSize: desktopFontSize !== '' ? appendImportant( `${ desktopFontSize }${ desktopFontSizeUnit }`, importantSize ) : undefined,
 			fontWeight: getValue( 'FontWeight' ) !== '' ? getValue( 'FontWeight' ) : undefined,
 			textTransform: getValue( 'TextTransform' ) !== '' ? getValue( 'TextTransform' ) : undefined,
 			letterSpacing: getValue( 'LetterSpacing' ) !== '' ? `${ getValue( 'LetterSpacing' ) }px` : undefined,
@@ -56,7 +64,7 @@ export const createTypographyStyles = ( attrNameTemplate = '%s', screen = 'deskt
 			}
 		}
 		if ( tabletFontSize ) {
-			styles.fontSize = getValue( 'TabletFontSize', `%s${ getValue( 'TabletFontSizeUnit' ) || 'px' }` )
+			styles.fontSize = getValue( 'TabletFontSize', `%s${ tabletFontSizeUnit }` )
 		}
 	} else { // Mobile.
 		styles = {
@@ -79,7 +87,7 @@ export const createTypographyStyles = ( attrNameTemplate = '%s', screen = 'deskt
 			}
 		}
 		if ( mobileFontSize ) {
-			styles.fontSize = getValue( 'MobileFontSize', `%s${ getValue( 'MobileFontSizeUnit' ) || 'px' }` )
+			styles.fontSize = getValue( 'MobileFontSize', `%s${ mobileFontSizeUnit }` )
 		}
 	}