diff --git a/lib/compat/wordpress-6.1/block-editor-settings.php b/lib/compat/wordpress-6.1/block-editor-settings.php
index 13f0f3982f8571..3181329475df4f 100644
--- a/lib/compat/wordpress-6.1/block-editor-settings.php
+++ b/lib/compat/wordpress-6.1/block-editor-settings.php
@@ -154,7 +154,7 @@ function gutenberg_get_block_editor_settings( $settings ) {
 		unset( $settings['__experimentalFeatures']['spacing']['padding'] );
 	}
 	if ( isset( $settings['__experimentalFeatures']['spacing']['customSpacingSize'] ) ) {
-		$settings['disableCustomSpacingSize'] = ! $settings['__experimentalFeatures']['spacing']['customSpacingSize'];
+		$settings['disableCustomSpacingSizes'] = ! $settings['__experimentalFeatures']['spacing']['customSpacingSize'];
 		unset( $settings['__experimentalFeatures']['spacing']['customSpacingSize'] );
 	}
 
diff --git a/lib/compat/wordpress-6.1/theme.json b/lib/compat/wordpress-6.1/theme.json
index d817f336536121..5d06385c0bb814 100644
--- a/lib/compat/wordpress-6.1/theme.json
+++ b/lib/compat/wordpress-6.1/theme.json
@@ -269,12 +269,12 @@
 			"blockGap": null,
 			"margin": false,
 			"padding": false,
-			"customSpacingSizes": true,
+			"customSpacingSize": true,
 			"units": [ "px", "em", "rem", "vh", "vw", "%" ],
 			"spacingScale": {
 				"operator": "*",
 				"increment": 1.5,
-				"steps": 10,
+				"steps": 7,
 				"mediumStep": 1.5,
 				"unit": "rem"
 			}
diff --git a/lib/experimental/class-wp-rest-block-editor-settings-controller.php b/lib/experimental/class-wp-rest-block-editor-settings-controller.php
index 17e7536b8a2ee7..c0850a8a29f4cf 100644
--- a/lib/experimental/class-wp-rest-block-editor-settings-controller.php
+++ b/lib/experimental/class-wp-rest-block-editor-settings-controller.php
@@ -297,6 +297,11 @@ public function get_item_schema() {
 					'type'        => 'array',
 					'context'     => array( 'post-editor', 'site-editor', 'widgets-editor' ),
 				),
+				'disableCustomSpacingSizes'              => array(
+					'description' => __( 'Disables custom spacing sizes.', 'gutenberg' ),
+					'type'        => 'boolean',
+					'context'     => array( 'post-editor', 'site-editor', 'widgets-editor' ),
+				),
 			),
 		);
 
diff --git a/packages/block-editor/src/components/index.js b/packages/block-editor/src/components/index.js
index 5acd5e44f05dd0..6b7a24887b3423 100644
--- a/packages/block-editor/src/components/index.js
+++ b/packages/block-editor/src/components/index.js
@@ -93,6 +93,7 @@ export { default as URLInputButton } from './url-input/button';
 export { default as URLPopover } from './url-popover';
 export { __experimentalImageURLInputUI } from './url-popover/image-url-input-ui';
 export { default as withColorContext } from './color-palette/with-color-context';
