Add margin support to Separator block

packages/block-editor/src/components/inner-blocks/index.js

@@ -10,6 +10,7 @@ import { useViewportMatch } from '@wordpress/compose';
 import { forwardRef, useRef } from '@wordpress/element';
 import { useSelect } from '@wordpress/data';
 import { getBlockType, withBlockContentContext } from '@wordpress/blocks';
+import { __experimentalBoxControl as BoxControl } from '@wordpress/components';
 
 /**
  * Internal dependencies
@@ -29,6 +30,8 @@ import { useBlockEditContext } from '../block-edit/context';
 import useBlockSync from '../provider/use-block-sync';
 import { defaultLayout, LayoutProvider } from './layout';
 
+const { __Visualizer: BoxControlVisualizer } = BoxControl;
+
 /**
  * InnerBlocks is a component which allows a single block to have multiple blocks
  * as children. The UncontrolledInnerBlocks component is used whenever the inner
@@ -179,11 +182,17 @@ export function useInnerBlocksProps( props = {}, options = {} ) {
 			}
 		),
 		children: (
-			<InnerBlocks
-				{ ...options }
-				clientId={ clientId }
-				wrapperRef={ ref }
-			/>
+			<>
+				<InnerBlocks
+					{ ...options }
+					clientId={ clientId }
+					wrapperRef={ ref }
+				/>
+				<BoxControlVisualizer
+					values={ props.style?.spacing }
+					showValues={ props.style?.visualizers }
+				/>
+			</>
 		),
 	};
 }

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

@@ -0,0 +1,90 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { Platform } from '@wordpress/element';
+import { getBlockSupport } from '@wordpress/blocks';
+import { __experimentalBoxControl as BoxControl } from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import { cleanEmptyObject } from './utils';
+import { SPACING_SUPPORT_KEY } from './padding';
+import useEditorFeature from '../components/use-editor-feature';
+
+const hasMarginSupport = ( blockName ) => {
+	const spacingSupport = getBlockSupport( blockName, SPACING_SUPPORT_KEY );
+	return spacingSupport && spacingSupport.margin;
+};
+
+/**
+ * Inspector control panel containing the line height related configuration
+ *
+ * @param {Object} props
+ *
+ * @return {WPElement} Line height edit element.
+ */
+export function MarginEdit( props ) {
+	const {
+		name: blockName,
+		attributes: { style },
+		setAttributes,
+	} = props;
+
+	const customUnits = useEditorFeature( 'spacing.units' );
+	const units = customUnits?.map( ( unit ) => ( {
+		value: unit,
+		label: unit,
+	} ) );
+
+	if ( ! hasMarginSupport( blockName ) ) {
+		return null;
+	}
+
+	const onChange = ( next ) => {
+		const spacing = style && style.spacing;
+		const newStyle = {
+			...style,
+			spacing: {
+				...spacing,
+				margin: next,
+			},
+		};
+
+		setAttributes( {
+			style: cleanEmptyObject( newStyle ),
+		} );
+	};
+
+	const onChangeShowVisualizer = ( next ) => {
+		const spacing = style && style.visualizers;
+		const newStyle = {
+			...style,
+			visualizers: {
+				...spacing,
+				margin: next,
+			},
+		};
+
+		setAttributes( {
+			style: cleanEmptyObject( newStyle ),
+		} );
+	};
+
+	return Platform.select( {
+		web: (
+			<>
+				<BoxControl
+					values={ style?.spacing?.margin }
+					onChange={ onChange }
+					onChangeShowVisualizer={ onChangeShowVisualizer }
+					label={ __( 'Margin' ) }
+					type="margin"
+					units={ units }
+				/>
+			</>
+		),
+		native: null,
+	} );
+}

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

