Update separator block to use margin block support

Author: aaronrobertshaw

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

@@ -8,14 +8,14 @@
 		},
 		"customColor": {
 			"type": "string"
-		},
-		"style": {
-			"type": "object"
 		}
 	},
 	"supports": {
 		"anchor": true,
-		"align": ["center","wide","full"]
+		"align": ["center","wide","full"],
+		"spacing": {
+			"margin": [ "top", "bottom" ]
+		}
 	},
 	"editorStyle": "wp-block-separator-editor",
 	"style": "wp-block-separator"

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

@@ -39,6 +39,7 @@ function SeparatorEdit( props ) {
 					'wp-block-separator',
 					'wp-block-separator-wrapper'
 				) }
+				style={ {} }
 			>
 				<BoxControlVisualizer
 					values={ style?.spacing?.margin }

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

@@ -27,8 +27,6 @@ export default function separatorSave( { attributes } ) {
 	const style = {
 		backgroundColor: backgroundClass ? undefined : customColor,
 		color: colorClass ? undefined : customColor,
-		marginBottom: attributes.style?.spacing?.margin?.bottom,
-		marginTop: attributes.style?.spacing?.margin?.top,
 	};
 
 	return <hr { ...useBlockProps.save( { className, style } ) } />;

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

@@ -3,45 +3,8 @@
  */
 import { __ } from '@wordpress/i18n';
 import { InspectorControls, PanelColorSettings } from '@wordpress/block-editor';
-import {
-	PanelBody,
-	__experimentalBoxControl as BoxControl,
-} from '@wordpress/components';
-
-/**
- * Internal dependencies
- */
-import { CSS_UNITS } from './shared';
-
-const SeparatorSettings = ( {
-	color,
-	setColor,
-	attributes: { style },
-	setAttributes,
-} ) => {
-	const updateMargins = ( { top, bottom } ) => {
-		setAttributes( {
-			style: {
-				...style,
-				spacing: {
-					...style?.spacing,
-					margin: { top, bottom },
-				},
-			},
-		} );
-	};
-
-	const onChangeShowVisualizer = ( { top, bottom } ) => {
-		setAttributes( {
-			style: {
-				...style,
-				visualizers: {
-					margin: { top, bottom },
-				},
-			},
-		} );
-	};
 
+const SeparatorSettings = ( { color, setColor } ) => {
 	return (
 		<InspectorControls>
 			<PanelColorSettings
@@ -54,21 +17,6 @@ const SeparatorSettings = ( {
 					},
 				] }
 			/>
-			<PanelBody title={ __( 'Separator settings' ) }>
-				<BoxControl
-					label={ __( 'Margin' ) }
-					onChange={ updateMargins }
-					sides={ {
-						top: true,
-						right: false,
-						bottom: true,
-						left: false,
-					} }
-					units={ CSS_UNITS }
-					values={ style?.spacing?.margin || {} }
-					onChangeShowVisualizer={ onChangeShowVisualizer }
-				/>
-			</PanelBody>
 		</InspectorControls>
 	);
 };