diff --git a/src/components/advanced-range-control/index.js b/src/components/advanced-range-control/index.js
index cae2b3d6a9..674444b934 100644
--- a/src/components/advanced-range-control/index.js
+++ b/src/components/advanced-range-control/index.js
@@ -33,20 +33,96 @@ const AdvancedRangeControl = props => {
 	const unitAttrName = useAttributeName( `${ props.attribute }Unit`, props.responsive, props.hover )
 	const {
 		unitAttribute,
-		_valueDesktop,
-		_valueTablet,
-		_unitDesktop,
-		_unitTablet,
+		desktopValue,
+		tabletValue,
+		mobileValue,
+		desktopUnit,
+		tabletUnit,
+		mobileUnit,
 	} = useBlockAttributesContext( attributes => {
 		return {
 			unitAttribute: attributes[ unitAttrName ],
-			_valueDesktop: attributes[ `${ props.attribute }` ],
-			_valueTablet: attributes[ `${ props.attribute }Tablet` ],
-			_unitDesktop: attributes[ `${ props.attribute }Unit` ],
-			_unitTablet: attributes[ `${ props.attribute }UnitTablet` ],
+			desktopValue: {
+				normal: attributes[ `${ props.attribute }` ],
+				hover: attributes[ `${ props.attribute }Hover` ],
+				'parent-hover': attributes[ `${ props.attribute }ParentHover` ],
+			},
+			tabletValue: {
+				normal: attributes[ `${ props.attribute }Tablet` ],
+				hover: attributes[ `${ props.attribute }TabletHover` ],
+				'parent-hover': attributes[ `${ props.attribute }TabletParentHover` ],
+			},
+			mobileValue: {
+				normal: attributes[ `${ props.attribute }Mobile` ],
+				hover: attributes[ `${ props.attribute }MobileHover` ],
+				'parent-hover': attributes[ `${ props.attribute }MobileParentHover` ],
+			},
+			desktopUnit: {
+				normal: attributes[ `${ props.attribute }Unit` ],
+				hover: attributes[ `${ props.attribute }UnitHover` ],
+				'parent-hover': attributes[ `${ props.attribute }UnitParentHover` ],
+			},
+			tabletUnit: {
+				normal: attributes[ `${ props.attribute }UnitTablet` ],
+				hover: attributes[ `${ props.attribute }UnitTabletHover` ],
+				'parent-hover': attributes[ `${ props.attribute }UnitTabletParentHover` ],
+			},
+			mobileUnit: {
+				normal: attributes[ `${ props.attribute }UnitMobile` ],
+				hover: attributes[ `${ props.attribute }UnitMobileHover` ],
+				'parent-hover': attributes[ `${ props.attribute }UnitMobileParentHover` ],
+			},
 		}
 	} )
 
+	const desktopHasValue = {
+		normal: desktopValue.normal && desktopValue.normal !== '',
+		hover: desktopValue.hover && desktopValue.hover !== '',
+		'parent-hover': desktopValue[ 'parent-hover' ] && desktopValue[ 'parent-hover' ] !== '',
+	}
+
+	const tabletHasValue = {
+		normal: tabletValue.normal && tabletValue.normal !== '',
+		hover: tabletValue.hover && tabletValue.hover !== '',
+		'parent-hover': tabletValue[ 'parent-hover' ] && tabletValue[ 'parent-hover' ] !== '',
+	}
+
+	const mobileHasValue = {
+		normal: mobileValue.normal && mobileValue.normal !== '',
+	}
+
+	const desktopFallbackValue = {
+		normal: desktopHasValue.normal ? { value: desktopValue.normal, unit: desktopUnit.normal }
+			: { value: '', unit: desktopUnit.normal },
+	}
+	desktopFallbackValue.hover = desktopFallbackValue.normal
+	desktopFallbackValue[ 'parent-hover' ] = desktopFallbackValue.normal
+
+	const tabletFallbackValue = {
+		normal: tabletHasValue.normal ? { value: tabletValue.normal, unit: tabletUnit.normal }
+			: desktopFallbackValue.normal,
+	}
+	// if desktop has hover state, display desktop hover state value else display tablet normal state value
+	tabletFallbackValue.hover = desktopHasValue.hover ? { value: desktopValue.hover, unit: desktopUnit.hover }
+		: tabletFallbackValue.normal
+	tabletFallbackValue[ 'parent-hover' ] = desktopHasValue[ 'parent-hover' ]
+		? { value: desktopValue[ 'parent-hover' ], unit: desktopUnit[ 'parent-hover' ] }
+		: tabletFallbackValue.normal
+
+	const mobileFallbackValue = {
+		normal: mobileHasValue.normal ? { value: mobileValue.normal, unit: mobileUnit.normal } : tabletFallbackValue.normal,
+	}
+	// if tablet has hover state, display tablet hover state value
+	// else if mobile has normal state value display mobile normal state value
+	// else display desktop hover state value or tablet normal state value
+	mobileFallbackValue.hover = tabletHasValue.hover ? { value: tabletValue.hover, unit: tabletUnit.hover }
+		: ( mobileHasValue.normal ? { value: mobileValue.normal, unit: mobileUnit.normal }
+			: tabletFallbackValue.hover )
+	mobileFallbackValue[ 'parent-hover' ] = tabletHasValue[ 'parent-hover' ]
+		? { value: tabletValue[ 'parent-hover' ], unit: tabletUnit[ 'parent-hover' ] }
+		: ( mobileHasValue.normal ? { value: mobileValue.normal, unit: mobileUnit.normal }
+			: tabletFallbackValue[ 'parent-hover' ] )
+
 	const unit = typeof props.unit === 'string'
 		? ( props.unit || props.units?.[ 0 ] || 'px' )
 		: ( unitAttribute || '' )
@@ -78,23 +154,25 @@ const AdvancedRangeControl = props => {
 		}
 	}
 
