fix: add rem support to allow custom mode to have values when switching, convert from rem if only has px support

Author: Arukuen

src/block-components/helpers/size/edit.js

@@ -40,10 +40,10 @@ const Layout = props => {
 				label={ labelHeight }
 				attribute={ getAttrName( 'height' ) }
 				responsive="all"
-				units={ [ 'px', 'vh' ] }
-				min={ [ 0, 0 ] }
-				sliderMax={ [ 1000, 100 ] }
-				step={ [ 1, 1 ] }
+				units={ [ 'px', 'rem', 'vh' ] }
+				min={ [ 0, 0, 0 ] }
+				sliderMax={ [ 1000, 60, 100 ] }
+				step={ [ 1, 1, 1 ] }
 				allowReset={ true }
 				placeholder="0"
 				helpTooltip={ {
@@ -155,10 +155,10 @@ const Spacing = props => {
 				attribute={ getAttrName( 'padding' ) }
 				responsive="all"
 				hover="all"
-				units={ [ 'px', 'em', '%' ] }
+				units={ [ 'px', 'em', 'rem', '%' ] }
 				defaultLocked={ true }
-				min={ [ 0, 0, 0 ] }
-				sliderMax={ [ 200, 30, 100 ] }
+				min={ [ 0, 0, 0, 0 ] }
+				sliderMax={ [ 200, 30, 30, 100 ] }
 				helpTooltip={ {
 					video: 'inner-block-padding',
 					description: __( 'Sets the block paddings, i.e the space between the inner columns and the block border', i18n ),
@@ -174,10 +174,10 @@ const Spacing = props => {
 					label={ labelMargins }
 					attribute={ getAttrName( 'margin' ) }
 					responsive="all"
-					units={ [ 'px', '%' ] }
+					units={ [ 'px', 'rem', '%' ] }
 					defaultLocked={ false }
-					sliderMin={ [ -200, -100 ] }
-					sliderMax={ [ 200, 100 ] }
+					sliderMin={ [ -200, -15, -100 ] }
+					sliderMax={ [ 200, 15, 100 ] }
 					placeholder="0"
 					helpTooltip={ {
 						video: 'advanced-block-margin',

src/components/advanced-range-control/index.js

@@ -196,8 +196,14 @@ const AdvancedRangeControl = props => {
 			}
 			// Extract the unit and value.
 			const markValue = props.marks[ value ]?.[ property ] || '0'
-			const [ _newValue, unit ] = extractNumbersAndUnits( markValue )[ 0 ]
-			const newValue = _newValue
+			let [ newValue, unit ] = extractNumbersAndUnits( markValue )[ 0 ]
+
+			// If the attribute has no units (only support px), and the
+			// preset units are rem or em, convert to px
+			if ( ! hasUnits && ( unit === 'rem' || unit === 'em' ) ) {
+				newValue = `${ parseFloat( newValue ) * 16 }`
+				unit = 'px'
+			}
 
 			// Update the unit.
 			if ( unit ) {

src/components/four-range-control/index.js

@@ -327,7 +327,7 @@ const FourRangeControl = memo( props => {
 		}
 
 		// We need to change the way we handle the value and onChange if we're doing marks
-		let rangeValue = initialValue
+		let rangeValue = props.hasCSSVariableValue ? parseFloat( initialValue ) : initialValue
 		let rangeOnChange = initialOnChange
 		if ( props.marks && isMarkMode ) {
 			rangeValue = props.marks.findIndex( mark => {