Add spacing panel to global styles sidebar

packages/edit-site/src/components/sidebar/global-styles-sidebar.js

@@ -24,6 +24,7 @@ import {
 	useHasTypographyPanel,
 } from './typography-panel';
 import { default as ColorPanel, useHasColorPanel } from './color-panel';
+import { default as SpacingPanel, useHasSpacingPanel } from './spacing-panel';
 
 function GlobalStylesPanel( {
 	hasWrapper = true,
@@ -35,8 +36,9 @@ function GlobalStylesPanel( {
 } ) {
 	const hasColorPanel = useHasColorPanel( context );
 	const hasTypographyPanel = useHasTypographyPanel( context );
+	const hasSpacingPanel = useHasSpacingPanel( context );
 
-	if ( ! hasColorPanel && ! hasTypographyPanel ) {
+	if ( ! hasColorPanel && ! hasTypographyPanel && ! hasSpacingPanel ) {
 		return null;
 	}
 
@@ -58,6 +60,13 @@ function GlobalStylesPanel( {
 					setSetting={ setSetting }
 				/>
 			) }
+			{ hasSpacingPanel && (
+				<SpacingPanel
+					context={ context }
+					getStyleProperty={ getStyleProperty }
+					setStyleProperty={ setStyleProperty }
+				/>
+			) }
 		</>
 	);
 	if ( ! hasWrapper ) {

packages/edit-site/src/components/sidebar/spacing-panel.js

@@ -0,0 +1,63 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import {
+	__experimentalBoxControl as BoxControl,
+	PanelBody,
+} from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import { useEditorFeature } from '../editor/utils';
+
+export function useHasSpacingPanel( { supports } ) {
+	return supports.includes( 'paddingBottom' );
+}
+
+function filterUnitsWithSettings( settings = [], units = [] ) {
+	return units.filter( ( unit ) => {
+		return settings.includes( unit.value );
+	} );
+}
+
+function useCustomUnits( units ) {
+	const availableUnits = useEditorFeature( 'spacing.units' );
+	const usedUnits = filterUnitsWithSettings(
+		! availableUnits ? [] : availableUnits,
+		units
+	);
+
+	return usedUnits.length === 0 ? false : usedUnits;
+}
+
+export default function SpacingPanel( {
+	context: { name },
+	getStyleProperty,
+	setStyleProperty,
+} ) {
+	const units = useCustomUnits();
+	const paddingValues = {
+		top: getStyleProperty( name, 'paddingTop' ),
+		right: getStyleProperty( name, 'paddingRight' ),
+		bottom: getStyleProperty( name, 'paddingBottom' ),
+		left: getStyleProperty( name, 'paddingLeft' ),
+	};
+	const setPaddingValues = ( { top, right, bottom, left } ) => {
+		setStyleProperty( name, 'paddingTop', top );
+		setStyleProperty( name, 'paddingRight', right );
+		setStyleProperty( name, 'paddingBottom', bottom );
+		setStyleProperty( name, 'paddingLeft', left );
+	};
+	return (
+		<PanelBody title={ __( 'Spacing' ) }>
+			<BoxControl
+				values={ paddingValues }
+				onChange={ setPaddingValues }
+				label={ __( 'Padding' ) }
+				units={ units }
+			/>
+		</PanelBody>
+	);
+}