-	// Change placeholder based on inherited value
-	if ( deviceType === 'Mobile' && _valueTablet && _valueTablet !== '' ) {
-		propsToPass.initialPosition = unitAttribute === _unitTablet ? _valueTablet : ''
-		propsToPass.placeholder = unitAttribute === _unitTablet ? _valueTablet : ''
-	} else if ( ( deviceType === 'Mobile' || deviceType === 'Tablet' ) && _valueDesktop && _valueDesktop !== '' ) {
-		propsToPass.initialPosition = unitAttribute === _unitDesktop ? _valueDesktop : ''
-		propsToPass.placeholder = unitAttribute === _unitDesktop ? _valueDesktop : ''
-	}
-
 	// Remove the placeholder.
-	if ( ! props.forcePlaceholder && currentHoverState !== 'normal' ) {
+	if ( ! props.forcePlaceholder ) {
 		propsToPass.initialPosition = ''
 		propsToPass.placeholder = ''
 	}
 
+	if ( deviceType === 'Mobile' ) {
+		propsToPass.initialPosition = unitAttribute === mobileFallbackValue[ currentHoverState ].unit ? mobileFallbackValue[ currentHoverState ].value : ''
+		propsToPass.placeholder = unitAttribute === mobileFallbackValue[ currentHoverState ].unit ? mobileFallbackValue[ currentHoverState ].value : ''
+	} else if ( deviceType === 'Tablet' ) {
+		propsToPass.initialPosition = unitAttribute === tabletFallbackValue[ currentHoverState ].unit ? tabletFallbackValue[ currentHoverState ].value : ''
+		propsToPass.placeholder = unitAttribute === tabletFallbackValue[ currentHoverState ].unit ? tabletFallbackValue[ currentHoverState ].value : ''
+	} else {
+		propsToPass.initialPosition = unitAttribute === desktopFallbackValue[ currentHoverState ].unit ? desktopFallbackValue[ currentHoverState ].value : ''
+		propsToPass.placeholder = unitAttribute === desktopFallbackValue[ currentHoverState ].unit ? desktopFallbackValue[ currentHoverState ].value : ''
+	}
+
 	let placeholderRender = props.placeholderRender
-	if ( currentHoverState !== 'normal' || ( hasUnits && unit !== props.units[ 0 ] ) ) {
+	if ( hasUnits && unit !== props.units[ 0 ] ) {
 		placeholderRender = null
 	}
 
diff --git a/src/components/four-range-control/index.js b/src/components/four-range-control/index.js
index d1c532b2b4..09d4fce6a4 100644
--- a/src/components/four-range-control/index.js
+++ b/src/components/four-range-control/index.js
@@ -98,17 +98,45 @@ const FourRangeControl = memo( props => {
 
 	const {
 		unit,
-		_valueDesktop,
-		_valueTablet,
-		_unitDesktop,
-		_unitTablet,
+		desktopValue,
+		tabletValue,
+		mobileValue,
+		desktopUnit,
+		tabletUnit,
+		mobileUnit,
 	} = useBlockAttributesContext( attributes => {
 		return {
 			unit: attributes[ unitAttrName ],
-			_valueDesktop: attributes[ `${ props.attribute }` ],
-			_valueTablet: attributes[ `${ props.attribute }Tablet` ],
-			_unitDesktop: attributes[ `${ props.attribute }Unit` ],
-			_unitTablet: attributes[ `${ props.attribute }UnitTablet` ],
+			desktopValue: {
+				normal: attributes[ `${ props.attribute }` ],
+				hover: attributes[ `${ props.attribute }Hover` ],
+				'parent-hover': attributes[ `${ props.attribute }ParentHover` ],
+			},
+			tabletValue: {
+				normal: attributes[ `${ props.attribute }Tablet` ],
+				hover: attributes[ `${ props.attribute }TabletHover` ],
+				'parent-hover': attributes[ `${ props.attribute }TabletParentHover` ],
+			},
+			mobileValue: {
+				normal: attributes[ `${ props.attribute }Mobile` ],
+				hover: attributes[ `${ props.attribute }MobileHover` ],
+				'parent-hover': attributes[ `${ props.attribute }MobileParentHover` ],
+			},
+			desktopUnit: {
+				normal: attributes[ `${ props.attribute }Unit` ],
+				hover: attributes[ `${ props.attribute }UnitHover` ],
+				'parent-hover': attributes[ `${ props.attribute }UnitParentHover` ],
+			},
+			tabletUnit: {
+				normal: attributes[ `${ props.attribute }UnitTablet` ],
+				hover: attributes[ `${ props.attribute }UnitTabletHover` ],
+				'parent-hover': attributes[ `${ props.attribute }UnitTabletParentHover` ],
+			},
+			mobileUnit: {
+				normal: attributes[ `${ props.attribute }UnitMobile` ],
+				hover: attributes[ `${ props.attribute }UnitMobileHover` ],
+				'parent-hover': attributes[ `${ props.attribute }UnitMobileParentHover` ],
+			},
 		}
 	} )
 
@@ -143,35 +171,152 @@ const FourRangeControl = memo( props => {
 	}
 
 	const deviceType = useDeviceType()
-	const tabletHasValue = {
-		top: _valueTablet && _valueTablet !== '' && _valueTablet.top && _valueTablet.top !== '',
-		right: _valueTablet && _valueTablet !== '' && _valueTablet.right && _valueTablet.right !== '',
-		bottom: _valueTablet && _valueTablet !== '' && _valueTablet.bottom && _valueTablet.bottom !== '',
-		left: _valueTablet && _valueTablet !== '' && _valueTablet.left && _valueTablet.left !== '',
-		firstValue:
-			props.enableTop ? ( _valueTablet && _valueTablet !== '' && _valueTablet.top && _valueTablet.top !== '' )
-				: props.enableRight ? ( _valueTablet && _valueTablet !== '' && _valueTablet.right && _valueTablet.right !== '' )
-					: props.enableBottom ? ( _valueTablet && _valueTablet !== '' && _valueTablet.bottom && _valueTablet.bottom !== '' )
-						: ( _valueTablet && _valueTablet !== '' && _valueTablet.left && _valueTablet.left !== '' ),
+	// check if the first value exists depending on device type and hover state
+	const hasFirstValue = ( type, state ) => {
+		const device = {
+			Desktop: desktopValue,
+			Tablet: tabletValue,
+			Mobile: mobileValue,
+		}
+
+		return props.enableTop ? ( device[ type ][ state ] && device[ type ][ state ] !== '' && device[ type ][ state ].top && device[ type ][ state ].top !== '' )
+			: props.enableRight ? ( device[ type ][ state ] && device[ type ][ state ] !== '' && device[ type ][ state ].right && device[ type ][ state ].right !== '' )
+				: props.enableBottom ? ( device[ type ][ state ] && device[ type ][ state ] !== '' && device[ type ][ state ].bottom && device[ type ][ state ].bottom !== '' )
+					: ( device[ type ][ state ] && device[ type ][ state ] !== '' && device[ type ][ state ].left && device[ type ][ state ].left !== '' )
+	}
+
+	// return first value based on device type and hover state
+	const deviceFirstValue = ( type, state ) => {
+		const device = {
+			Desktop: desktopValue,
+			Tablet: tabletValue,
+			Mobile: mobileValue,
+		}
+
+		return props.enableTop ? device[ type ][ state ].top
+			: props.enableRight ? device[ type ][ state ].right
+				: props.enableBottom ? device[ type ][ state ].bottom
+					: device[ type ][ state ].left
+	}
+
+	// fallback values for the first value
+	const desktopFirstValueFallback = {
+		normal: hasFirstValue( 'Desktop', 'normal' ) ? { value: deviceFirstValue( 'Desktop', 'normal' ), unit: desktopUnit.normal } : { value: '', unit: desktopUnit.normal },
+	}
+	// display desktop normal state value if desktop hover state is not set
+	desktopFirstValueFallback.hover = desktopFirstValueFallback.normal
+	desktopFirstValueFallback[ 'parent-hover' ] = desktopFirstValueFallback.normal
+
+	const tabletFirstValueFallback = {
+		// display tablet normal state value if set, else display desktop normal state value
+		normal: hasFirstValue( 'Tablet', 'normal' ) ? { value: deviceFirstValue( 'Tablet', 'normal' ), unit: tabletUnit.normal } : desktopFirstValueFallback.normal,
+	}
+	// display desktop hover state value if it exists, else display tablet/desktop normal state value
+	tabletFirstValueFallback.hover = hasFirstValue( 'Desktop', 'hover' )
+		? { value: deviceFirstValue( 'Desktop', 'hover' ), unit: desktopUnit.hover }
+		: tabletFirstValueFallback.normal
+	tabletFirstValueFallback[ 'parent-hover' ] = hasFirstValue( 'Desktop', 'parent-hover' )
+		? { value: deviceFirstValue( 'Desktop', 'parent-hover' ), unit: desktopUnit[ 'parent-hover' ] }
+		: tabletFirstValueFallback.normal
+
+	const mobileFirstValueFallback = {
+		// display mobile normal state value if set, else display tablet/desktop normal state value
+		normal: hasFirstValue( 'Mobile', 'normal' ) ? { value: deviceFirstValue( 'Mobile', 'normal' ), unit: mobileUnit.normal } : tabletFirstValueFallback.normal,
+	}
+	// display tablet hover state value if it exists, else display mobile normal state value if it exists
+	// else display desktop hover state value or tablet/desktop normal state value
+	mobileFirstValueFallback.hover = hasFirstValue( 'Tablet', 'hover' )
+		? { value: deviceFirstValue( 'Tablet', 'hover' ), unit: tabletUnit.hover }
+		: ( hasFirstValue( 'Mobile', 'normal' )
+			? { value: deviceFirstValue( 'Mobile', 'normal' ), unit: mobileUnit.normal }
+			: tabletFirstValueFallback.hover )
+	mobileFirstValueFallback[ 'parent-hover' ] = hasFirstValue( 'Tablet', 'parent-hover' )
+		? { value: deviceFirstValue( 'Tablet', 'parent-hover' ), unit: mobileUnit[ 'parent-hover' ] }
+		: ( hasFirstValue( 'Mobile', 'normal' )
+			? { value: deviceFirstValue( 'Mobile', 'normal' ), unit: mobileUnit.normal }
+			: tabletFirstValueFallback[ 'parent-hover' ] )
+
+	const deviceHasValue = ( type, state ) => {
+		const device = {
+			Desktop: desktopValue,
+			Tablet: tabletValue,
+			Mobile: mobileValue,
+		}
+
+		return {
+			top: device[ type ][ state ] && device[ type ][ state ] !== '' && device[ type ][ state ].top && device[ type ][ state ].top !== '',
+			right: device[ type ][ state ] && device[ type ][ state ] !== '' && device[ type ][ state ].right && device[ type ][ state ].right !== '',
+			bottom: device[ type ][ state ] && device[ type ][ state ] !== '' && device[ type ][ state ].bottom && device[ type ][ state ].bottom !== '',
+			left: device[ type ][ state ] && device[ type ][ state ] !== '' && device[ type ][ state ].left && device[ type ][ state ].left !== '',
+		}
 	}
 
-	const desktopHasValue = {
-		top: _valueDesktop && _valueDesktop !== '' && _valueDesktop.top && _valueDesktop.top !== '',
-		right: _valueDesktop && _valueDesktop !== '' && _valueDesktop.right && _valueDesktop.right !== '',
-		bottom: _valueDesktop && _valueDesktop !== '' && _valueDesktop.bottom && _valueDesktop.bottom !== '',
-		left: _valueDesktop && _valueDesktop !== '' && _valueDesktop.left && _valueDesktop.left !== '',
-		firstValue:
-			props.enableTop ? ( _valueDesktop && _valueDesktop !== '' && _valueDesktop.top && _valueDesktop.top !== '' )
-				: props.enableRight ? ( _valueDesktop && _valueDesktop !== '' && _valueDesktop.right && _valueDesktop.right !== '' )
-					: props.enableBottom ? ( _valueDesktop && _valueDesktop !== '' && _valueDesktop.bottom && _valueDesktop.bottom !== '' )
-						: ( _valueDesktop && _valueDesktop !== '' && _valueDesktop.left && _valueDesktop.left !== '' ),
+	const deviceValue = ( type, state ) => {
+		const device = {
+			Desktop: desktopValue,
+			Tablet: tabletValue,
+			Mobile: mobileValue,
+		}
+		return {
+			top: device[ type ][ state ].top,
+			right: device[ type ][ state ].right,
+			bottom: device[ type ][ state ].bottom,
+			left: device[ type ][ state ].left,
+		}
 	}
 
-	const { desktop: firstValueDesktop, tablet: firstValueTablet } =
-		props.enableTop ? { desktop: _valueDesktop?.top, tablet: _valueTablet?.top }
-			: props.enableRight ? { desktop: _valueDesktop?.right, tablet: _valueTablet?.right }
-				: props.enableBottom ? { desktop: _valueDesktop?.bottom, tablet: _valueTablet?.bottom }
-					: { desktop: _valueDesktop?.left, tablet: _valueTablet?.left }
+	const deviceFallbackValue = position => {
+		const desktopFallbackValue = {
+			normal: deviceHasValue( 'Desktop', 'normal' )[ position ]
+				? { value: deviceValue( 'Desktop', 'normal' )[ position ], unit: desktopUnit.normal }
+				: { value: '', unit: desktopUnit.normal },
+		}
+		// display normal state value if desktop hover state is not set
+		desktopFallbackValue.hover = desktopFallbackValue.normal
+		desktopFallbackValue[ 'parent-hover' ] = desktopFallbackValue.normal
+
+		const tabletFallbackValue = {
+			normal: deviceHasValue( 'Tablet', 'normal' )[ position ]
+				? { value: deviceValue( 'Tablet', 'normal' )[ position ], unit: tabletUnit.normal }
+				: desktopFallbackValue.normal,
+		}
+		// tablet placeholder will display desktop hover state value, or tablet/desktop normal state value
+		tabletFallbackValue.hover = deviceHasValue( 'Desktop', 'hover' )[ position ]
+			? { value: deviceValue( 'Desktop', 'hover' )[ position ], unit: desktopUnit.hover }
+			: tabletFallbackValue.normal
+		tabletFallbackValue[ 'parent-hover' ] = deviceHasValue( 'Desktop', 'parent-hover' )[ position ]
+			? {
+				value: deviceValue( 'Desktop', 'parent-hover' )[ position ],
+				unit: desktopUnit[ 'parent-hover' ],
+			} : tabletFallbackValue.normal
+
+		const mobileFallbackValue = {
+			normal: deviceHasValue( 'Mobile', 'normal' )[ position ]
+				? { value: deviceValue( 'Mobile', 'normal' )[ position ], unit: mobileUnit.normal }
+				: tabletFallbackValue.normal,
+		}
+
+		// mobile placeholder will display tablet hover state value, or mobile normal state value,
+		// or desktop hover state value or tablet/desktop normal state value
+		mobileFallbackValue.hover = deviceHasValue( 'Tablet', 'hover' )[ position ]
+			? { value: deviceValue( 'Tablet', 'hover' )[ position ], unit: tabletUnit.hover }
+			: ( deviceHasValue( 'Mobile', 'normal' )[ position ]
+				? { value: deviceValue( 'Mobile', 'normal' )[ position ], unit: mobileUnit.normal }
+				: tabletFallbackValue.hover )
+		mobileFallbackValue[ 'parent-hover' ] = deviceHasValue( 'Tablet', 'parent-hover' )[ position ]
+			? {
+				value: deviceValue( 'Tablet', 'parent-hover' )[ position ],
+				unit: mobileUnit[ 'parent-hover' ],
+			} : ( deviceHasValue( 'Mobile', 'normal' )[ position ]
+				? { value: deviceValue( 'Mobile', 'normal' )[ position ], unit: mobileUnit.normal }
+				: tabletFallbackValue[ 'parent-hover' ] )
+
+		return {
+			desktopFallbackValue,
+			tabletFallbackValue,
+			mobileFallbackValue,
+		}
+	}
 
 	const onChangeAll = newValue => {
 		onChange( {
@@ -246,29 +391,23 @@ const FourRangeControl = memo( props => {
 						onChange={ onChangeAll }
 						allowReset={ false }
 						initialPosition={ ( () => {
-							if ( currentHoverState !== 'normal' ) {
-								return ''
-							}
-
-							if ( deviceType === 'Mobile' && tabletHasValue.firstValue ) {
-								return unit === _unitTablet ? firstValueTablet : ''
-							} else if ( ( deviceType === 'Mobile' || deviceType === 'Tablet' ) && desktopHasValue.firstValue ) {
-								return unit === _unitDesktop ? firstValueDesktop : ''
+							if ( deviceType === 'Mobile' ) {
+								return unit === mobileFirstValueFallback[ currentHoverState ].unit ? mobileFirstValueFallback[ currentHoverState ].value : ''
+							} else if ( deviceType === 'Tablet' ) {
+								return unit === tabletFirstValueFallback[ currentHoverState ].unit ? tabletFirstValueFallback[ currentHoverState ].value : ''
+							} else if ( deviceType === 'Desktop' && currentHoverState !== 'normal' ) {
+								return unit === desktopFirstValueFallback[ currentHoverState ].unit ? desktopFirstValueFallback[ currentHoverState ].value : ''
 							}
-
 							return propsToPass.initialPosition
 						} )() }
 						placeholder={ ( () => {
-							if ( currentHoverState !== 'normal' ) {
-								return ''
-							}
-
-							if ( deviceType === 'Mobile' && tabletHasValue.firstValue ) {
-								return unit === _unitTablet ? firstValueTablet : ''
-							} else if ( ( deviceType === 'Mobile' || deviceType === 'Tablet' ) && desktopHasValue.firstValue ) {
-								return unit === _unitDesktop ? firstValueDesktop : ''
+							if ( deviceType === 'Mobile' ) {
+								return unit === mobileFirstValueFallback[ currentHoverState ].unit ? mobileFirstValueFallback[ currentHoverState ].value : ''
+							} else if ( deviceType === 'Tablet' ) {
+								return unit === tabletFirstValueFallback[ currentHoverState ].unit ? tabletFirstValueFallback[ currentHoverState ].value : ''
+							} else if ( deviceType === 'Desktop' && currentHoverState !== 'normal' ) {
+								return unit === desktopFirstValueFallback[ currentHoverState ].unit ? desktopFirstValueFallback[ currentHoverState ].value : ''
 							}
-
 							return propsToPass.placeholder
 						} )() }
 					/>
@@ -292,27 +431,35 @@ const FourRangeControl = memo( props => {
 							onChange={ onChangeVertical }
 							allowReset={ false }
 							initialPosition={ ( () => {
-								if ( currentHoverState !== 'normal' ) {
-									return ''
-								}
-
-								if ( deviceType === 'Mobile' && tabletHasValue.top ) {
-									return unit === _unitTablet ? _valueTablet.top : ''
-								} else if ( ( deviceType === 'Mobile' || deviceType === 'Tablet' ) && desktopHasValue.top ) {
-									return unit === _unitDesktop ? _valueDesktop.top : ''
+								const {
+									desktopFallbackValue,
+									tabletFallbackValue,
+									mobileFallbackValue,
+								} = deviceFallbackValue( 'top' )
+
+								if ( deviceType === 'Mobile' ) {
+									return unit === mobileFallbackValue[ currentHoverState ].unit ? mobileFallbackValue[ currentHoverState ].value : ''
+								} else if ( deviceType === 'Tablet' ) {
+									return unit === tabletFallbackValue[ currentHoverState ].unit ? tabletFallbackValue[ currentHoverState ].value : ''
+								} else if ( deviceType === 'Desktop' && currentHoverState !== 'normal' ) {
+									return unit === desktopFallbackValue[ currentHoverState ].unit ? desktopFallbackValue[ currentHoverState ].value : ''
 								}
 
 								return propsToPass.initialPosition
 							} )() }
 							placeholder={ ( () => {
-								if ( currentHoverState !== 'normal' ) {
-									return ''
-								}
-
-								if ( deviceType === 'Mobile' && tabletHasValue.top ) {
-									return unit === _unitTablet ? _valueTablet.top : ''
-								} else if ( ( deviceType === 'Mobile' || deviceType === 'Tablet' ) && desktopHasValue.top ) {
-									return unit === _unitDesktop ? _valueDesktop.top : ''
+								const {
+									desktopFallbackValue,
+									tabletFallbackValue,
+									mobileFallbackValue,
+								} = deviceFallbackValue( 'top' )
+
+								if ( deviceType === 'Mobile' ) {
+									return unit === mobileFallbackValue[ currentHoverState ].unit ? mobileFallbackValue[ currentHoverState ].value : ''
+								} else if ( deviceType === 'Tablet' ) {
+									return unit === tabletFallbackValue[ currentHoverState ].unit ? tabletFallbackValue[ currentHoverState ].value : ''
+								} else if ( deviceType === 'Desktop' && currentHoverState !== 'normal' ) {
+									return unit === desktopFallbackValue[ currentHoverState ].unit ? desktopFallbackValue[ currentHoverState ].value : ''
 								}
 
 								return typeof props.placeholderTop === 'undefined' ? propsToPass.placeholder : props.placeholderTop
@@ -335,28 +482,37 @@ const FourRangeControl = memo( props => {
 							onChange={ onChangeHorizontal }
 							allowReset={ false }
 							initialPosition={ ( () => {
-								if ( currentHoverState !== 'normal' ) {
-									return ''
-								}
-
-								if ( deviceType === 'Mobile' && tabletHasValue.left ) {
-									return unit === _unitTablet ? _valueTablet.left : ''
-								} else if ( ( deviceType === 'Mobile' || deviceType === 'Tablet' ) && desktopHasValue.left ) {
-									return unit === _unitDesktop ? _valueDesktop.left : ''
+								const {
+									desktopFallbackValue,
+									tabletFallbackValue,
+									mobileFallbackValue,
+								} = deviceFallbackValue( 'left' )
+
+								if ( deviceType === 'Mobile' ) {
+									return unit === mobileFallbackValue[ currentHoverState ].unit ? mobileFallbackValue[ currentHoverState ].value : ''
+								} else if ( deviceType === 'Tablet' ) {
+									return unit === tabletFallbackValue[ currentHoverState ].unit ? tabletFallbackValue[ currentHoverState ].value : ''
+								} else if ( deviceType === 'Desktop' && currentHoverState !== 'normal' ) {
+									return unit === desktopFallbackValue[ currentHoverState ].unit ? desktopFallbackValue[ currentHoverState ].value : ''
 								}
 
 								return propsToPass.initialPosition
 							} )() }
 							placeholder={ ( () => {
-								if ( currentHoverState !== 'normal' ) {
-									return ''
+								const {
+									desktopFallbackValue,
+									tabletFallbackValue,
+									mobileFallbackValue,
+								} = deviceFallbackValue( 'left' )
+
+								if ( deviceType === 'Mobile' ) {
+									return unit === mobileFallbackValue[ currentHoverState ].unit ? mobileFallbackValue[ currentHoverState ].value : ''
+								} else if ( deviceType === 'Tablet' ) {
+									return unit === tabletFallbackValue[ currentHoverState ].unit ? tabletFallbackValue[ currentHoverState ].value : ''
+								} else if ( deviceType === 'Desktop' && currentHoverState !== 'normal' ) {
+									return unit === desktopFallbackValue[ currentHoverState ].unit ? desktopFallbackValue[ currentHoverState ].value : ''
 								}
 
-								if ( deviceType === 'Mobile' && tabletHasValue.left ) {
-									return unit === _unitTablet ? _valueTablet.left : ''
-								} else if ( ( deviceType === 'Mobile' || deviceType === 'Tablet' ) && desktopHasValue.left ) {
-									return unit === _unitDesktop ? _valueDesktop.left : ''
-								}
 								return typeof props.placeholderLeft === 'undefined' ? propsToPass.placeholder : props.placeholderLeft
 							} )() }
 						/>
@@ -382,27 +538,35 @@ const FourRangeControl = memo( props => {
 								onChange={ onChangeTop }
 								allowReset={ false }
 								initialPosition={ ( () => {
-									if ( currentHoverState !== 'normal' ) {
-										return ''
-									}
-
-									if ( deviceType === 'Mobile' && tabletHasValue.top ) {
-										return unit === _unitTablet ? _valueTablet.top : ''
-									} else if ( ( deviceType === 'Mobile' || deviceType === 'Tablet' ) && desktopHasValue.top ) {
-										return unit === _unitDesktop ? _valueDesktop.top : ''
+									const {
+										desktopFallbackValue,
+										tabletFallbackValue,
+										mobileFallbackValue,
+									} = deviceFallbackValue( 'top' )
+
+									if ( deviceType === 'Mobile' ) {
+										return unit === mobileFallbackValue[ currentHoverState ].unit ? mobileFallbackValue[ currentHoverState ].value : ''
+									} else if ( deviceType === 'Tablet' ) {
+										return unit === tabletFallbackValue[ currentHoverState ].unit ? tabletFallbackValue[ currentHoverState ].value : ''
+									} else if ( deviceType === 'Desktop' && currentHoverState !== 'normal' ) {
+										return unit === desktopFallbackValue[ currentHoverState ].unit ? desktopFallbackValue[ currentHoverState ].value : ''
 									}
 
 									return propsToPass.initialPosition
 								} )() }
 								placeholder={ ( () => {
-									if ( currentHoverState !== 'normal' ) {
-										return ''
-									}
-
-									if ( deviceType === 'Mobile' && tabletHasValue.top ) {
-										return unit === _unitTablet ? _valueTablet.top : ''
-									} else if ( ( deviceType === 'Mobile' || deviceType === 'Tablet' ) && desktopHasValue.top ) {
-										return unit === _unitDesktop ? _valueDesktop.top : ''
+									const {
+										desktopFallbackValue,
+										tabletFallbackValue,
+										mobileFallbackValue,
+									} = deviceFallbackValue( 'top' )
+
+									if ( deviceType === 'Mobile' ) {
+										return unit === mobileFallbackValue[ currentHoverState ].unit ? mobileFallbackValue[ currentHoverState ].value : ''
+									} else if ( deviceType === 'Tablet' ) {
+										return unit === tabletFallbackValue[ currentHoverState ].unit ? tabletFallbackValue[ currentHoverState ].value : ''
+									} else if ( deviceType === 'Desktop' && currentHoverState !== 'normal' ) {
+										return unit === desktopFallbackValue[ currentHoverState ].unit ? desktopFallbackValue[ currentHoverState ].value : ''
 									}
 
 									return typeof props.placeholderTop === 'undefined' ? propsToPass.placeholder : props.placeholderTop
@@ -427,27 +591,35 @@ const FourRangeControl = memo( props => {
 								onChange={ onChangeRight }
 								allowReset={ false }
 								initialPosition={ ( () => {
-									if ( currentHoverState !== 'normal' ) {
-										return ''
-									}
-
-									if ( deviceType === 'Mobile' && tabletHasValue.right ) {
-										return unit === _unitTablet ? _valueTablet.right : ''
-									} else if ( ( deviceType === 'Mobile' || deviceType === 'Tablet' ) && desktopHasValue.right ) {
-										return unit === _unitDesktop ? _valueDesktop.right : ''
+									const {
+										desktopFallbackValue,
+										tabletFallbackValue,
+										mobileFallbackValue,
+									} = deviceFallbackValue( 'right' )
+
+									if ( deviceType === 'Mobile' ) {
+										return unit === mobileFallbackValue[ currentHoverState ].unit ? mobileFallbackValue[ currentHoverState ].value : ''
+									} else if ( deviceType === 'Tablet' ) {
+										return unit === tabletFallbackValue[ currentHoverState ].unit ? tabletFallbackValue[ currentHoverState ].value : ''
+									} else if ( deviceType === 'Desktop' && currentHoverState !== 'normal' ) {
+										return unit === desktopFallbackValue[ currentHoverState ].unit ? desktopFallbackValue[ currentHoverState ].value : ''
 									}
 
 									return propsToPass.initialPosition
 								} )() }
 								placeholder={ ( () => {
-									if ( currentHoverState !== 'normal' ) {
-										return ''
-									}
-
-									if ( deviceType === 'Mobile' && tabletHasValue.right ) {
-										return unit === _unitTablet ? _valueTablet.right : ''
-									} else if ( ( deviceType === 'Mobile' || deviceType === 'Tablet' ) && desktopHasValue.right ) {
-										return unit === _unitDesktop ? _valueDesktop.right : ''
+									const {
+										desktopFallbackValue,
+										tabletFallbackValue,
+										mobileFallbackValue,
+									} = deviceFallbackValue( 'right' )
+
+									if ( deviceType === 'Mobile' ) {
+										return unit === mobileFallbackValue[ currentHoverState ].unit ? mobileFallbackValue[ currentHoverState ].value : ''
+									} else if ( deviceType === 'Tablet' ) {
+										return unit === tabletFallbackValue[ currentHoverState ].unit ? tabletFallbackValue[ currentHoverState ].value : ''
+									} else if ( deviceType === 'Desktop' && currentHoverState !== 'normal' ) {
+										return unit === desktopFallbackValue[ currentHoverState ].unit ? desktopFallbackValue[ currentHoverState ].value : ''
 									}
 
 									return typeof props.placeholderRight === 'undefined' ? propsToPass.placeholder : props.placeholderRight
@@ -472,27 +644,35 @@ const FourRangeControl = memo( props => {
 								onChange={ onChangeBottom }
 								allowReset={ false }
 								initialPosition={ ( () => {
-									if ( currentHoverState !== 'normal' ) {
-										return ''
-									}
-
-									if ( deviceType === 'Mobile' && tabletHasValue.bottom ) {
-										return unit === _unitTablet ? _valueTablet.bottom : ''
-									} else if ( ( deviceType === 'Mobile' || deviceType === 'Tablet' ) && desktopHasValue.bottom ) {
-										return unit === _unitDesktop ? _valueDesktop.bottom : ''
+									const {
+										desktopFallbackValue,
+										tabletFallbackValue,
+										mobileFallbackValue,
+									} = deviceFallbackValue( 'bottom' )
+
+									if ( deviceType === 'Mobile' ) {
+										return unit === mobileFallbackValue[ currentHoverState ].unit ? mobileFallbackValue[ currentHoverState ].value : ''
+									} else if ( deviceType === 'Tablet' ) {
+										return unit === tabletFallbackValue[ currentHoverState ].unit ? tabletFallbackValue[ currentHoverState ].value : ''
+									} else if ( deviceType === 'Desktop' && currentHoverState !== 'normal' ) {
+										return unit === desktopFallbackValue[ currentHoverState ].unit ? desktopFallbackValue[ currentHoverState ].value : ''
 									}
 
 									return propsToPass.initialPosition
 								} )() }
 								placeholder={ ( () => {
-									if ( currentHoverState !== 'normal' ) {
-										return ''
-									}
-
-									if ( deviceType === 'Mobile' && tabletHasValue.bottom ) {
-										return unit === _unitTablet ? _valueTablet.bottom : ''
-									} else if ( ( deviceType === 'Mobile' || deviceType === 'Tablet' ) && desktopHasValue.bottom ) {
-										return unit === _unitDesktop ? _valueDesktop.bottom : ''
+									const {
+										desktopFallbackValue,
+										tabletFallbackValue,
+										mobileFallbackValue,
+									} = deviceFallbackValue( 'bottom' )
+
+									if ( deviceType === 'Mobile' ) {
+										return unit === mobileFallbackValue[ currentHoverState ].unit ? mobileFallbackValue[ currentHoverState ].value : ''
+									} else if ( deviceType === 'Tablet' ) {
+										return unit === tabletFallbackValue[ currentHoverState ].unit ? tabletFallbackValue[ currentHoverState ].value : ''
+									} else if ( deviceType === 'Desktop' && currentHoverState !== 'normal' ) {
+										return unit === desktopFallbackValue[ currentHoverState ].unit ? desktopFallbackValue[ currentHoverState ].value : ''
 									}
 
 									return typeof props.placeholderBottom === 'undefined' ? propsToPass.placeholder : props.placeholderBottom
@@ -517,27 +697,35 @@ const FourRangeControl = memo( props => {
 								onChange={ onChangeLeft }
 								allowReset={ false }
 								initialPosition={ ( () => {
-									if ( currentHoverState !== 'normal' ) {
-										return ''
-									}
-
-									if ( deviceType === 'Mobile' && tabletHasValue.left ) {
-										return unit === _unitTablet ? _valueTablet.left : ''
-									} else if ( ( deviceType === 'Mobile' || deviceType === 'Tablet' ) && desktopHasValue.left ) {
-										return unit === _unitDesktop ? _valueDesktop.left : ''
+									const {
+										desktopFallbackValue,
+										tabletFallbackValue,
+										mobileFallbackValue,
+									} = deviceFallbackValue( 'left' )
+
+									if ( deviceType === 'Mobile' ) {
+										return unit === mobileFallbackValue[ currentHoverState ].unit ? mobileFallbackValue[ currentHoverState ].value : ''
+									} else if ( deviceType === 'Tablet' ) {
+										return unit === tabletFallbackValue[ currentHoverState ].unit ? tabletFallbackValue[ currentHoverState ].value : ''
+									} else if ( deviceType === 'Desktop' && currentHoverState !== 'normal' ) {
+										return unit === desktopFallbackValue[ currentHoverState ].unit ? desktopFallbackValue[ currentHoverState ].value : ''
 									}
 
 									return propsToPass.initialPosition
 								} )() }
 								placeholder={ ( () => {
-									if ( currentHoverState !== 'normal' ) {
-										return ''
-									}
-
-									if ( deviceType === 'Mobile' && tabletHasValue.left ) {
-										return unit === _unitTablet ? _valueTablet.left : ''
-									} else if ( ( deviceType === 'Mobile' || deviceType === 'Tablet' ) && desktopHasValue.left ) {
-										return unit === _unitDesktop ? _valueDesktop.left : ''
+									const {
+										desktopFallbackValue,
+										tabletFallbackValue,
+										mobileFallbackValue,
+									} = deviceFallbackValue( 'left' )
+
+									if ( deviceType === 'Mobile' ) {
+										return unit === mobileFallbackValue[ currentHoverState ].unit ? mobileFallbackValue[ currentHoverState ].value : ''
+									} else if ( deviceType === 'Tablet' ) {
+										return unit === tabletFallbackValue[ currentHoverState ].unit ? tabletFallbackValue[ currentHoverState ].value : ''
+									} else if ( deviceType === 'Desktop' && currentHoverState !== 'normal' ) {
+										return unit === desktopFallbackValue[ currentHoverState ].unit ? desktopFallbackValue[ currentHoverState ].value : ''
 									}
 
 									return typeof props.placeholderLeft === 'undefined' ? propsToPass.placeholder : props.placeholderLeft