diff --git a/lib/experimental-default-theme.json b/lib/experimental-default-theme.json
index 1d1cfdabce390f..956452f20a64dc 100644
--- a/lib/experimental-default-theme.json
+++ b/lib/experimental-default-theme.json
@@ -122,6 +122,11 @@
 					"slug": "vivid-cyan-blue-to-vivid-purple",
 					"value": "linear-gradient(135deg,rgba(6,147,227,1) 0%,rgb(155,81,224) 100%)"
 				}
+			],
+			"padding": [
+				{ "slug": "small", "value": 4 },
+				{ "slug": "regular", "value": 16 },
+				{ "slug": "large", "value": 32 }
 			]
 		},
 		"features": {
diff --git a/packages/block-editor/README.md b/packages/block-editor/README.md
index 86371a46848c6b..5815ccaceab868 100644
--- a/packages/block-editor/README.md
+++ b/packages/block-editor/README.md
@@ -478,6 +478,7 @@ _Properties_
 -   _colors_ `Array`: Palette colors
 -   _disableCustomColors_ `boolean`: Whether or not the custom colors are disabled
 -   _fontSizes_ `Array`: Available font sizes
+-   _padding_ `Array`: Available padding values
 -   _disableCustomFontSizes_ `boolean`: Whether or not the custom font sizes are disabled
 -   _imageSizes_ `Array`: Available image sizes
 -   _maxWidth_ `number`: Max width to constraint resizing
diff --git a/packages/block-editor/src/hooks/padding.js b/packages/block-editor/src/hooks/padding.js
index e042a2de83cac4..ecde2be4af7264 100644
--- a/packages/block-editor/src/hooks/padding.js
+++ b/packages/block-editor/src/hooks/padding.js
@@ -11,6 +11,7 @@ import { __experimentalBoxControl as BoxControl } from '@wordpress/components';
  */
 import { cleanEmptyObject } from './utils';
 import { useCustomUnits } from '../components/unit-control';
+import { useSelect } from '@wordpress/data';
 
 export const PADDING_SUPPORT_KEY = '__experimentalPadding';
 
@@ -29,6 +30,9 @@ export function PaddingEdit( props ) {
 	} = props;
 
 	const units = useCustomUnits();
+	const { padding } = useSelect( ( select ) =>
+		select( 'core/block-editor' ).getSettings()
+	);
 
 	if ( ! hasBlockSupport( blockName, PADDING_SUPPORT_KEY ) ) {
 		return null;
@@ -64,6 +68,7 @@ export function PaddingEdit( props ) {
 		web: (
 			<>
 				<BoxControl
+					presetValues={ padding }
 					values={ style?.spacing?.padding }
 					onChange={ onChange }
 					onChangeShowVisualizer={ onChangeShowVisualizer }
diff --git a/packages/block-editor/src/store/defaults.js b/packages/block-editor/src/store/defaults.js
index 42d043c24a1356..95e41908daf71f 100644
--- a/packages/block-editor/src/store/defaults.js
+++ b/packages/block-editor/src/store/defaults.js
@@ -16,6 +16,7 @@ export const PREFERENCES_DEFAULTS = {
  * @property {Array} colors Palette colors
  * @property {boolean} disableCustomColors Whether or not the custom colors are disabled
  * @property {Array} fontSizes Available font sizes
+ * @property {Array} padding Available padding values
  * @property {boolean} disableCustomFontSizes Whether or not the custom font sizes are disabled
  * @property {Array} imageSizes Available image sizes
  * @property {number} maxWidth Max width to constraint resizing
@@ -131,6 +132,12 @@ export const SETTINGS_DEFAULTS = {
 		{ slug: 'full', name: __( 'Full Size' ) },
 	],
 
+	padding: [
+		{ slug: 'small', name: __( 'Small' ), value: 4 },
+		{ slug: 'regular', name: __( 'Regular' ), value: 16 },
+		{ slug: 'large', name: __( 'Large' ), value: 32 },
+	],
+
 	// This is current max width of the block inner area
 	// It's used to constraint image resizing and this value could be overridden later by themes
 	maxWidth: 580,
diff --git a/packages/components/src/box-control/index.js b/packages/components/src/box-control/index.js
index 89235162c745d9..d4df57434cb103 100644
--- a/packages/components/src/box-control/index.js
+++ b/packages/components/src/box-control/index.js
@@ -14,7 +14,8 @@ import { __ } from '@wordpress/i18n';
  * Internal dependencies
  */
 import Button from '../button';
-import { FlexItem, FlexBlock } from '../flex';
+import CustomSelectControl from '../custom-select-control';
+import { FlexItem } from '../flex';
 import AllInputControl from './all-input-control';
 import InputControls from './input-controls';
 import BoxControlIcon from './icon';
@@ -44,6 +45,19 @@ function useUniqueId( idProp ) {
 
 	return idProp || id;
 }
+
+const DEFAULT_OPTION = {
+	key: 'default',
+	name: __( 'Default' ),
+	value: undefined,
+};
+
+const CUSTOM_OPTION = {
+	key: 'custom',
+	name: __( 'Custom' ),
+	value: 'custom',
+};
+
 export default function BoxControl( {
 	id: idProp,
 	inputProps = defaultInputProps,
@@ -52,6 +66,7 @@ export default function BoxControl( {
 	label = __( 'Box Control' ),
 	values: valuesProp,
 	units,
+	presetValues,
 } ) {
 	const [ values, setValues ] = useControlledState( valuesProp );
 	const inputValues = values || DEFAULT_VALUES;
@@ -98,6 +113,18 @@ export default function BoxControl( {
 		setIsDirty( false );
 	};
 
+	const handleOnChangePresets = ( { selectedItem: { value } } ) => {
+		const nextValues = {
+			top: value,
+			right: value,
+			bottom: value,
+			left: value,
+		};
+		onChange( nextValues );
+		setValues( nextValues );
+		setIsDirty( true );
+	};
+
 	const inputControlProps = {
 		...inputProps,
 		onChange: handleOnChange,
@@ -109,6 +136,28 @@ export default function BoxControl( {
 		values: inputValues,
 	};
 
+	const presetUnit = units ? units : 'px';
+	const options = [
+		DEFAULT_OPTION,
+		...presetValues.map( ( presetValue ) => ( {
+			key: presetValue.slug,
+			name: presetValue.name,
+			value: presetValue.value + presetUnit,
+		} ) ),
+		CUSTOM_OPTION,
+	];
+	let selectedOption = DEFAULT_OPTION;
+	if (
+		!! inputValues?.top &&
+		inputValues?.top === inputValues?.right &&
+		inputValues?.top === inputValues?.bottom &&
+		inputValues?.top === inputValues?.left
+	) {
+		selectedOption =
+			options.find( ( option ) => option.value === inputValues.top ) ||
+			CUSTOM_OPTION;
+	}
+
 	return (
 		<Root id={ id } role="region" aria-labelledby={ headingId }>
 			<Header className="component-box-control__header">
@@ -120,6 +169,25 @@ export default function BoxControl( {
 						{ label }
 					</Text>
 				</FlexItem>
+				<FlexItem>
+					<BoxControlIcon side={ side } />
+				</FlexItem>
+			</Header>
+			<HeaderControlWrapper className="component-box-control__header-control-wrapper">
+				<FlexItem>
+					<CustomSelectControl
+						className={ 'component-box-control__preset' }
+						options={ options }
+						value={ selectedOption }
+						onChange={ handleOnChangePresets }
+					/>
+				</FlexItem>
+				<FlexItem>
+					<AllInputControl
+						{ ...inputControlProps }
+						disabled={ ! isLinked }
+					/>
+				</FlexItem>
 				<FlexItem>
 					<Button
 						className="component-box-control__reset-button"
@@ -131,16 +199,8 @@ export default function BoxControl( {
 						{ __( 'Reset' ) }
 					</Button>
 				</FlexItem>
-			</Header>
-			<HeaderControlWrapper className="component-box-control__header-control-wrapper">
-				<FlexItem>
-					<BoxControlIcon side={ side } />
-				</FlexItem>
-				{ isLinked && (
-					<FlexBlock>
-						<AllInputControl { ...inputControlProps } />
-					</FlexBlock>
-				) }
+			</HeaderControlWrapper>
+			<HeaderControlWrapper>
 				<FlexItem>
 					<LinkedButton
 						onClick={ toggleLinked }
diff --git a/packages/editor/src/components/provider/index.js b/packages/editor/src/components/provider/index.js
index e9fbe2863a6651..33e97f1ec8f582 100644
--- a/packages/editor/src/components/provider/index.js
+++ b/packages/editor/src/components/provider/index.js
@@ -145,6 +145,7 @@ class EditorProvider extends Component {
 				'isRTL',
 				'maxWidth',
 				'onUpdateDefaultBlockStyles',
+				'padding',
 				'styles',
 				'template',
 				'templateLock',