@@ -16,7 +16,7 @@ export const SPACING_SUPPORT_KEY = 'spacing';
 
 const hasPaddingSupport = ( blockName ) => {
 	const spacingSupport = getBlockSupport( blockName, SPACING_SUPPORT_KEY );
-	return spacingSupport && spacingSupport.padding !== false;
+	return spacingSupport && spacingSupport.padding;
 };
 
 /**
@@ -32,7 +32,6 @@ export function PaddingEdit( props ) {
 		attributes: { style },
 		setAttributes,
 	} = props;
-
 	const customUnits = useEditorFeature( 'spacing.units' );
 	const units = customUnits?.map( ( unit ) => ( {
 		value: unit,
@@ -44,9 +43,11 @@ export function PaddingEdit( props ) {
 	}
 
 	const onChange = ( next ) => {
+		const spacing = style && style.spacing;
 		const newStyle = {
 			...style,
 			spacing: {
+				...spacing,
 				padding: next,
 			},
 		};
@@ -57,9 +58,11 @@ export function PaddingEdit( props ) {
 	};
 
 	const onChangeShowVisualizer = ( next ) => {
+		const spacing = style && style.visualizers;
 		const newStyle = {
 			...style,
 			visualizers: {
+				...spacing,
 				padding: next,
 			},
 		};
@@ -77,6 +80,7 @@ export function PaddingEdit( props ) {
 					onChange={ onChange }
 					onChangeShowVisualizer={ onChangeShowVisualizer }
 					label={ __( 'Padding' ) }
+					type="padding"
 					units={ units }
 				/>
 			</>

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

@@ -20,6 +20,7 @@ import { BORDER_SUPPORT_KEY, BorderPanel } from './border';
 import { COLOR_SUPPORT_KEY, ColorEdit } from './color';
 import { TypographyPanel, TYPOGRAPHY_SUPPORT_KEYS } from './typography';
 import { SPACING_SUPPORT_KEY, PaddingEdit } from './padding';
+import { MarginEdit } from './margin';
 import SpacingPanelControl from '../components/spacing-panel-control';
 
 const styleSupportKeys = [
@@ -167,6 +168,7 @@ export const withBlockControls = createHigherOrderComponent(
 			hasSpacingSupport && (
 				<SpacingPanelControl key="spacing">
 					<PaddingEdit { ...props } />
+					<MarginEdit { ...props } />
 				</SpacingPanelControl>
 			),
 		];

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

@@ -19,6 +19,10 @@
 	"supports": {
 		"anchor": true,
 		"reusable": false,
-		"html": false
+		"html": false,
+		"spacing": {
+			"padding": true,
+			"margin": true
+		}
 	}
 }

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

@@ -27,7 +27,7 @@ import { __ } from '@wordpress/i18n';
 import { CSS_UNITS } from '../columns/utils';
 
 function ColumnEdit( {
-	attributes: { verticalAlignment, width, templateLock = false },
+	attributes: { verticalAlignment, width, style, templateLock = false },
 	setAttributes,
 	clientId,
 } ) {
@@ -63,7 +63,9 @@ function ColumnEdit( {
 	const widthWithUnit = Number.isFinite( width ) ? width + '%' : width;
 	const blockProps = useBlockProps( {
 		className: classes,
-		style: widthWithUnit ? { flexBasis: widthWithUnit } : undefined,
+		style: widthWithUnit
+			? { flexBasis: widthWithUnit, ...style }
+			: { ...style },
 	} );
 	const innerBlocksProps = useInnerBlocksProps( blockProps, {
 		templateLock,

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

@@ -17,6 +17,10 @@
 		"color": {
 			"gradients": true,
 			"link": true
+		},
+		"spacing": {
+			"padding": true,
+			"margin": true
 		}
 	},
 	"editorStyle": "wp-block-columns-editor",

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

@@ -52,7 +52,7 @@ function ColumnsEditContainer( {
 	updateColumns,
 	clientId,
 } ) {
-	const { verticalAlignment } = attributes;
+	const { verticalAlignment, style } = attributes;
 
 	const { count } = useSelect(
 		( select ) => {
@@ -69,6 +69,7 @@ function ColumnsEditContainer( {
 
 	const blockProps = useBlockProps( {
 		className: classes,
+		style,
 	} );
 	const innerBlocksProps = useInnerBlocksProps( blockProps, {
 		allowedBlocks: ALLOWED_BLOCKS,

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

@@ -55,7 +55,8 @@
 		"align": true,
 		"html": false,
 		"spacing": {
-			"padding": true
+			"padding": true,
+			"margin": true
 		}
 	},
 	"editorStyle": "wp-block-cover-editor",

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

@@ -564,8 +564,8 @@ function CoverEdit( {
 				data-url={ url }
 			>
 				<BoxControlVisualizer
-					values={ styleAttribute?.spacing?.padding }
-					showValues={ styleAttribute?.visualizers?.padding }
+					values={ styleAttribute?.spacing }
+					showValues={ styleAttribute?.visualizers }
 				/>
 				<ResizableCover
 					className="block-library-cover__resize-container"

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

@@ -23,7 +23,8 @@
 			"link": true
 		},
 		"spacing": {
-			"padding": true
+			"padding": true,
+			"margin": true
 		},
 		"__experimentalBorder": {
 			"radius": true

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

@@ -36,8 +36,8 @@ function GroupEdit( { attributes, clientId } ) {
 	return (
 		<TagName { ...blockProps }>
 			<BoxControlVisualizer
-				values={ attributes.style?.spacing?.padding }
-				showValues={ attributes.style?.visualizers?.padding }
+				values={ attributes.style?.spacing }
+				showValues={ attributes.style?.visualizers }
 			/>
 			<div { ...innerBlocksProps } />
 		</TagName>

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

@@ -12,7 +12,10 @@
 	},
 	"supports": {
 		"anchor": true,
-		"align": ["center","wide","full"]
+		"align": ["center","wide","full"],
+		"spacing": {
+			"margin": true
+		}
 	},
 	"editorStyle": "wp-block-separator-editor",
 	"style": "wp-block-separator"

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

@@ -6,17 +6,19 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
-import { HorizontalRule } from '@wordpress/components';
+import { __experimentalBoxControl as BoxControl } from '@wordpress/components';
 import { withColors, useBlockProps } from '@wordpress/block-editor';
 /**
  * Internal dependencies
  */
 import SeparatorSettings from './separator-settings';
 
