Reset block spacing back to the default value rather than removing it

WordPress · Dec 8, 2020 · dc32817 · dc32817
1 parent e1481dd
commit dc32817
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 2 deletions.
diff --git a/packages/block-editor/src/hooks/padding.js b/packages/block-editor/src/hooks/padding.js
@@ -3,7 +3,7 @@
  */
 import { __ } from '@wordpress/i18n';
 import { Platform } from '@wordpress/element';
-import { getBlockSupport } from '@wordpress/blocks';
+import { getBlockSupport, getBlockType } from '@wordpress/blocks';
 import { __experimentalBoxControl as BoxControl } from '@wordpress/components';
 
 /**
@@ -65,13 +65,23 @@ export function PaddingEdit( props ) {
 		} );
 	};
 
+	const onReset = () => {
+		const blockType = getBlockType( blockName );
+		const defaultSettings = blockType?.attributes?.style?.default;
+
+		setAttributes( {
+			style: cleanEmptyObject( defaultSettings ),
+		} );
+	};
+
 	return Platform.select( {
 		web: (
 			<>
 				<BoxControl
 					values={ style?.spacing?.padding }
 					onChange={ onChange }
 					onChangeShowVisualizer={ onChangeShowVisualizer }
+					onReset={ onReset }
 					label={ __( 'Padding' ) }
 					units={ units }
 				/>

diff --git a/packages/block-library/src/verse/edit.js b/packages/block-library/src/verse/edit.js
@@ -13,6 +13,8 @@ import {
 	AlignmentToolbar,
 	useBlockProps,
 } from '@wordpress/block-editor';
+import { __experimentalBoxControl as BoxControl } from '@wordpress/components';
+const { __Visualizer: BoxControlVisualizer } = BoxControl;
 
 export default function VerseEdit( {
 	attributes,
@@ -36,6 +38,10 @@ export default function VerseEdit( {
 					} }
 				/>
 			</BlockControls>
+			<BoxControlVisualizer
+				values={ attributes.style?.spacing?.padding }
+				showValues={ attributes.style?.visualizers?.padding }
+			/>
 			<RichText
 				tagName="pre"
 				identifier="content"

diff --git a/packages/components/src/box-control/index.js b/packages/components/src/box-control/index.js
@@ -48,6 +48,7 @@ export default function BoxControl( {
 	inputProps = defaultInputProps,
 	onChange = noop,
 	onChangeShowVisualizer = noop,
+	onReset = noop,
 	label = __( 'Box Control' ),
 	values: valuesProp,
 	units,
@@ -94,7 +95,7 @@ export default function BoxControl( {
 	const handleOnReset = () => {
 		const initialValues = DEFAULT_VALUES;
 
-		onChange( initialValues );
+		onReset();
 		setValues( initialValues );
 		setIsDirty( false );
 	};