fix: saving of new typography

Author: Arukuen

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

@@ -302,10 +302,17 @@ addFilter( 'stackable.global-settings.inspector', 'stackable/global-typography',
 					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 ]
@@ -320,6 +327,8 @@ addFilter( 'stackable.global-settings.inspector', 'stackable/global-typography',
 				doAction( 'stackable.global-settings.typography-update-global-styles', newSettings )
 			}
 
+			updateTypography( newSettings )
+
 			return newSettings
 		} )
 	}

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

@@ -16,14 +16,14 @@ export const getAppliedTypeScale = value => {
 		return
 	}
 	return {
-		h1: { fontSize: Number( Math.pow( typeScale, 6 ).toFixed( 3 ) ), fontSizeUnit: 'rem' },
-		h2: { fontSize: Number( Math.pow( typeScale, 5 ).toFixed( 3 ) ), fontSizeUnit: 'rem' },
-		h3: { fontSize: Number( Math.pow( typeScale, 4 ).toFixed( 3 ) ), fontSizeUnit: 'rem' },
-		h4: { fontSize: Number( Math.pow( typeScale, 3 ).toFixed( 3 ) ), fontSizeUnit: 'rem' },
-		h5: { fontSize: Number( Math.pow( typeScale, 2 ).toFixed( 3 ) ), fontSizeUnit: 'rem' },
-		h6: { fontSize: Number( typeScale.toFixed( 3 ) ), fontSizeUnit: 'rem' },
-		p: { fontSize: 1, fontSizeUnit: 'rem' },
-		'.stk-subtitle': { fontSize: Number( ( 1 / typeScale ).toFixed( 3 ) ), fontSizeUnit: 'rem' },
-		'.stk-button__inner-text': { fontSize: 1, fontSizeUnit: 'rem' },
+		h1: { fontSize: String( Math.pow( typeScale, 6 ).toFixed( 3 ) ), fontSizeUnit: 'rem' },
+		h2: { fontSize: String( Math.pow( typeScale, 5 ).toFixed( 3 ) ), fontSizeUnit: 'rem' },
+		h3: { fontSize: String( Math.pow( typeScale, 4 ).toFixed( 3 ) ), fontSizeUnit: 'rem' },
+		h4: { fontSize: String( Math.pow( typeScale, 3 ).toFixed( 3 ) ), fontSizeUnit: 'rem' },
+		h5: { fontSize: String( Math.pow( typeScale, 2 ).toFixed( 3 ) ), fontSizeUnit: 'rem' },
+		h6: { fontSize: String( typeScale.toFixed( 3 ) ), fontSizeUnit: 'rem' },
+		p: { fontSize: '1', fontSizeUnit: 'rem' },
+		'.stk-subtitle': { fontSize: String( ( 1 / typeScale ).toFixed( 3 ) ), fontSizeUnit: 'rem' },
+		'.stk-button__inner-text': { fontSize: '1', fontSizeUnit: 'rem' },
 	}
 }