From 92abe521c9456459d5b128a380c721a2a7e7c65c Mon Sep 17 00:00:00 2001
From: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com>
Date: Thu, 8 Apr 2021 18:01:02 +1000
Subject: [PATCH] Update separator block to use margin block support

---
 .../block-library/src/separator/block.json    |  8 +--
 packages/block-library/src/separator/edit.js  |  1 +
 packages/block-library/src/separator/save.js  |  2 -
 .../src/separator/separator-settings.js       | 54 +------------------
 4 files changed, 6 insertions(+), 59 deletions(-)

diff --git a/packages/block-library/src/separator/block.json b/packages/block-library/src/separator/block.json
index 063111139aa8de..7b77351f98ddbf 100644
--- a/packages/block-library/src/separator/block.json
+++ b/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"
diff --git a/packages/block-library/src/separator/edit.js b/packages/block-library/src/separator/edit.js
index 8e951a4e1daa75..ab1689ed034bd5 100644
--- a/packages/block-library/src/separator/edit.js
+++ b/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 }
diff --git a/packages/block-library/src/separator/save.js b/packages/block-library/src/separator/save.js
index f913385b0b9e90..67d489bd611c3c 100644
--- a/packages/block-library/src/separator/save.js
+++ b/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 } ) } />;
diff --git a/packages/block-library/src/separator/separator-settings.js b/packages/block-library/src/separator/separator-settings.js
index f0df3e5ce3cf48..2277ff64da263d 100644
--- a/packages/block-library/src/separator/separator-settings.js
+++ b/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>
 	);
 };