fix: sync state when succeeding call to change styles

Author: Arukuen

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

@@ -39,7 +39,7 @@ const FontSizeControl = props => {
 			placeholder={ passedPlaceholder }
 			onChangeUnit={ value => {
 				// Change font-size so as not to surprise the user.
-				if ( props.value !== '' ) {
+				if ( props.value !== '' && ! isNaN( Number( value ) ) ) {
 					if ( value === 'em' || value === 'rem' ) {
 						props.onChange( String( pxToEm( props.value ) ) )
 					} else if ( value === 'px' ) {

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

@@ -293,40 +293,35 @@ addFilter( 'stackable.global-settings.inspector', 'stackable/global-typography',
 	}
 
 	const changeStyles = _typography => {
-		const typography = cloneDeep( _typography )
-		const newSettings = { ...typographySettings }
+		setTypographySettings( prevTypographySettings => {
+			const typography = cloneDeep( _typography )
+			const newSettings = { ...prevTypographySettings }
 
-		Object.entries( typography ).forEach( ( [ selector, styles ] ) => {
-			if ( ! selector || typeof styles !== 'object' ) {
-				return
-			}
+			Object.entries( typography ).forEach( ( [ selector, styles ] ) => {
+				if ( ! selector || typeof styles !== 'object' ) {
+					return
+				}
 
-			// Merge the new styles with the previous, while overwritting similar styles.
-			// This allow adding styles without removing the previous ones.
-			// Check if the object is empty, used for resetting the whole setting.
-			if ( Object.keys( styles ).length !== 0 ) {
-				styles = { ...newSettings[ selector ], ...styles }
-			}
-			/**
-			 * Delete the object keys with empty strings.
-			 * Otherwise, the API will throw an error code 400
-			 * because of incompatible schema type.
-			 */
-			Object.keys( styles ).forEach( key => {
-				if ( styles[ key ] === '' ) {
-					delete styles[ key ]
+				if ( Object.keys( styles ).length !== 0 ) {
+					styles = { ...newSettings[ selector ], ...styles }
 				}
-			} )
 
-			newSettings[ selector ] = styles
-		} )
+				Object.keys( styles ).forEach( key => {
+					if ( styles[ key ] === '' ) {
+						delete styles[ key ]
+					}
+				} )
 
-		// Update the global styles immediately when reset font size is triggered.
-		if ( Object.values( typography ).some( styles => styles && ! styles.fontSize ) ) {
-			doAction( 'stackable.global-settings.typography-update-global-styles', newSettings )
-		}
+				newSettings[ selector ] = styles
+			} )
 
-		updateTypography( newSettings )
+			// Update the global styles immediately when reset font size is triggered.
+			if ( Object.values( typography ).some( styles => styles && ! styles.fontSize ) ) {
+				doAction( 'stackable.global-settings.typography-update-global-styles', newSettings )
+			}
+
+			return newSettings
+		} )
 	}
 
 	const resetStyles = selector => {