Fix values issue with Gap box control by passing in top/right/bottom/…

…left values from row/column style values
WordPress · Aug 5, 2021 · 69ba2b9 · 69ba2b9
1 parent 59b6f06
commit 69ba2b9
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 6 deletions.
diff --git 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
@@ -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' ) }