Cover: Add Padding Styles

docs/manifest.json

@@ -665,6 +665,12 @@
 		"markdown_source": "../packages/components/src/base-control/README.md",
 		"parent": "components"
 	},
+	{
+		"title": "BoxControl",
+		"slug": "box-control",
+		"markdown_source": "../packages/components/src/box-control/README.md",
+		"parent": "components"
+	},
 	{
 		"title": "ButtonGroup",
 		"slug": "button-group",
@@ -773,6 +779,12 @@
 		"markdown_source": "../packages/components/src/external-link/README.md",
 		"parent": "components"
 	},
+	{
+		"title": "Flex",
+		"slug": "flex",
+		"markdown_source": "../packages/components/src/flex/README.md",
+		"parent": "components"
+	},
 	{
 		"title": "FocalPointPicker",
 		"slug": "focal-point-picker",

lib/client-assets.php

@@ -689,6 +689,20 @@ function gutenberg_extend_settings_custom_units( $settings ) {
 }
 add_filter( 'block_editor_settings', 'gutenberg_extend_settings_custom_units' );
 
+/**
+ * Extends block editor settings to determine whether to use custom spacing controls.
+ * Currently experimental.
+ *
+ * @param array $settings Default editor settings.
+ *
+ * @return array Filtered editor settings.
+ */
+function gutenberg_extend_settings_custom_spacing( $settings ) {
+	$settings['__experimentalEnableCustomSpacing'] = get_theme_support( 'experimental-custom-spacing' );
+	return $settings;
+}
+add_filter( 'block_editor_settings', 'gutenberg_extend_settings_custom_spacing' );
+
 /*
  * Register default patterns if not registered in Core already.
  */

packages/block-editor/src/components/spacing-panel-control/index.js

@@ -0,0 +1,31 @@
+/**
+ * External dependencies
+ */
+import { get } from 'lodash';
+
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { PanelBody } from '@wordpress/components';
+import { useSelect } from '@wordpress/data';
+
+/**
+ * Internal dependencies
+ */
+import InspectorControls from '../inspector-controls';
+
+export default function SpacingPanelControl( { children, ...props } ) {
+	const isSpacingEnabled = useSelect( ( select ) => {
+		const { getSettings } = select( 'core/block-editor' );
+		return get( getSettings(), '__experimentalEnableCustomSpacing' );
+	} );
+
+	if ( ! isSpacingEnabled ) return null;
+
+	return (
+		<InspectorControls { ...props }>
+			<PanelBody title={ __( 'Spacing' ) }>{ children }</PanelBody>
+		</InspectorControls>
+	);
+}

packages/block-editor/src/components/unit-control/index.js

@@ -8,9 +8,34 @@ import { __experimentalUnitControl as BaseUnitControl } from '@wordpress/compone
  */
 import useEditorFeature from '../use-editor-feature';
 
-const { __defaultUnits } = BaseUnitControl;
-
 export default function UnitControl( { units: unitsProp, ...props } ) {
+	const units = useCustomUnits( unitsProp );
+
+	return <BaseUnitControl units={ units } { ...props } />;
+}
+
+/**
+ * Filters available units based on values defined by settings.
+ *
+ * @param {Array} settings Collection of preferred units.
+ * @param {Array} units Collection of available units.
+ *
+ * @return {Array} Filtered units based on settings.
+ */
+function filterUnitsWithSettings( settings = [], units = [] ) {
+	return units.filter( ( unit ) => {
+		return settings.includes( unit.value );
+	} );
+}
+
+/**
+ * Custom hook to retrieve and consolidate units setting from add_theme_support().
+ *
+ * @param {Array} unitsProp Collection of available units.
+ *
+ * @return {Array} Filtered units based on settings.
+ */
+export function useCustomUnits( unitsProp ) {
 	const settings = useEditorFeature( '__experimentalDisableCustomUnits' );
 	const isDisabled = !! settings;
 
@@ -32,22 +57,5 @@ export default function UnitControl( { units: unitsProp, ...props } ) {
 		units = isDisabled ? false : unitsProp;
 	}
 
-	return <BaseUnitControl units={ units } { ...props } />;
-}
-
-// Hoisting statics from the BaseUnitControl
-UnitControl.__defaultUnits = __defaultUnits;
-
-/**
- * Filters available units based on values defined by settings.
- *
- * @param {Array} settings Collection of preferred units.
- * @param {Array} units Collection of available units.
- *
- * @return {Array} Filtered units based on settings.
- */
-function filterUnitsWithSettings( settings = [], units = [] ) {
-	return units.filter( ( unit ) => {
-		return settings.includes( unit.value );
-	} );
+	return units;
 }

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

@@ -0,0 +1,68 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { Platform } from '@wordpress/element';
+import { hasBlockSupport } from '@wordpress/blocks';
+import { __experimentalBoxControl as BoxControl } from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import { cleanEmptyObject } from './utils';
+import { useCustomUnits } from '../components/unit-control';
+
+export const PADDING_SUPPORT_KEY = '__experimentalPadding';
+
+/**
+ * Inspector control panel containing the line height related configuration
+ *
+ * @param {Object} props
+ *
+ * @return {WPElement} Line height edit element.
+ */
+export function PaddingEdit( props ) {
+	const {
+		name: blockName,
+		attributes: { style },
+		setAttributes,
+	} = props;
+
+	const units = useCustomUnits();
+
+	if ( ! hasBlockSupport( blockName, PADDING_SUPPORT_KEY ) ) {
+		return null;
+	}
+
+	const onChange = ( next ) => {
+		const newStyle = {
+			...style,
+			padding: next,
+		};
+
+		setAttributes( {
+			style: cleanEmptyObject( newStyle ),
+		} );
+	};
+
+	return Platform.select( {
+		web: (
+			<>
+				<BoxControl
+					values={ style?.padding }
+					onChange={ onChange }
+					label={ __( 'Padding' ) }
+					units={ units }
+				/>
+			</>
+		),
+		native: null,
+	} );
+}
+
+export const paddingStyleMappings = {
+	paddingTop: [ 'padding', 'top' ],
+	paddingRight: [ 'padding', 'right' ],
+	paddingBottom: [ 'padding', 'bottom' ],
+	paddingLeft: [ 'padding', 'left' ],
+};

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

@@ -17,14 +17,21 @@ import { Platform } from '@wordpress/element';
  * Internal dependencies
  */
 import InspectorControls from '../components/inspector-controls';
+import SpacingPanelControl from '../components/spacing-panel-control';
 import { COLOR_SUPPORT_KEY, ColorEdit } from './color';
 import { LINE_HEIGHT_SUPPORT_KEY, LineHeightEdit } from './line-height';
 import { FONT_SIZE_SUPPORT_KEY, FontSizeEdit } from './font-size';
+import {
+	PADDING_SUPPORT_KEY,
+	PaddingEdit,
+	paddingStyleMappings,
+} from './padding';
 
 const styleSupportKeys = [
 	COLOR_SUPPORT_KEY,
 	LINE_HEIGHT_SUPPORT_KEY,
 	FONT_SIZE_SUPPORT_KEY,
+	PADDING_SUPPORT_KEY,
 ];
 
 const typographySupportKeys = [
@@ -43,6 +50,7 @@ const hasStyleSupport = ( blockType ) =>
  */
 export function getInlineStyles( styles = {} ) {
 	const mappings = {
+		...paddingStyleMappings,
 		lineHeight: [ 'typography', 'lineHeight' ],
 		fontSize: [ 'typography', 'fontSize' ],
 		background: [ 'color', 'gradient' ],
@@ -144,6 +152,11 @@ export const withBlockControls = createHigherOrderComponent(
 			hasBlockSupport( blockName, key )
 		);
 
+		const hasPaddingSupport = hasBlockSupport(
+			blockName,
+			PADDING_SUPPORT_KEY
+		);
+
 		return [
 			Platform.OS === 'web' && hasTypographySupport && (
 				<InspectorControls key="typography">
@@ -155,6 +168,11 @@ export const withBlockControls = createHigherOrderComponent(
 			),
 			<ColorEdit key="colors" { ...props } />,
 			<BlockEdit key="edit" { ...props } />,
+			hasPaddingSupport && (
+				<SpacingPanelControl key="spacing">
+					<PaddingEdit { ...props } />
+				</SpacingPanelControl>
+			),
 		];
 	},
 	'withToolbarControls'

packages/block-library/src/cover/block.json

@@ -48,6 +48,7 @@
 	"supports": {
 		"align": true,
 		"html": false,
-		"lightBlockWrapper": true
+		"lightBlockWrapper": true,
+		"__experimentalPadding": true
 	}
 }

packages/block-library/src/cover/edit.js

@@ -19,6 +19,7 @@ import {
 	ResizableBox,
 	ToggleControl,
 	withNotices,
+	__experimentalBoxControl as BoxControl,
 } from '@wordpress/components';
 import { compose, withInstanceId, useInstanceId } from '@wordpress/compose';
 import {
@@ -70,6 +71,8 @@ const INNER_BLOCKS_TEMPLATE = [
 	],
 ];
 
+const { __Visualizer: BoxControlVisualizer } = BoxControl;
+
 function retrieveFastAverageColor() {
 	if ( ! retrieveFastAverageColor.fastAverageColor ) {
 		retrieveFastAverageColor.fastAverageColor = new FastAverageColor();
@@ -244,6 +247,7 @@ function CoverEdit( {
 		hasParallax,
 		minHeight,
 		minHeightUnit,
+		style: styleAttribute,
 		url,
 	} = attributes;
 	const {
@@ -471,6 +475,7 @@ function CoverEdit( {
 		<>
 			{ controls }
 			<Block.div className={ classes } data-url={ url } style={ style }>
+				<BoxControlVisualizer values={ styleAttribute?.padding } />
 				<ResizableCover
 					className="block-library-cover__resize-container"
 					onResizeStart={ () => {