Skip to content

Commit

Permalink
Update separator block to use margin block support
Browse files Browse the repository at this point in the history
  • Loading branch information
aaronrobertshaw committed May 7, 2021
1 parent 7cf4290 commit 40c82c9
Show file tree
Hide file tree
Showing 4 changed files with 6 additions and 59 deletions.
8 changes: 4 additions & 4 deletions packages/block-library/src/separator/block.json
Original file line number Diff line number Diff line change
Expand Up @@ -12,14 +12,14 @@
},
"customColor": {
"type": "string"
},
"style": {
"type": "object"
}
},
"supports": {
"anchor": true,
"align": [ "center", "wide", "full" ]
"align": [ "center", "wide", "full" ],
"spacing": {
"margin": [ "top", "bottom" ]
}
},
"styles": [
{ "name": "default", "label": "Default", "isDefault": true },
Expand Down
1 change: 1 addition & 0 deletions packages/block-library/src/separator/edit.js
Original file line number Diff line number Diff line change
Expand Up @@ -39,6 +39,7 @@ function SeparatorEdit( props ) {
'wp-block-separator',
'wp-block-separator-wrapper'
) }
style={ {} }
>
<BoxControlVisualizer
values={ style?.spacing?.margin }
Expand Down
2 changes: 0 additions & 2 deletions packages/block-library/src/separator/save.js
Original file line number Diff line number Diff line change
Expand Up @@ -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 } ) } />;
Expand Down
54 changes: 1 addition & 53 deletions packages/block-library/src/separator/separator-settings.js
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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>
);
};
Expand Down

0 comments on commit 40c82c9

Please sign in to comment.