Update gap control

packages/block-editor/src/components/global-styles/dimensions-panel.js

@@ -98,7 +98,7 @@ function useHasChildLayout( settings ) {
 	return !! settings?.layout;
 }
 
-function useHasSpacingPresets( settings ) {
+export function useHasSpacingPresets( settings ) {
 	const {
 		custom,
 		theme,
@@ -148,7 +148,7 @@ function splitStyleValue( value ) {
 	return value;
 }
 
-function splitGapValue( value ) {
+export function splitGapValue( value ) {
 	// Check for shorthand value (a string value).
 	if ( value && typeof value === 'string' ) {
 		// If the value is a string, treat it as a single side (top) for the spacing controls.
@@ -219,7 +219,6 @@ export default function DimensionsPanel( {
 	includeLayoutControls = false,
 } ) {
 	const { dimensions, spacing } = settings;
-
 	const decodeValue = ( rawValue ) => {
 		if ( rawValue && typeof rawValue === 'object' ) {
 			return Object.keys( rawValue ).reduce( ( acc, key ) => {
@@ -330,7 +329,7 @@ export default function DimensionsPanel( {
 	const onMouseOverMargin = () => onVisualize( 'margin' );
 
 	// Block Gap
-	const showGapControl = useHasGap( settings );
+	const showGapControl = false;
 	const gapValue = decodeValue( inheritedValue?.spacing?.blockGap );
 	const gapValues = splitGapValue( gapValue );
 	const gapSides = Array.isArray( settings?.spacing?.blockGap )

packages/block-editor/src/hooks/layout.js

@@ -14,13 +14,14 @@ import {
 	CustomSelectControl,
 	FlexBlock,
 	PanelBody,
-	RangeControl,
+	UnitControl,
 	__experimentalToggleGroupControl as ToggleGroupControl,
 	__experimentalToggleGroupControlOption as ToggleGroupControlOption,
 	__experimentalToggleGroupControlOptionIcon as ToggleGroupControlOptionIcon,
 	__experimentalHStack as HStack,
 	__experimentalVStack as VStack,
 	privateApis as componentsPrivateApis,
+	__experimentalUseCustomUnits as useCustomUnits,
 } from '@wordpress/components';
 
 import { __ } from '@wordpress/i18n';
@@ -48,6 +49,11 @@ import { useBlockEditingMode } from '../components/block-editing-mode';
 import { LAYOUT_DEFINITIONS } from '../layouts/definitions';
 import { useBlockSettings, useStyleOverride } from './utils';
 import { unlock } from '../lock-unlock';
+import SpacingSizesControl from '../components/spacing-sizes-control';
+import {
+	useHasSpacingPresets,
+	splitGapValue,
+} from '../components/global-styles/dimensions-panel';
 
 import {
 	alignTop,
@@ -166,6 +172,16 @@ function LayoutPanelPure( { layout, style, setAttributes, name: blockName } ) {
 	// Block settings come from theme.json under settings.[blockName].
 	const { layout: layoutSettings } = settings;
 	const { allowEditing: allowEditingSetting } = layoutSettings;
+	const showSpacingPresetsControl = useHasSpacingPresets( settings );
+	const units = useCustomUnits( {
+		availableUnits: settings?.spacing?.units || [
+			'%',
+			'px',
+			'em',
+			'rem',
+			'vw',
+		],
+	} );
 
 	const { themeSupportsLayout } = useSelect( ( select ) => {
 		const { getSettings } = select( blockEditorStore );
@@ -439,7 +455,7 @@ function LayoutPanelPure( { layout, style, setAttributes, name: blockName } ) {
 				...style,
 				spacing: {
 					...style?.spacing,
-					blockGap: `${ newGap }px`,
+					blockGap: newGap.top,
 				},
 			},
 		} );
@@ -596,14 +612,29 @@ function LayoutPanelPure( { layout, style, setAttributes, name: blockName } ) {
 						</HStack>
 						<HStack alignment="topLeft">
 							<FlexBlock>
-								<RangeControl
-									label={ __( 'Block spacing' ) }
-									onChange={ onChangeGap }
-									value={ style?.spacing?.blockGap }
-									min={ 0 }
-									max={ 100 }
-									withInputField={ false }
-								/>
+								{ ! showSpacingPresetsControl && (
+									<UnitControl
+										label={ __( 'Block spacing' ) }
+										__unstableInputWidth="80px"
+										min={ 0 }
+										onChange={ onChangeGap }
+										units={ units }
+										value={ style?.spacing?.blockGap }
+									/>
+								) }
+								{ showSpacingPresetsControl && (
+									<SpacingSizesControl
+										label={ __( 'Spacing' ) }
+										min={ 0 }
+										onChange={ onChangeGap }
+										showSideInLabel={ false }
+										sides={ [ 'top' ] } // Use 'top' as the shorthand property in non-axial configurations.
+										values={ splitGapValue(
+											style?.spacing?.blockGap
+										) }
+										allowReset={ false }
+									/>
+								) }
 							</FlexBlock>
 						</HStack>