+export { default as __experimentalSpacingSizesControl } from './spacing-sizes-control';
 
 /*
  * Content Related Components
diff --git a/packages/block-editor/src/components/spacing-sizes-control/all-input-control.js b/packages/block-editor/src/components/spacing-sizes-control/all-input-control.js
new file mode 100644
index 00000000000000..d0243b90c56acb
--- /dev/null
+++ b/packages/block-editor/src/components/spacing-sizes-control/all-input-control.js
@@ -0,0 +1,40 @@
+/**
+ * WordPress dependencies
+ */
+import { __experimentalApplyValueToSides as applyValueToSides } from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import SpacingInputControl from './spacing-input-control';
+import { getAllRawValue, isValuesMixed, isValuesDefined } from './utils';
+
+export default function AllInputControl( {
+	onChange,
+	values,
+	sides,
+	spacingSizes,
+	type,
+	minimumCustomValue,
+} ) {
+	const allValue = getAllRawValue( values );
+	const hasValues = isValuesDefined( values );
+	const isMixed = hasValues && isValuesMixed( values );
+
+	const handleOnChange = ( next ) => {
+		const nextValues = applyValueToSides( values, next, sides );
+		onChange( nextValues );
+	};
+
+	return (
+		<SpacingInputControl
+			value={ allValue }
+			onChange={ handleOnChange }
+			side={ 'all' }
+			spacingSizes={ spacingSizes }
+			isMixed={ isMixed }
+			type={ type }
+			minimumCustomValue={ minimumCustomValue }
+		/>
+	);
+}
diff --git a/packages/block-editor/src/components/spacing-sizes-control/axial-input-controls.js b/packages/block-editor/src/components/spacing-sizes-control/axial-input-controls.js
new file mode 100644
index 00000000000000..563b5950186962
--- /dev/null
+++ b/packages/block-editor/src/components/spacing-sizes-control/axial-input-controls.js
@@ -0,0 +1,62 @@
+/**
+ * Internal dependencies
+ */
+import SpacingInputControl from './spacing-input-control';
+import { LABELS } from './utils';
+
+const groupedSides = [ 'vertical', 'horizontal' ];
+
+export default function AxialInputControls( {
+	onChange,
+	values,
+	sides,
+	spacingSizes,
+	type,
+	minimumCustomValue,
+} ) {
+	const createHandleOnChange = ( side ) => ( next ) => {
+		if ( ! onChange ) {
+			return;
+		}
+		const nextValues = { ...values };
+
+		if ( side === 'vertical' ) {
+			nextValues.top = next;
+			nextValues.bottom = next;
+		}
+
+		if ( side === 'horizontal' ) {
+			nextValues.left = next;
+			nextValues.right = next;
+		}
+
+		onChange( nextValues );
+	};
+
+	// Filter sides if custom configuration provided, maintaining default order.
+	const filteredSides = sides?.length
+		? groupedSides.filter( ( side ) => sides.includes( side ) )
+		: groupedSides;
+
+	return (
+		<>
+			{ filteredSides.map( ( side ) => {
+				const axisValue =
+					side === 'vertical' ? values.top : values.left;
+				return (
+					<SpacingInputControl
+						value={ axisValue }
+						onChange={ createHandleOnChange( side ) }
+						label={ LABELS[ side ] }
+						key={ `spacing-sizes-control-${ side }` }
+						withInputField={ false }
+						side={ side }
+						spacingSizes={ spacingSizes }
+						type={ type }
+						minimumCustomValue={ minimumCustomValue }
+					/>
+				);
+			} ) }
+		</>
+	);
+}
diff --git a/packages/block-editor/src/components/spacing-sizes-control/index.js b/packages/block-editor/src/components/spacing-sizes-control/index.js
new file mode 100644
index 00000000000000..0653375a574b9e
--- /dev/null
+++ b/packages/block-editor/src/components/spacing-sizes-control/index.js
@@ -0,0 +1,91 @@
+/**
+ * WordPress dependencies
+ */
+import { useState } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+import { __experimentalText as Text } from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import AllInputControl from './all-input-control';
+import InputControls from './input-controls';
+import AxialInputControls from './axial-input-controls';
+import LinkedButton from './linked-button';
+import { DEFAULT_VALUES, isValuesMixed, isValuesDefined } from './utils';
+import useSetting from '../use-setting';
+
+export default function SpacingSizesControl( {
+	inputProps,
+	onChange,
+	label = __( 'Spacing Control' ),
+	values,
+	sides,
+	splitOnAxis = false,
+	useSelect,
+	minimumCustomValue = 0,
+} ) {
+	const spacingSizes = [
+		{ name: 0, slug: '0', size: 0 },
+		...( useSetting( 'spacing.spacingSizes' ) || [] ),
+	];
+
+	if ( spacingSizes.length > 8 ) {
+		spacingSizes.unshift( {
+			name: __( 'Default' ),
+			slug: 'default',
+			size: undefined,
+		} );
+	}
+
+	const inputValues = values || DEFAULT_VALUES;
+	const hasInitialValue = isValuesDefined( values );
+	const hasOneSide = sides?.length === 1;
+
+	const [ isLinked, setIsLinked ] = useState(
+		! hasInitialValue || ! isValuesMixed( inputValues ) || hasOneSide
+	);
+
+	const toggleLinked = () => {
+		setIsLinked( ! isLinked );
+	};
+
+	const handleOnChange = ( nextValue ) => {
+		const newValues = { ...values, ...nextValue };
+		onChange( newValues );
+	};
+
+	const inputControlProps = {
+		...inputProps,
+		onChange: handleOnChange,
+		isLinked,
+		sides,
+		values: inputValues,
+		spacingSizes,
+		useSelect,
+		type: label,
+		minimumCustomValue,
+	};
+
+	return (
+		<fieldset role="region" className="component-spacing-sizes-control">
+			<Text as="legend">{ label }</Text>
+			{ ! hasOneSide && (
+				<LinkedButton onClick={ toggleLinked } isLinked={ isLinked } />
+			) }
+			{ isLinked && (
+				<AllInputControl
+					aria-label={ label }
+					{ ...inputControlProps }
+				/>
+			) }
+
+			{ ! isLinked && splitOnAxis && (
+				<AxialInputControls { ...inputControlProps } />
+			) }
+			{ ! isLinked && ! splitOnAxis && (
+				<InputControls { ...inputControlProps } />
+			) }
+		</fieldset>
+	);
+}
diff --git a/packages/block-editor/src/components/spacing-sizes-control/input-controls.js b/packages/block-editor/src/components/spacing-sizes-control/input-controls.js
new file mode 100644
index 00000000000000..b8b71c22310b59
--- /dev/null
+++ b/packages/block-editor/src/components/spacing-sizes-control/input-controls.js
@@ -0,0 +1,46 @@
+/**
+ * Internal dependencies
+ */
+import SpacingInputControl from './spacing-input-control';
+import { ALL_SIDES, LABELS } from './utils';
+
+export default function BoxInputControls( {
+	values,
+	sides,
+	onChange,
+	spacingSizes,
+	type,
+	minimumCustomValue,
+} ) {
+	// Filter sides if custom configuration provided, maintaining default order.
+	const filteredSides = sides?.length
+		? ALL_SIDES.filter( ( side ) => sides.includes( side ) )
+		: ALL_SIDES;
+
+	const createHandleOnChange = ( side ) => ( next ) => {
+		const nextValues = { ...values };
+		nextValues[ side ] = next;
+
+		onChange( nextValues );
+	};
+
+	return (
+		<>
+			{ filteredSides.map( ( side ) => {
+				return (
+					<SpacingInputControl
+						value={ values[ side ] }
+						label={ LABELS[ side ] }
+						key={ `spacing-sizes-control-${ side }` }
+						withInputField={ false }
+						side={ side }
+						onChange={ createHandleOnChange( side ) }
+						spacingSizes={ spacingSizes }
+						type={ type }
+						minimumCustomValue={ minimumCustomValue }
+					/>
+				);
+			} ) }
+		</>
+	);
+}
diff --git a/packages/block-editor/src/components/spacing-sizes-control/linked-button.js b/packages/block-editor/src/components/spacing-sizes-control/linked-button.js
new file mode 100644
index 00000000000000..3cdb6e6c1ed1cf
--- /dev/null
+++ b/packages/block-editor/src/components/spacing-sizes-control/linked-button.js
@@ -0,0 +1,25 @@
+/**
+ * WordPress dependencies
+ */
+import { link, linkOff } from '@wordpress/icons';
+import { __ } from '@wordpress/i18n';
+import { Button, Tooltip } from '@wordpress/components';
+
+export default function LinkedButton( { isLinked, onClick } ) {
+	const label = isLinked ? __( 'Unlink Sides' ) : __( 'Link Sides' );
+
+	return (
+		<Tooltip text={ label }>
+			<span className="component-spacing-sizes-control__linked-button">
+				<Button
+					variant={ isLinked ? 'primary' : 'secondary' }
+					isSmall
+					icon={ isLinked ? link : linkOff }
+					iconSize={ 16 }
+					aria-label={ label }
+					onClick={ onClick }
+				/>
+			</span>
+		</Tooltip>
+	);
+}
diff --git a/packages/block-editor/src/components/spacing-sizes-control/spacing-input-control.js b/packages/block-editor/src/components/spacing-sizes-control/spacing-input-control.js
new file mode 100644
index 00000000000000..98f7e5f5650759
--- /dev/null
+++ b/packages/block-editor/src/components/spacing-sizes-control/spacing-input-control.js
@@ -0,0 +1,269 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
+/**
+ * WordPress dependencies
+ */
+import { useState, useMemo } from '@wordpress/element';
+import {
+	Button,
+	RangeControl,
+	CustomSelectControl,
+	__experimentalUnitControl as UnitControl,
+	__experimentalHStack as HStack,
+	__experimentalText as Text,
+	__experimentalUseCustomUnits as useCustomUnits,
+	__experimentalParseQuantityAndUnitFromRawValue as parseQuantityAndUnitFromRawValue,
+} from '@wordpress/components';
+import { __, sprintf } from '@wordpress/i18n';
+import { settings } from '@wordpress/icons';
+
+/**
+ * Internal dependencies
+ */
+import useSetting from '../use-setting';
+import {
+	LABELS,
+	getSliderValueFromPreset,
+	getCustomValueFromPreset,
+	isValueSpacingPreset,
+} from './utils';
+
+export default function SpacingInputControl( {
+	spacingSizes,
+	value,
+	side,
+	onChange,
+	isMixed = false,
+	type,
+	minimumCustomValue,
+} ) {
+	let selectListSizes = spacingSizes;
+	const showRangeControl = spacingSizes.length <= 8;
+
+	const [ showCustomValueControl, setShowCustomValueControl ] = useState(
+		value !== undefined && ! isValueSpacingPreset( value )
+	);
+
+	const units = useCustomUnits( {
+		availableUnits: useSetting( 'spacing.units' ) || [ 'px', 'em', 'rem' ],
+	} );
+
+	let currentValue = null;
+
+	const showCustomValueInSelectList =
+		! showRangeControl &&
+		! showCustomValueControl &&
+		value !== undefined &&
+		( ! isValueSpacingPreset( value ) ||
+			( isValueSpacingPreset( value ) && isMixed ) );
+
+	if ( showCustomValueInSelectList ) {
+		selectListSizes = [
+			...spacingSizes,
+			{
+				name: ! isMixed
+					? // translators: A custom measurement, eg. a number followed by a unit like 12px.
+					  sprintf( __( 'Custom (%s)' ), value )
+					: __( 'Mixed' ),
+				slug: 'custom',
+				size: value,
+			},
+		];
+		currentValue = selectListSizes.length - 1;
+	} else if ( ! isMixed ) {
+		currentValue = ! showCustomValueControl
+			? getSliderValueFromPreset( value, spacingSizes )
+			: getCustomValueFromPreset( value, spacingSizes );
+	}
+
+	const selectedUnit =
+		useMemo(
+			() => parseQuantityAndUnitFromRawValue( currentValue ),
+			[ currentValue ]
+		)[ 1 ] || units[ 0 ].value;
+
+	const setInitialValue = () => {
+		if ( value === undefined ) {
+			onChange( '0' );
+		}
+	};
+
+	const customTooltipContent = ( newValue ) =>
+		value === undefined ? undefined : spacingSizes[ newValue ]?.name;
+
+	const customRangeValue = parseInt( currentValue, 10 );
+
+	const getNewCustomValue = ( newSize ) => {
+		const isNumeric = ! isNaN( parseFloat( newSize ) );
+		const nextValue = isNumeric ? newSize : undefined;
+		return nextValue;
+	};
+
+	const getNewPresetValue = ( newSize, controlType ) => {
+		const size = parseInt( newSize, 10 );
+
+		if ( controlType === 'selectList' ) {
+			if ( size === 0 ) {
+				return undefined;
+			}
+			if ( size === 1 ) {
+				return '0';
+			}
+		} else if ( size === 0 ) {
+			return '0';
+		}
+		return `var:preset|spacing|${ spacingSizes[ newSize ]?.slug }`;
+	};
+
+	const handleCustomValueSliderChange = ( next ) => {
+		onChange( [ next, selectedUnit ].join( '' ) );
+	};
+
+	const allPlaceholder = isMixed ? __( 'Mixed' ) : null;
+
+	const currentValueHint = ! isMixed
+		? customTooltipContent( currentValue )
+		: __( 'Mixed' );
+
+	const options = selectListSizes.map( ( size, index ) => ( {
+		key: index,
+		name: size.name,
+	} ) );
+
+	const marks = spacingSizes.map( ( newValue, index ) => ( {
+		value: index,
+		label: undefined,
+	} ) );
+
+	const ariaLabel = sprintf(
+		// translators: 1: The side of the block being modified (top, bottom, left, etc.). 2. Type of spacing being modified (Padding, margin, etc)
+		__( '%1$s %2$s' ),
+		LABELS[ side ],
+		type?.toLowerCase()
+	);
+
+	const showHint =
+		showRangeControl &&
+		! showCustomValueControl &&
+		currentValueHint !== undefined;
+
+	return (
+		<>
+			{ side !== 'all' && (
+				<HStack className="components-spacing-sizes-control__side-labels">
+					<Text className="components-spacing-sizes-control__side-label">
+						{ LABELS[ side ] }
+					</Text>
+
+					{ showHint && (
+						<Text className="components-spacing-sizes-control__hint-single">
+							{ currentValueHint }
+						</Text>
+					) }
+				</HStack>
+			) }
+			{ side === 'all' && showHint && (
+				<Text className="components-spacing-sizes-control__hint-all">
+					{ currentValueHint }
+				</Text>
+			) }
+
+			<Button
+				label={
+					showCustomValueControl
+						? __( 'Use size preset' )
+						: __( 'Set custom size' )
+				}
+				icon={ settings }
+				onClick={ () => {
+					setShowCustomValueControl( ! showCustomValueControl );
+				} }
+				isPressed={ showCustomValueControl }
+				isSmall
+				className={ classnames( {
+					'components-spacing-sizes-control__custom-toggle-all':
+						side === 'all',
+					'components-spacing-sizes-control__custom-toggle-single':
+						side !== 'all',
+				} ) }
+				iconSize={ 24 }
+			/>
+			{ showCustomValueControl && (
+				<>
+					<UnitControl
+						onChange={ ( newSize ) =>
+							onChange( getNewCustomValue( newSize ) )
+						}
+						value={ currentValue }
+						units={ units }
+						min={ minimumCustomValue }
+						placeholder={ allPlaceholder }
+						disableUnits={ isMixed }
+						label={ ariaLabel }
+						hideLabelFromVision={ true }
+						className="components-spacing-sizes-control__custom-value-input"
+					/>
+
+					<RangeControl
+						value={ customRangeValue }
+						min={ 0 }
+						max={ 100 }
+						withInputField={ false }
+						onChange={ handleCustomValueSliderChange }
+						className="components-spacing-sizes-control__custom-value-range"
+					/>
+				</>
+			) }
+			{ showRangeControl && ! showCustomValueControl && (
+				<RangeControl
+					className="components-spacing-sizes-control__range-control"
+					value={ currentValue }
+					onChange={ ( newSize ) =>
+						onChange( getNewPresetValue( newSize ) )
+					}
+					onMouseDown={ ( event ) => {
+						// If mouse down is near start of range set initial value to 0, which
+						// prevents the user have to drag right then left to get 0 setting.
+						if ( event?.nativeEvent?.offsetX < 35 ) {
+							setInitialValue();
+						}
+					} }
+					withInputField={ false }
+					aria-valuenow={ currentValue }
+					aria-valuetext={ spacingSizes[ currentValue ]?.name }
+					renderTooltipContent={ customTooltipContent }
+					min={ 0 }
+					max={ spacingSizes.length - 1 }
+					marks={ marks }
+					label={ ariaLabel }
+					hideLabelFromVision={ true }
+				/>
+			) }
+			{ ! showRangeControl && ! showCustomValueControl && (
+				<CustomSelectControl
+					className="components-spacing-sizes-control__custom-select-control"
+					value={
+						options.find(
+							( option ) => option.key === currentValue
+						) || '' // passing undefined here causes a downshift controlled/uncontrolled warning
+					}
+					onChange={ ( selection ) => {
+						onChange(
+							getNewPresetValue(
+								selection.selectedItem.key,
+								'selectList'
+							)
+						);
+					} }
+					options={ options }
+					label={ ariaLabel }
+					hideLabelFromVision={ true }
+					__nextUnconstrainedWidth={ true }
+				/>
+			) }
+		</>
+	);
+}
diff --git a/packages/block-editor/src/components/spacing-sizes-control/style.scss b/packages/block-editor/src/components/spacing-sizes-control/style.scss
new file mode 100644
index 00000000000000..c8d6879fe22237
--- /dev/null
+++ b/packages/block-editor/src/components/spacing-sizes-control/style.scss
@@ -0,0 +1,121 @@
+.tools-panel-item-spacing {
+	display: grid;
+	grid-template-columns: auto 1fr auto;
+	grid-row-gap: $grid-unit-05;
+}
+
+.component-spacing-sizes-control {
+	box-sizing: border-box;
+	padding-bottom: 12px;
+	width: 100%;
+	display: contents;
+
+	legend {
+		padding: 0;
+		grid-column: 1 / 1;
+		grid-row: 1 / 1;
+		align-self: center;
+	}
+
+	.components-spacing-sizes-control__side-labels {
+		grid-column: 1 / 1;
+		min-height: 30px;
+		justify-content: left;
+	}
+
+	.components-spacing-sizes-control__hint-single {
+		margin-top: 0;
+		margin-left: 0;
+	}
+
+	.components-spacing-sizes-control__hint-single,
+	.components-spacing-sizes-control__hint-all {
+		color: $gray-700;
+		font-size: 12px;
+	}
+
+	.components-spacing-sizes-control__hint-all {
+		grid-column: 2 / 2;
+		justify-self: left;
+		grid-row: 1 / 1;
+		align-self: center;
+		margin-left: $grid-unit-05;
+	}
+
+	.components-spacing-sizes-control__custom-toggle-all {
+		grid-column: 2 / 2;
+		grid-row: 1 / 1;
+		justify-self: end;
+		margin-right: $grid-unit-05;
+		padding: 0;
+	}
+
+	.components-spacing-sizes-control__custom-toggle-single {
+		grid-column: 3 / 3;
+		justify-self: end;
+	}
+
+	.components-spacing-sizes-control__custom-toggle-all,
+	.components-spacing-sizes-control__custom-toggle-single {
+		&.is-small.has-icon {
+			padding: 0;
+		}
+	}
+
+	.component-spacing-sizes-control__linked-button {
+		grid-column: 3 / 3;
+		grid-row: 1 / 1;
+		justify-self: end;
+	}
+
+	.components-spacing-sizes-control__custom-value-range {
+		grid-column: span 2;
+		margin-left: $grid-unit-10;
+		padding-right: $grid-unit-10;
+		height: 30px;
+	}
+
+	.components-spacing-sizes-control__custom-value-input {
+		width: 124px;
+	}
+
+	.components-spacing-sizes-control__range-control {
+		grid-column: span 3;
+		padding-right: $grid-unit-10;
+		height: 30px;
+	}
+
+	.components-range-control__wrapper {
+		margin-bottom: 0;
+	}
+
+	.components-range-control__mark {
+		height: $grid-unit-05;
+		width: 3px;
+		background-color: #fff;
+		z-index: 1;
+	}
+
+	.components-range-control__marks {
+		margin-top: 17px;
+
+		:first-child {
+			display: none;
+		}
+	}
+
+	[class*="ThumbWrapper-thumbColor"] {
+		z-index: 3;
+	}
+
+	.components-spacing-sizes-control__side-label {
+		margin-right: $grid-unit-05;
+		grid-column: 1 / 1;
+		justify-self: left;
+		font-size: 12px;
+	}
+
+	.components-spacing-sizes-control__custom-select-control {
+		grid-column: span 3;
+	}
+}
diff --git a/packages/block-editor/src/components/spacing-sizes-control/test/utils.js b/packages/block-editor/src/components/spacing-sizes-control/test/utils.js
new file mode 100644
index 00000000000000..a820927a2a0731
--- /dev/null
+++ b/packages/block-editor/src/components/spacing-sizes-control/test/utils.js
@@ -0,0 +1,156 @@
+/**
+ * Internal dependencies
+ */
+import {
+	isValueSpacingPreset,
+	getCustomValueFromPreset,
+	getSpacingPresetCssVar,
+	getSpacingPresetSlug,
+	getSliderValueFromPreset,
+	getAllRawValue,
+	isValuesMixed,
+	isValuesDefined,
+} from '../utils';
+
+describe( 'isValueSpacingPreset', () => {
+	it( 'should return true if value is string in spacing presets var format', () => {
+		expect( isValueSpacingPreset( 'var:preset|spacing|20' ) ).toBe( true );
+	} );
+	it( 'should return false if value is not a string in spacing presets var format', () => {
+		expect( isValueSpacingPreset( '30px' ) ).toBe( false );
+	} );
+} );
+
+describe( 'getCustomValueFromPreset', () => {
+	const spacingSizes = [ { name: 'Small', slug: 20, size: '8px' } ];
+	it( 'should return original value if not a string in spacing presets var format', () => {
+		expect( getCustomValueFromPreset( '20px', spacingSizes ) ).toBe(
+			'20px'
+		);
+	} );
+	it( 'should return value from matching spacingSizes array entry if string in spacing presets var format', () => {
+		expect(
+			getCustomValueFromPreset( 'var:preset|spacing|20', spacingSizes )
+		).toBe( '8px' );
+	} );
+	it( 'should return undefined if no matching preset in spacingSizes array', () => {
+		expect(
+			getCustomValueFromPreset( 'var:preset|spacing|30', spacingSizes )
+		).toBe( undefined );
+	} );
+} );
+
+describe( 'getSpacingPresetCssVar', () => {
+	it( 'should return original value if not a string in spacing presets var format', () => {
+		expect( getSpacingPresetCssVar( '20px' ) ).toBe( '20px' );
+	} );
+	it( 'should return a string in spacing presets css var format with slug from provided value', () => {
+		expect( getSpacingPresetCssVar( 'var:preset|spacing|20' ) ).toBe(
+			'var(--wp--preset--spacing--20)'
+		);
+	} );
+} );
+
+describe( 'getSpacingPresetSlug', () => {
+	it( 'should return original value if 0 or default', () => {
+		expect( getSpacingPresetSlug( '0' ) ).toBe( '0' );
+		expect( getSpacingPresetSlug( 'default' ) ).toBe( 'default' );
+	} );
+	it( 'should return the int value of the slug portion of a valid preset var', () => {
+		expect( getSpacingPresetSlug( 'var:preset|spacing|20' ) ).toBe( 20 );
+	} );
+} );
+
+describe( 'getSliderValueFromPreset', () => {
+	const spacingSizes = [
+		{ name: 'Small', slug: 20, size: '8px' },
+		{ name: 'Large', slug: 30, size: '24px' },
+	];
+	it( 'should return NaN if no matching preset found - NaN makes range control go to start', () => {
+		expect( getSliderValueFromPreset( '10px', spacingSizes ) ).toBe( NaN );
+	} );
+	it( 'should return the int value of the slug portion of a valid preset var', () => {
+		expect(
+			getSliderValueFromPreset( 'var:preset|spacing|30', spacingSizes )
+		).toBe( 1 );
+	} );
+} );
+
+describe( 'getAllRawValue', () => {
+	const customValues = {
+		top: '5px',
+		bottom: '5px',
+		left: '6px',
+		right: '2px',
+	};
+	it( 'should return the most common custom value from the values object', () => {
+		expect( getAllRawValue( customValues ) ).toBe( '5px' );
+	} );
+	const presetValues = {
+		top: 'var:preset|spacing|30',
+		bottom: 'var:preset|spacing|20',
+		left: 'var:preset|spacing|10',
+		right: 'var:preset|spacing|30',
+	};
+	it( 'should return the most common preset value from the values object', () => {
+		expect( getAllRawValue( presetValues ) ).toBe(
+			'var:preset|spacing|30'
+		);
+	} );
+} );
+
+describe( 'isValuesMixed', () => {
+	const unmixedValues = {
+		top: '5px',
+		bottom: '5px',
+		left: '5px',
+		right: '5px',
+	};
+	it( 'should return false if all values are the same', () => {
+		expect( isValuesMixed( unmixedValues ) ).toBe( false );
+	} );
+	const mixedValues = {
+		top: 'var:preset|spacing|30',
+		bottom: 'var:preset|spacing|20',
+		left: 'var:preset|spacing|10',
+		right: 'var:preset|spacing|30',
+	};
+	it( 'should return true if all the values are not the same', () => {
+		expect( isValuesMixed( mixedValues ) ).toBe( true );
+	} );
+	const singleValue = {
+		top: 'var:preset|spacing|30',
+	};
+	it( 'should return true if only one side set', () => {
+		expect( isValuesMixed( singleValue ) ).toBe( true );
+	} );
+	const incompleteValues = {
+		top: 'var:preset|spacing|30',
+		bottom: 'var:preset|spacing|30',
+		left: 'var:preset|spacing|30',
+	};
+	it( 'should return true if all sides not set', () => {
+		expect( isValuesMixed( incompleteValues ) ).toBe( true );
+	} );
+} );
+
+describe( 'isValuesDefined', () => {
+	const undefinedValues = {
+		top: undefined,
+		bottom: undefined,
+		left: undefined,
+		right: undefined,
+	};
+	it( 'should return false if values are not defined', () => {
+		expect( isValuesDefined( undefinedValues ) ).toBe( false );
+	} );
+	const definedValues = {
+		top: 'var:preset|spacing|30',
+		bottom: 'var:preset|spacing|20',
+		left: 'var:preset|spacing|10',
+		right: 'var:preset|spacing|30',
+	};
+	it( 'should return true if all the values are not the same', () => {
+		expect( isValuesDefined( definedValues ) ).toBe( true );
+	} );
+} );
diff --git a/packages/block-editor/src/components/spacing-sizes-control/utils.js b/packages/block-editor/src/components/spacing-sizes-control/utils.js
new file mode 100644
index 00000000000000..12071e3c63dc45
--- /dev/null
+++ b/packages/block-editor/src/components/spacing-sizes-control/utils.js
@@ -0,0 +1,192 @@
+/**
+ * External dependencies
+ */
+import { isEmpty } from 'lodash';
+
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Checks is given value is a spacing preset.
+ *
+ * @param {string} value Value to check
+ *
+ * @return {boolean} Return true if value is string in format var:preset|spacing|.
+ */
+export function isValueSpacingPreset( value ) {
+	if ( ! value?.includes ) {
+		return false;
+	}
+	return value === '0' || value.includes( 'var:preset|spacing|' );
+}
+
+/**
+ * Converts a spacing preset into a custom value.
+ *
+ * @param {string} value        Value to convert
+ * @param {Array}  spacingSizes Array of the current spacing preset objects
+ *
+ * @return {string} Mapping of the spacing preset to its equivalent custom value.
+ */
+export function getCustomValueFromPreset( value, spacingSizes ) {
+	if ( ! isValueSpacingPreset( value ) ) {
+		return value;
+	}
+
+	const slug = getSpacingPresetSlug( value );
+	const spacingSize = spacingSizes.find( ( size ) => size.slug === slug );
+
+	return spacingSize?.size;
+}
+
+/**
+ * Converts a spacing preset into a custom value.
+ *
+ * @param {string} value Value to convert.
+ *
+ * @return {string} CSS var string for given spacing preset value.
+ */
+export function getSpacingPresetCssVar( value ) {
+	if ( ! value ) {
+		return;
+	}
+
+	const slug = value.match( /var:preset\|spacing\|(.+)/ );
+
+	if ( ! slug ) {
+		return value;
+	}
+
+	return `var(--wp--preset--spacing--${ slug[ 1 ] })`;
+}
+
+/**
+ * Returns the slug section of the given spacing preset string.
+ *
+ * @param {string} value Value to extract slug from.
+ *
+ * @return {number} The int value of the slug from given spacing preset.
+ */
+export function getSpacingPresetSlug( value ) {
+	if ( ! value ) {
+		return;
+	}
+
+	if ( value === '0' || value === 'default' ) {
+		return value;
+	}
+
+	const slug = value.match( /var:preset\|spacing\|(.+)/ );
+
+	return slug ? parseInt( slug[ 1 ], 10 ) : undefined;
+}
+
+/**
+ * Converts spacing preset value into a Range component value .
+ *
+ * @param {string} presetValue  Value to convert to Range value.
+ * @param {Array}  spacingSizes Array of current spacing preset value objects.
+ *
+ * @return {number} The int value for use in Range control.
+ */
+export function getSliderValueFromPreset( presetValue, spacingSizes ) {
+	if ( presetValue === undefined ) {
+		return 0;
+	}
+	const slug =
+		parseFloat( presetValue, 10 ) === 0
+			? '0'
+			: getSpacingPresetSlug( presetValue );
+	const sliderValue = spacingSizes.findIndex( ( spacingSize ) => {
+		return spacingSize.slug === slug;
+	} );
+
+	// Returning NaN rather than undefined as undefined makes range control thumb sit in center
+	return sliderValue !== -1 ? sliderValue : NaN;
+}
+
+export const LABELS = {
+	all: __( 'All sides' ),
+	top: __( 'Top' ),
+	bottom: __( 'Bottom' ),
+	left: __( 'Left' ),
+	right: __( 'Right' ),
+	mixed: __( 'Mixed' ),
+	vertical: __( 'Vertical' ),
+	horizontal: __( 'Horizontal' ),
+};
+
+export const DEFAULT_VALUES = {
+	top: undefined,
+	right: undefined,
+	bottom: undefined,
+	left: undefined,
+};
+
+export const ALL_SIDES = [ 'top', 'right', 'bottom', 'left' ];
+
+/**
+ * Gets an items with the most occurrence within an array
+ * https://stackoverflow.com/a/20762713
+ *
+ * @param {Array<any>} arr Array of items to check.
+ * @return {any} The item with the most occurrences.
+ */
+function mode( arr ) {
+	return arr
+		.sort(
+			( a, b ) =>
+				arr.filter( ( v ) => v === a ).length -
+				arr.filter( ( v ) => v === b ).length
+		)
+		.pop();
+}
+
+/**
+ * Gets the 'all' input value from values data.
+ *
+ * @param {Object} values Box spacing values
+ *
+ * @return {string} The most common value from all sides of box.
+ */
+export function getAllRawValue( values = {} ) {
+	return mode( Object.values( values ) );
+}
+
+/**
+ * Checks to determine if values are mixed.
+ *
+ * @param {Object} values Box values.
+ *
+ * @return {boolean} Whether values are mixed.
+ */
+export function isValuesMixed( values = {} ) {
+	return (
+		( Object.values( values ).length >= 1 &&
+			Object.values( values ).length < 4 ) ||
+		new Set( Object.values( values ) ).size > 1
+	);
+}
+
+/**
+ * Checks to determine if values are defined.
+ *
+ * @param {Object} values Box values.
+ *
+ * @return {boolean} Whether values are defined.
+ */
+export function isValuesDefined( values ) {
+	return (
+		values !== undefined &&
+		! isEmpty(
+			Object.values( values ).filter(
+				// Switching units when input is empty causes values only
+				// containing units. This gives false positive on mixed values
+				// unless filtered.
+				( value ) => !! value && /\d/.test( value )
+			)
+		)
+	);
+}
diff --git a/packages/block-editor/src/hooks/dimensions.js b/packages/block-editor/src/hooks/dimensions.js
index e24b39007f6b21..5cdcfbe93175f3 100644
--- a/packages/block-editor/src/hooks/dimensions.js
+++ b/packages/block-editor/src/hooks/dimensions.js
@@ -77,6 +77,7 @@ export function DimensionsPanel( props ) {
 			<InspectorControls __experimentalGroup="dimensions">
 				{ ! isPaddingDisabled && (
 					<ToolsPanelItem
+						className="tools-panel-item-spacing"
 						hasValue={ () => hasPaddingValue( props ) }
 						label={ __( 'Padding' ) }
 						onDeselect={ () => resetPadding( props ) }
diff --git a/packages/block-editor/src/hooks/padding.js b/packages/block-editor/src/hooks/padding.js
index 02a371db0d6a33..22cb8f9e766758 100644
--- a/packages/block-editor/src/hooks/padding.js
+++ b/packages/block-editor/src/hooks/padding.js
@@ -28,7 +28,11 @@ import {
 } from './dimensions';
 import { cleanEmptyObject } from './utils';
 import BlockPopover from '../components/block-popover';
-
+import SpacingSizesControl from '../components/spacing-sizes-control';
+import {
+	getSpacingPresetCssVar,
+	isValueSpacingPreset,
+} from '../components/spacing-sizes-control/utils';
 /**
  * Determines if there is padding support.
  *
@@ -101,6 +105,8 @@ export function PaddingEdit( props ) {
 		setAttributes,
 	} = props;
 
+	const spacingSizes = useSetting( 'spacing.spacingSizes' );
+
 	const units = useCustomUnits( {
 		availableUnits: useSetting( 'spacing.units' ) || [
 			'%',
@@ -135,15 +141,28 @@ export function PaddingEdit( props ) {
 	return Platform.select( {
 		web: (
 			<>
-				<BoxControl
-					values={ style?.spacing?.padding }
-					onChange={ onChange }
-					label={ __( 'Padding' ) }
-					sides={ sides }
-					units={ units }
-					allowReset={ false }
-					splitOnAxis={ splitOnAxis }
-				/>
+				{ ( ! spacingSizes || spacingSizes?.length === 0 ) && (
+					<BoxControl
+						values={ style?.spacing?.padding }
+						onChange={ onChange }
+						label={ __( 'Padding' ) }
+						sides={ sides }
+						units={ units }
+						allowReset={ false }
+						splitOnAxis={ splitOnAxis }
+					/>
+				) }
+				{ spacingSizes?.length > 0 && (
+					<SpacingSizesControl
+						values={ style?.spacing?.padding }
+						onChange={ onChange }
+						label={ __( 'Padding' ) }
+						sides={ sides }
+						units={ units }
+						allowReset={ false }
+						splitOnAxis={ splitOnAxis }
+					/>
+				) }
 			</>
 		),
 		native: null,
@@ -154,10 +173,18 @@ export function PaddingVisualizer( { clientId, attributes } ) {
 	const padding = attributes?.style?.spacing?.padding;
 	const style = useMemo( () => {
 		return {
-			borderTopWidth: padding?.top ?? 0,
-			borderRightWidth: padding?.right ?? 0,
-			borderBottomWidth: padding?.bottom ?? 0,
-			borderLeftWidth: padding?.left ?? 0,
+			borderTopWidth: isValueSpacingPreset( padding?.top )
+				? getSpacingPresetCssVar( padding?.top )
+				: padding?.top,
+			borderRightWidth: isValueSpacingPreset( padding?.right )
+				? getSpacingPresetCssVar( padding?.right )
+				: padding?.right,
+			borderBottomWidth: isValueSpacingPreset( padding?.bottom )
+				? getSpacingPresetCssVar( padding?.bottom )
+				: padding?.bottom,
+			borderLeftWidth: isValueSpacingPreset( padding?.left )
+				? getSpacingPresetCssVar( padding?.left )
+				: padding?.left,
 		};
 	}, [ padding ] );
 
diff --git a/packages/block-editor/src/style.scss b/packages/block-editor/src/style.scss
index 6295015ca6387d..614f611cec2aff 100644
--- a/packages/block-editor/src/style.scss
+++ b/packages/block-editor/src/style.scss
@@ -63,5 +63,6 @@
 @import "./components/block-toolbar/style.scss";
 @import "./components/inserter/style.scss";
 @import "./components/preview-options/style.scss";
+@import "./components/spacing-sizes-control/style.scss";
 
 @include wordpress-admin-schemes();
diff --git a/packages/blocks/src/api/constants.js b/packages/blocks/src/api/constants.js
index 22205777d14e4b..bb182d66696766 100644
--- a/packages/blocks/src/api/constants.js
+++ b/packages/blocks/src/api/constants.js
@@ -232,4 +232,5 @@ export const __EXPERIMENTAL_PATHS_WITH_MERGE = {
 	'color.palette': true,
 	'typography.fontFamilies': true,
 	'typography.fontSizes': true,
+	'spacing.spacingSizes': true,
 };
diff --git a/packages/edit-site/src/components/global-styles/dimensions-panel.js b/packages/edit-site/src/components/global-styles/dimensions-panel.js
index 76ef759886c507..19d50b37d55f85 100644
--- a/packages/edit-site/src/components/global-styles/dimensions-panel.js
+++ b/packages/edit-site/src/components/global-styles/dimensions-panel.js
@@ -11,7 +11,10 @@ import {
 	__experimentalUseCustomUnits as useCustomUnits,
 	__experimentalView as View,
 } from '@wordpress/components';
-import { __experimentalUseCustomSides as useCustomSides } from '@wordpress/block-editor';
+import {
+	__experimentalUseCustomSides as useCustomSides,
+	__experimentalSpacingSizesControl as SpacingSizesControl,
+} from '@wordpress/block-editor';
 import { Icon, positionCenter, stretchWide } from '@wordpress/icons';
 
 /**
@@ -342,8 +345,9 @@ export default function DimensionsPanel( { name } ) {
 					label={ __( 'Padding' ) }
 					onDeselect={ resetPaddingValue }
 					isShownByDefault={ true }
+					className="tools-panel-item-spacing"
 				>
-					<BoxControl
+					<SpacingSizesControl
 						values={ paddingValues }
 						onChange={ setPaddingValues }
 						label={ __( 'Padding' ) }
diff --git a/packages/edit-site/src/components/global-styles/utils.js b/packages/edit-site/src/components/global-styles/utils.js
index b7b5c5c96a9a15..2e0fca1413a47d 100644
--- a/packages/edit-site/src/components/global-styles/utils.js
+++ b/packages/edit-site/src/components/global-styles/utils.js
@@ -77,6 +77,13 @@ export const PRESET_METADATA = [
 			{ classSuffix: 'font-family', propertyName: 'font-family' },
 		],
 	},
+	{
+		path: [ 'spacing', 'spacingSizes' ],
+		valueKey: 'spacingSizes',
+		cssVarInfix: 'spacing',
+		valueFunc: ( { size } ) => size,
+		classes: [],
+	},
 ];
 
 const STYLE_PATH_TO_CSS_VAR_INFIX = {
diff --git a/packages/editor/src/components/provider/use-block-editor-settings.js b/packages/editor/src/components/provider/use-block-editor-settings.js
index 2d8b1b4547021a..831abbb5887625 100644
--- a/packages/editor/src/components/provider/use-block-editor-settings.js
+++ b/packages/editor/src/components/provider/use-block-editor-settings.js
@@ -128,6 +128,7 @@ function useBlockEditorSettings( settings, hasTemplate ) {
 				'colors',
 				'disableCustomColors',
 				'disableCustomFontSizes',
+				'disableCustomSpacingSizes',
 				'disableCustomGradients',
 				'disableLayoutStyles',
 				'enableCustomLineHeight',