diff --git a/packages/block-editor/src/hooks/dimensions.js b/packages/block-editor/src/hooks/dimensions.js
index 33d7061a5e6f1..84315b43ef639 100644
--- a/packages/block-editor/src/hooks/dimensions.js
+++ b/packages/block-editor/src/hooks/dimensions.js
@@ -106,13 +106,14 @@ export function DimensionsPanel( props ) {
 					</ToolsPanelItem>
 				) }
 				{ ! isGapDisabled && (
-					<GapEdit
-						{ ...props }
-						hasValue={ hasGapValue }
+					<ToolsPanelItem
+						hasValue={ () => hasGapValue( props ) }
 						label={ __( 'Gap' ) }
-						reset={ resetGap }
+						onDeselect={ () => resetGap( props ) }
 						isShownByDefault={ defaultSpacingControls?.gap }
-					/>
+					>
+						<GapEdit { ...props } />
+					</ToolsPanelItem>
 				) }
 			</ToolsPanel>
 		</InspectorControls>
diff --git a/packages/block-editor/src/hooks/gap.js b/packages/block-editor/src/hooks/gap.js
index e17b9e0a243e6..e134f57eb729d 100644
--- a/packages/block-editor/src/hooks/gap.js
+++ b/packages/block-editor/src/hooks/gap.js
@@ -126,11 +126,18 @@ export function GapEdit( props ) {
 		} );
 	};
 
+	const boxValues = {
+		top: style?.spacing?.gap?.row,
+		right: style?.spacing.gap?.column,
+		bottom: style?.spacing.gap?.row,
+		left: style?.spacing.gap?.column,
+	};
+
 	return Platform.select( {
 		web: (
 			<>
 				<BoxControl
-					values={ style?.spacing?.gap }
+					values={ boxValues }
 					onChange={ onChange }
 					onChangeShowVisualizer={ onChangeShowVisualizer }
 					label={ __( 'Gap' ) }