-function SeparatorEdit( { color, setColor, className } ) {
+const { __Visualizer: BoxControlVisualizer } = BoxControl;
+
+function SeparatorEdit( { attributes, color, setColor, className } ) {
 	return (
 		<>
-			<HorizontalRule
+			<div
 				{ ...useBlockProps( {
 					className: classnames( className, {
 						'has-background': color.color,
@@ -27,7 +29,12 @@ function SeparatorEdit( { color, setColor, className } ) {
 						color: color.color,
 					},
 				} ) }
-			/>
+			>
+				<BoxControlVisualizer
+					values={ attributes.style?.spacing }
+					showValues={ attributes.style?.visualizers }
+				/>
+			</div>
 			<SeparatorSettings color={ color } setColor={ setColor } />
 		</>
 	);

packages/block-library/src/separator/edit.native.js

@@ -0,0 +1,36 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
+/**
+ * WordPress dependencies
+ */
+import { HorizontalRule } from '@wordpress/components';
+import { withColors, useBlockProps } from '@wordpress/block-editor';
+/**
+ * Internal dependencies
+ */
+import SeparatorSettings from './separator-settings';
+
+function SeparatorEdit( { color, setColor, className } ) {
+	return (
+		<>
+			<HorizontalRule
+				{ ...useBlockProps( {
+					className: classnames( className, {
+						'has-background': color.color,
+						[ color.class ]: color.class,
+					} ),
+					style: {
+						backgroundColor: color.color,
+						color: color.color,
+					},
+				} ) }
+			/>
+			<SeparatorSettings color={ color } setColor={ setColor } />
+		</>
+	);
+}
+
+export default withColors( 'color', { textColor: 'color' } )( SeparatorEdit );

packages/blocks/src/api/constants.js

@@ -58,6 +58,11 @@ export const __EXPERIMENTAL_STYLE_PROPERTY = {
 		support: [ 'spacing', 'padding' ],
 		properties: [ 'top', 'right', 'bottom', 'left' ],
 	},
+	margin: {
+		value: [ 'spacing', 'margin' ],
+		support: [ 'spacing', 'margin' ],
+		properties: [ 'top', 'right', 'bottom', 'left' ],
+	},
 	textDecoration: {
 		value: [ 'typography', 'textDecoration' ],
 		support: [ '__experimentalTextDecoration' ],