diff --git a/src/block-components/alignment/edit.js b/src/block-components/alignment/edit.js
index ea83c26f4..a0b2a0c97 100644
--- a/src/block-components/alignment/edit.js
+++ b/src/block-components/alignment/edit.js
@@ -256,42 +256,34 @@ export const Edit = memo( props => {
 							const newAttributes = {}
 
 							if ( deviceType === 'Desktop' ) {
+								// If the new desktop value is the same as the tablet value, set the tablet value to ''
+								// since tablet value will just inherit the desktop value
+								// otherwise, set the tablet value to the old desktop value because tablet was inheriting the old value
+								if ( innerBlockOrientationTablet === value ) {
+									newAttributes.innerBlockOrientationTablet = ''
+								} else {
+									newAttributes.innerBlockOrientationTablet = innerBlockOrientation
+								}
 								newAttributes.innerBlockOrientation = value
-							} else if ( deviceType === 'Tablet' && innerBlockOrientation === value ) {
-								newAttributes.innerBlockOrientationTablet = ''
+								newAttributes.innerBlockJustify = ''
+								newAttributes.innerBlockAlign = ''
 							} else if ( deviceType === 'Tablet' ) {
-								newAttributes.innerBlockOrientationTablet = value
-							} else if ( deviceType === 'Mobile' && _innerBlockOrientationTablet === value ) {
-								newAttributes.innerBlockOrientationMobile = ''
-							} else if ( deviceType === 'Mobile' ) {
-								newAttributes.innerBlockOrientationMobile = value
-							}
-
-							if ( value === 'vertical' ) { // Vertical.
-								if ( deviceType === 'Desktop' ) {
-									newAttributes.innerBlockJustify = ''
-								}
-
-								if ( deviceType === 'Tablet' || ( deviceType === 'Desktop' && ! innerBlockOrientationTablet ) ) {
-									newAttributes.innerBlockJustifyTablet = ''
-								}
-
-								if ( deviceType === 'Mobile' || ( deviceType === 'Desktop' && ! innerBlockOrientationTablet && ! innerBlockOrientationMobile ) || ( deviceType === 'Tablet' && ! innerBlockOrientationMobile ) ) {
-									newAttributes.innerBlockJustifyMobile = ''
-								}
-							} else { // Horizontal
-								if ( deviceType === 'Desktop' ) {
-									newAttributes.innerBlockAlign = ''
-								}
-
-								if ( deviceType === 'Tablet' || ( deviceType === 'Desktop' && ! innerBlockOrientationTablet ) ) {
-									newAttributes.innerBlockAlignTablet = ''
+								if ( innerBlockOrientationMobile === value ) {
+									newAttributes.innerBlockOrientationMobile = ''
+								} else {
+									newAttributes.innerBlockOrientationMobile = _innerBlockOrientationTablet
 								}
 
-								if ( deviceType === 'Mobile' || ( deviceType === 'Desktop' && ! innerBlockOrientationTablet && ! innerBlockOrientationMobile ) || ( deviceType === 'Tablet' && ! innerBlockOrientationMobile ) ) {
-									newAttributes.innerBlockAlignMobile = ''
-								}
+								// if the new tablet value is the same as the desktop value, set the tablet value to ''
+								newAttributes.innerBlockOrientationTablet = innerBlockOrientation === value ? '' : value
+								newAttributes.innerBlockJustifyTablet = ''
+								newAttributes.innerBlockAlignTablet = ''
+							} else {
+								newAttributes.innerBlockOrientationMobile = _innerBlockOrientationTablet === value ? '' : value
+								newAttributes.innerBlockJustifyMobile = ''
+								newAttributes.innerBlockAlignMobile = ''
 							}
+
 							setAttributes( newAttributes )
 						} }
 					/>
diff --git a/src/block-components/alignment/style.js b/src/block-components/alignment/style.js
index ef0b2c048..badbd959e 100644
--- a/src/block-components/alignment/style.js
+++ b/src/block-components/alignment/style.js
@@ -90,130 +90,38 @@ export const addStyles = ( blockStyleGenerator, props = {} ) => {
 		 ],
 	} ] )
 
