fix (units): prevent attrNameTemplate from being re-applied.

Author: bfintal

src/util/styles/style-object.js

@@ -288,23 +288,27 @@ class StyleObject {
 			const unitAttrName = getAttributeName( `${ attrName }Unit`, device, state )
 			const actualAttrName = getAttributeName( attrName, device, state )
 
-			let unit = hasUnits ? ( getAttribute( unitAttrName, device, state, true ) || hasUnits ) : ''
+			let unit = hasUnits ? ( attributes[ unitAttrName ] || hasUnits ) : ''
 			let value = attributes[ actualAttrName ]
 
-			/* Allow unspecified fontSizeUnit to be set based on the desktop/tablet
-			 * unit if value for fontSize is empty. */
-			if ( ( value === '' || typeof value === 'undefined' ) && ( 0 === unitAttrName.indexOf( 'fontSizeUnit' ) ) ) {
+			/**
+			 * Allow unspecified units to be set based on the larger used
+			 * unitdesktop/tablet unit if value is empty. For example in `rem`,
+			 * any mobile value that's automatically applied should also show
+			 * `rem`
+			 */
+			if ( value === '' && ( device === 'tablet' || device === 'mobile' ) ) {
 				const desktopUnit = attributes[ getAttributeName( `${ attrName }Unit`, 'desktop', state ) ]
 				const tabletUnit = attributes[ getAttributeName( `${ attrName }Unit`, 'tablet', state ) ]
-				const tabletValue = attributes[ getAttributeName( attrName, 'tablet', state ) ]
-				if ( device === 'mobile' ) {
-					if ( tabletValue !== '' && typeof tabletValue !== 'undefined' ) {
+				if ( device === 'tablet' ) {
+					unit = desktopUnit
+				} else if ( device === 'mobile' ) {
+					const tabletValue = attributes[ getAttributeName( attrName, 'tablet', state ) ]
+					if ( tabletValue !== '' ) {
 						unit = tabletUnit
 					} else {
 						unit = desktopUnit
 					}
-				} else if ( device === 'tablet' ) {
-					unit = desktopUnit
 				}
 			}