-	/* Desktop alignItems */
-	blockStyleGenerator.addBlockStyles( 'innerBlockJustify', [ {
+	blockStyleGenerator.addBlockStyles( 'innerBlockOrientation', [ {
 		...propsToPass,
 		renderIn: 'edit',
 		selectorCallback: editorInnerBlockSelectorCallback,
 		styleRule: 'alignItems',
-		attrName: 'innerBlockJustify',
-		key: 'innerBlockJustifyVerticalEdit',
-		responsive: [ 'desktop' ],
-		enabledCallback: getAttribute => getAttribute( 'innerBlockOrientation' ) !== 'horizontal',
-		dependencies: [
-			'innerBlockOrientation',
-			...dependencies,
-		],
-	}, {
-		...propsToPass,
-		renderIn: 'save',
-		selectorCallback: innerBlockSelectorCallback,
-		styleRule: 'alignItems',
-		attrName: 'innerBlockJustify',
-		key: 'innerBlockJustifyVerticalSave',
-		responsive: [ 'desktop' ],
-		enabledCallback: getAttribute => getAttribute( 'innerBlockOrientation' ) !== 'horizontal',
-		dependencies: [
-			'innerBlockOrientation',
-			...dependencies,
-		],
-	} ] )
+		attrName: 'innerBlockOrientation',
+		key: 'innerBlockOrientationAlignItems',
+		responsive: 'all',
+		valuePreCallback: ( value, getAttribute, device ) => {
+			if ( device === 'desktop' ) {
+				if ( value === 'horizontal' ) {
+					return getAttribute( 'innerBlockAlign' )
+				}
 
-	blockStyleGenerator.addBlockStyles( 'innerBlockAlign', [ {
-		...propsToPass,
-		renderIn: 'edit',
-		selectorCallback: editorInnerBlockSelectorCallback,
-		styleRule: 'alignItems',
-		attrName: 'innerBlockAlign',
-		key: 'innerBlockAlignHorizontalEdit',
-		responsive: [ 'desktop' ],
-		enabledCallback: getAttribute => getAttribute( 'innerBlockOrientation' ) === 'horizontal',
-		dependencies: [
-			'innerBlockOrientation',
-			...dependencies,
-		],
-	}, {
-		...propsToPass,
-		renderIn: 'save',
-		selectorCallback: innerBlockSelectorCallback,
-		styleRule: 'alignItems',
-		attrName: 'innerBlockAlign',
-		key: 'innerBlockAlignHorizontalSave',
-		responsive: [ 'desktop' ],
-		enabledCallback: getAttribute => getAttribute( 'innerBlockOrientation' ) === 'horizontal',
-		dependencies: [
-			'innerBlockOrientation',
-			...dependencies,
-		],
-	} ] )
+				return getAttribute( 'innerBlockJustify' )
+			}
 
-	/* Tablet alignItems */
-	blockStyleGenerator.addBlockStyles( 'innerBlockJustify', [ {
-		...propsToPass,
-		renderIn: 'edit',
-		selectorCallback: editorInnerBlockSelectorCallback,
-		styleRule: 'alignItems',
-		attrName: 'innerBlockJustify',
-		key: 'innerBlockJustifyVerticalEdit',
-		responsive: [ 'tablet' ],
-		enabledCallback: getAttribute => getAttribute( 'innerBlockOrientationTablet' ) ? getAttribute( 'innerBlockOrientationTablet' ) !== 'horizontal' : getAttribute( 'innerBlockOrientation' ) !== 'horizontal',
-		dependencies: [
-			'innerBlockOrientation',
-			...dependencies,
-		],
-	}, {
-		...propsToPass,
-		renderIn: 'save',
-		selectorCallback: innerBlockSelectorCallback,
-		styleRule: 'alignItems',
-		attrName: 'innerBlockJustify',
-		key: 'innerBlockJustifyVerticalSave',
-		responsive: [ 'tablet' ],
-		enabledCallback: getAttribute => getAttribute( 'innerBlockOrientationTablet' ) ? getAttribute( 'innerBlockOrientationTablet' ) !== 'horizontal' : getAttribute( 'innerBlockOrientation' ) !== 'horizontal',
-		dependencies: [
-			'innerBlockOrientation',
-			...dependencies,
-		],
-	} ] )
+			const inheritOrientation = device === 'tablet' ? getAttribute( 'innerBlockOrientation', 'desktop' ) : getAttribute( 'innerBlockOrientation', 'tablet' ) || getAttribute( 'innerBlockOrientation', 'desktop' )
 
-	blockStyleGenerator.addBlockStyles( 'innerBlockAlign', [ {
-		...propsToPass,
-		renderIn: 'edit',
-		selectorCallback: editorInnerBlockSelectorCallback,
-		styleRule: 'alignItems',
-		attrName: 'innerBlockAlign',
-		key: 'innerBlockAlignHorizontalEdit',
-		responsive: [ 'tablet' ],
-		enabledCallback: getAttribute => getAttribute( 'innerBlockOrientationTablet' ) ? getAttribute( 'innerBlockOrientationTablet' ) === 'horizontal' : getAttribute( 'innerBlockOrientation' ) === 'horizontal',
-		dependencies: [
-			'innerBlockOrientation',
-			...dependencies,
-		],
-	}, {
-		...propsToPass,
-		renderIn: 'save',
-		selectorCallback: innerBlockSelectorCallback,
-		styleRule: 'alignItems',
-		attrName: 'innerBlockAlign',
-		key: 'innerBlockAlignHorizontalSave',
-		responsive: [ 'tablet' ],
-		enabledCallback: getAttribute => getAttribute( 'innerBlockOrientationTablet' ) ? getAttribute( 'innerBlockOrientationTablet' ) === 'horizontal' : getAttribute( 'innerBlockOrientation' ) === 'horizontal',
-		dependencies: [
-			'innerBlockOrientation',
-			...dependencies,
-		],
-	} ] )
+			// For tablet and mobile, inner block orientation is '' if it is the same as the previous device
+			// otherwise, it will have a value of either 'horizontal' or 'vertical'
+			// reset alignItems to default if inner block orientation is different than the previous device
+			if ( value === 'horizontal' ) {
+				return getAttribute( 'innerBlockAlign', device ) || 'initial'
+			} else if ( value === 'vertical' ) {
+				return getAttribute( 'innerBlockJustify', device ) || 'initial'
+			} else if ( inheritOrientation === 'horizontal' ) {
+				return getAttribute( 'innerBlockAlign', device )
+			}
 
-	/* Mobile alignItems */
-	blockStyleGenerator.addBlockStyles( 'innerBlockJustify', [ {
-		...propsToPass,
-		renderIn: 'edit',
-		selectorCallback: editorInnerBlockSelectorCallback,
-		styleRule: 'alignItems',
-		attrName: 'innerBlockJustify',
-		key: 'innerBlockJustifyVerticalEdit',
-		responsive: [ 'mobile' ],
-		enabledCallback: getAttribute => getAttribute( 'innerBlockOrientationMobile' ) ? getAttribute( 'innerBlockOrientationMobile' ) !== 'horizontal' : ( getAttribute( 'innerBlockOrientationTablet' ) ? getAttribute( 'innerBlockOrientationTablet' ) !== 'horizontal' : getAttribute( 'innerBlockOrientation' ) !== 'horizontal' ),
+			return getAttribute( 'innerBlockJustify', device )
+		},
 		dependencies: [
 			'innerBlockOrientation',
 			...dependencies,
@@ -223,196 +131,71 @@ export const addStyles = ( blockStyleGenerator, props = {} ) => {
 		renderIn: 'save',
 		selectorCallback: innerBlockSelectorCallback,
 		styleRule: 'alignItems',
-		attrName: 'innerBlockJustify',
-		key: 'innerBlockJustifyVerticalSave',
-		responsive: [ 'mobile' ],
-		enabledCallback: getAttribute => getAttribute( 'innerBlockOrientationMobile' ) ? getAttribute( 'innerBlockOrientationMobile' ) !== 'horizontal' : ( getAttribute( 'innerBlockOrientationTablet' ) ? getAttribute( 'innerBlockOrientationTablet' ) !== 'horizontal' : getAttribute( 'innerBlockOrientation' ) !== 'horizontal' ),
-		dependencies: [
-			'innerBlockOrientation',
-			...dependencies,
-		],
-	} ] )
+		attrName: 'innerBlockOrientation',
+		key: 'innerBlockOrientationAlignItems-save',
+		responsive: 'all',
+		valuePreCallback: ( value, getAttribute, device ) => {
+			if ( device === 'desktop' ) {
+				if ( value === 'horizontal' ) {
+					return getAttribute( 'innerBlockAlign' )
+				}
 
-	blockStyleGenerator.addBlockStyles( 'innerBlockAlign', [ {
-		...propsToPass,
-		renderIn: 'edit',
-		selectorCallback: editorInnerBlockSelectorCallback,
-		styleRule: 'alignItems',
-		attrName: 'innerBlockAlign',
-		key: 'innerBlockAlignHorizontalEdit',
-		responsive: [ 'mobile' ],
-		enabledCallback: getAttribute => getAttribute( 'innerBlockOrientationMobile' ) ? getAttribute( 'innerBlockOrientationMobile' ) === 'horizontal' : ( getAttribute( 'innerBlockOrientationTablet' ) ? getAttribute( 'innerBlockOrientationTablet' ) === 'horizontal' : getAttribute( 'innerBlockOrientation' ) === 'horizontal' ),
-		dependencies: [
-			'innerBlockOrientation',
-			...dependencies,
-		],
-	}, {
-		...propsToPass,
-		renderIn: 'save',
-		selectorCallback: innerBlockSelectorCallback,
-		styleRule: 'alignItems',
-		attrName: 'innerBlockAlign',
-		key: 'innerBlockAlignHorizontalSave',
-		responsive: [ 'mobile' ],
-		enabledCallback: getAttribute => getAttribute( 'innerBlockOrientationMobile' ) ? getAttribute( 'innerBlockOrientationMobile' ) === 'horizontal' : ( getAttribute( 'innerBlockOrientationTablet' ) ? getAttribute( 'innerBlockOrientationTablet' ) === 'horizontal' : getAttribute( 'innerBlockOrientation' ) === 'horizontal' ),
-		dependencies: [
-			'innerBlockOrientation',
-			...dependencies,
-		],
-	} ] )
+				return getAttribute( 'innerBlockJustify' )
+			}
 
-	/* Desktop justifyContent */
-	blockStyleGenerator.addBlockStyles( 'innerBlockAlign', [ {
-		...propsToPass,
-		renderIn: 'edit',
-		selectorCallback: editorInnerBlockSelectorCallback,
-		styleRule: 'justifyContent',
-		attrName: 'innerBlockAlign',
-		key: 'innerBlockAlignVerticalEdit',
-		responsive: [ 'desktop' ],
-		enabledCallback: getAttribute => getAttribute( 'innerBlockOrientation' ) !== 'horizontal',
-		dependencies: [
-			'innerBlockOrientation',
-			...dependencies,
-		],
-	}, {
-		...propsToPass,
-		renderIn: 'save',
-		selectorCallback: innerBlockSelectorCallback,
-		styleRule: 'justifyContent',
-		attrName: 'innerBlockAlign',
-		key: 'innerBlockAlignVerticalSave',
-		responsive: [ 'desktop' ],
-		enabledCallback: getAttribute => getAttribute( 'innerBlockOrientation' ) !== 'horizontal',
-		dependencies: [
-			'innerBlockOrientation',
-			...dependencies,
-		],
-	} ] )
+			const inheritOrientation = device === 'tablet' ? getAttribute( 'innerBlockOrientation', 'desktop' ) : getAttribute( 'innerBlockOrientation', 'tablet' ) || getAttribute( 'innerBlockOrientation', 'desktop' )
 
-	blockStyleGenerator.addBlockStyles( 'innerBlockJustify', [ {
-		...propsToPass,
-		renderIn: 'edit',
-		selectorCallback: editorInnerBlockSelectorCallback,
-		styleRule: 'justifyContent',
-		attrName: 'innerBlockJustify',
-		key: 'innerBlockJustifyHorizontalEdit',
-		responsive: [ 'desktop' ],
-		enabledCallback: getAttribute => getAttribute( 'innerBlockOrientation' ) === 'horizontal',
-		dependencies: [
-			'innerBlockOrientation',
-			...dependencies,
-		],
-	}, {
-		...propsToPass,
-		renderIn: 'save',
-		selectorCallback: innerBlockSelectorCallback,
-		styleRule: 'justifyContent',
-		attrName: 'innerBlockJustify',
-		key: 'innerBlockJustifyHorizontalSave',
-		responsive: [ 'desktop' ],
-		enabledCallback: getAttribute => getAttribute( 'innerBlockOrientation' ) === 'horizontal',
-		dependencies: [
-			'innerBlockOrientation',
-			...dependencies,
-		],
-	} ] )
+			// For tablet and mobile, inner block orientation is '' if it is the same as the previous device
+			// otherwise, it will have a value of either 'horizontal' or 'vertical'
+			// reset alignItems to default if inner block orientation is different than the previous device
+			if ( value === 'horizontal' ) {
+				return getAttribute( 'innerBlockAlign', device ) || 'initial'
+			} else if ( value === 'vertical' ) {
+				return getAttribute( 'innerBlockJustify', device ) || 'initial'
+			} else if ( inheritOrientation === 'horizontal' ) {
+				return getAttribute( 'innerBlockAlign', device )
+			}
 
-	/* Tablet justifyContent */
-	blockStyleGenerator.addBlockStyles( 'innerBlockAlign', [ {
-		...propsToPass,
-		renderIn: 'edit',
-		selectorCallback: editorInnerBlockSelectorCallback,
-		styleRule: 'justifyContent',
-		attrName: 'innerBlockAlign',
-		key: 'innerBlockAlignVerticalEdit',
-		responsive: [ 'tablet' ],
-		enabledCallback: getAttribute => getAttribute( 'innerBlockOrientationTablet' ) ? getAttribute( 'innerBlockOrientationTablet' ) !== 'horizontal' : getAttribute( 'innerBlockOrientation' ) !== 'horizontal',
-		dependencies: [
-			'innerBlockOrientation',
-			...dependencies,
-		],
-	}, {
-		...propsToPass,
-		renderIn: 'save',
-		selectorCallback: innerBlockSelectorCallback,
-		styleRule: 'justifyContent',
-		attrName: 'innerBlockAlign',
-		key: 'innerBlockAlignVerticalSave',
-		responsive: [ 'tablet' ],
-		enabledCallback: getAttribute => getAttribute( 'innerBlockOrientationTablet' ) ? getAttribute( 'innerBlockOrientationTablet' ) !== 'horizontal' : getAttribute( 'innerBlockOrientation' ) !== 'horizontal',
+			return getAttribute( 'innerBlockJustify', device )
+		},
 		dependencies: [
 			'innerBlockOrientation',
 			...dependencies,
-		],
+		 ],
 	} ] )
 
-	blockStyleGenerator.addBlockStyles( 'innerBlockJustify', [ {
+	blockStyleGenerator.addBlockStyles( 'innerBlockOrientation', [ {
 		...propsToPass,
 		renderIn: 'edit',
 		selectorCallback: editorInnerBlockSelectorCallback,
 		styleRule: 'justifyContent',
-		attrName: 'innerBlockJustify',
-		key: 'innerBlockJustifyHorizontalEdit',
-		responsive: [ 'tablet' ],
-		enabledCallback: getAttribute => getAttribute( 'innerBlockOrientationTablet' ) ? getAttribute( 'innerBlockOrientationTablet' ) === 'horizontal' : getAttribute( 'innerBlockOrientation' ) === 'horizontal',
-		dependencies: [
-			'innerBlockOrientation',
-			...dependencies,
-		],
-	}, {
-		...propsToPass,
-		renderIn: 'save',
-		selectorCallback: innerBlockSelectorCallback,
-		styleRule: 'justifyContent',
-		attrName: 'innerBlockJustify',
-		key: 'innerBlockJustifyHorizontalSave',
-		responsive: [ 'tablet' ],
-		enabledCallback: getAttribute => getAttribute( 'innerBlockOrientationTablet' ) ? getAttribute( 'innerBlockOrientationTablet' ) === 'horizontal' : getAttribute( 'innerBlockOrientation' ) === 'horizontal',
-		dependencies: [
-			'innerBlockOrientation',
-			...dependencies,
-		],
-	} ] )
+		attrName: 'innerBlockOrientation',
+		key: 'innerBlockOrientationJustifyContent',
+		responsive: 'all',
+		valuePreCallback: ( value, getAttribute, device ) => {
+			if ( device === 'desktop' ) {
+				if ( value === 'horizontal' ) {
+					return getAttribute( 'innerBlockJustify' )
+				}
 
-	/* Mobile justifyContent */
-	blockStyleGenerator.addBlockStyles( 'innerBlockAlign', [ {
-		...propsToPass,
-		renderIn: 'edit',
-		selectorCallback: editorInnerBlockSelectorCallback,
-		styleRule: 'justifyContent',
-		attrName: 'innerBlockAlign',
-		key: 'innerBlockAlignVerticalEdit',
-		responsive: [ 'mobile' ],
-		enabledCallback: getAttribute => getAttribute( 'innerBlockOrientationMobile' ) ? getAttribute( 'innerBlockOrientationMobile' ) !== 'horizontal' : ( getAttribute( 'innerBlockOrientationTablet' ) ? getAttribute( 'innerBlockOrientationTablet' ) !== 'horizontal' : getAttribute( 'innerBlockOrientation' ) !== 'horizontal' ),
-		dependencies: [
-			'innerBlockOrientation',
-			...dependencies,
-		],
-	}, {
-		...propsToPass,
-		renderIn: 'save',
-		selectorCallback: innerBlockSelectorCallback,
-		styleRule: 'justifyContent',
-		attrName: 'innerBlockAlign',
-		key: 'innerBlockAlignVerticalSave',
-		responsive: [ 'mobile' ],
-		enabledCallback: getAttribute => getAttribute( 'innerBlockOrientationMobile' ) ? getAttribute( 'innerBlockOrientationMobile' ) !== 'horizontal' : ( getAttribute( 'innerBlockOrientationTablet' ) ? getAttribute( 'innerBlockOrientationTablet' ) !== 'horizontal' : getAttribute( 'innerBlockOrientation' ) !== 'horizontal' ),
-		dependencies: [
-			'innerBlockOrientation',
-			...dependencies,
-		],
-	} ] )
+				return getAttribute( 'innerBlockAlign' )
+			}
 
-	blockStyleGenerator.addBlockStyles( 'innerBlockJustify', [ {
-		...propsToPass,
-		renderIn: 'edit',
-		selectorCallback: editorInnerBlockSelectorCallback,
-		styleRule: 'justifyContent',
-		attrName: 'innerBlockJustify',
-		key: 'innerBlockJustifyHorizontalEdit',
-		responsive: [ 'mobile' ],
-		enabledCallback: getAttribute => getAttribute( 'innerBlockOrientationMobile' ) ? getAttribute( 'innerBlockOrientationMobile' ) === 'horizontal' : ( getAttribute( 'innerBlockOrientationTablet' ) ? getAttribute( 'innerBlockOrientationTablet' ) === 'horizontal' : getAttribute( 'innerBlockOrientation' ) === 'horizontal' ),
+			const inheritOrientation = device === 'tablet' ? getAttribute( 'innerBlockOrientation', 'desktop' ) : getAttribute( 'innerBlockOrientation', 'tablet' ) || getAttribute( 'innerBlockOrientation', 'desktop' )
+
+			// For tablet and mobile, inner block orientation is '' if it is the same as the previous device
+			// otherwise, it will have a value of either 'horizontal' or 'vertical'
+			// reset justifyContent to default if inner block orientation is different than the previous device
+			if ( value === 'horizontal' ) {
+				return getAttribute( 'innerBlockJustify', device ) || 'space-evenly'
+			} else if ( value === 'vertical' ) {
+				return getAttribute( 'innerBlockAlign', device ) || 'initial'
+			} else if ( inheritOrientation === 'horizontal' ) {
+				return getAttribute( 'innerBlockJustify', device )
+			}
+
+			return getAttribute( 'innerBlockAlign', device )
+		},
 		dependencies: [
 			'innerBlockOrientation',
 			...dependencies,
@@ -422,14 +205,37 @@ export const addStyles = ( blockStyleGenerator, props = {} ) => {
 		renderIn: 'save',
 		selectorCallback: innerBlockSelectorCallback,
 		styleRule: 'justifyContent',
-		attrName: 'innerBlockJustify',
-		key: 'innerBlockJustifyHorizontalSave',
-		responsive: [ 'mobile' ],
-		enabledCallback: getAttribute => getAttribute( 'innerBlockOrientationMobile' ) ? getAttribute( 'innerBlockOrientationMobile' ) === 'horizontal' : ( getAttribute( 'innerBlockOrientationTablet' ) ? getAttribute( 'innerBlockOrientationTablet' ) === 'horizontal' : getAttribute( 'innerBlockOrientation' ) === 'horizontal' ),
+		attrName: 'innerBlockOrientation',
+		key: 'innerBlockOrientationJustifyContent-save',
+		responsive: 'all',
+		valuePreCallback: ( value, getAttribute, device ) => {
+			if ( device === 'desktop' ) {
+				if ( value === 'horizontal' ) {
+					return getAttribute( 'innerBlockJustify' )
+				}
+
+				return getAttribute( 'innerBlockAlign' )
+			}
+
+			const inheritOrientation = device === 'tablet' ? getAttribute( 'innerBlockOrientation', 'desktop' ) : getAttribute( 'innerBlockOrientation', 'tablet' ) || getAttribute( 'innerBlockOrientation', 'desktop' )
+
+			// For tablet and mobile, inner block orientation is '' if it is the same as the previous device
+			// otherwise, it will have a value of either 'horizontal' or 'vertical'
+			// reset justifyContent to default if inner block orientation is different than the previous device
+			if ( value === 'horizontal' ) {
+				return getAttribute( 'innerBlockJustify', device ) || 'space-evenly'
+			} else if ( value === 'vertical' ) {
+				return getAttribute( 'innerBlockAlign', device ) || 'initial'
+			} else if ( inheritOrientation === 'horizontal' ) {
+				return getAttribute( 'innerBlockJustify', device )
+			}
+
+			return getAttribute( 'innerBlockAlign', device )
+		},
 		dependencies: [
 			'innerBlockOrientation',
 			...dependencies,
-		],
+		 ],
 	} ] )
 
 	/* Inner Block Wrap */