From 533467e56706f589c23cc62792d8e6717818d253 Mon Sep 17 00:00:00 2001 From: Justin Ahinon Date: Thu, 14 Apr 2022 10:02:49 +0200 Subject: [PATCH 1/3] Enable negative margins in box control --- packages/components/src/box-control/index.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/packages/components/src/box-control/index.js b/packages/components/src/box-control/index.js index 54377010e5df2f..a7f03540a4e079 100644 --- a/packages/components/src/box-control/index.js +++ b/packages/components/src/box-control/index.js @@ -48,7 +48,7 @@ function useUniqueId( idProp ) { } export default function BoxControl( { id: idProp, - inputProps = defaultInputProps, + inputProps, onChange = noop, onChangeShowVisualizer = noop, label = __( 'Box Control' ), @@ -59,6 +59,8 @@ export default function BoxControl( { allowReset = true, resetValues = DEFAULT_VALUES, } ) { + inputProps = label === __( 'Margin' ) ? -Infinity : defaultInputProps; + const [ values, setValues ] = useControlledState( valuesProp, { fallback: DEFAULT_VALUES, } ); From aa2885f76be64e5f2ccf98c4939ec45fae66cf37 Mon Sep 17 00:00:00 2001 From: Justin Ahinon Date: Wed, 20 Apr 2022 07:45:00 +0200 Subject: [PATCH 2/3] Use the spacingType property to define when negative margin is accepted --- packages/block-editor/src/hooks/margin.js | 1 + packages/components/src/box-control/index.js | 3 ++- 2 files changed, 3 insertions(+), 1 deletion(-) diff --git a/packages/block-editor/src/hooks/margin.js b/packages/block-editor/src/hooks/margin.js index 8ae0a9d7d90835..7517d3cd5d9295 100644 --- a/packages/block-editor/src/hooks/margin.js +++ b/packages/block-editor/src/hooks/margin.js @@ -149,6 +149,7 @@ export function MarginEdit( props ) { units={ units } allowReset={ false } splitOnAxis={ splitOnAxis } + spacingType={ __( 'Margin' ) } /> ), diff --git a/packages/components/src/box-control/index.js b/packages/components/src/box-control/index.js index a7f03540a4e079..5818b046de9347 100644 --- a/packages/components/src/box-control/index.js +++ b/packages/components/src/box-control/index.js @@ -58,8 +58,9 @@ export default function BoxControl( { splitOnAxis = false, allowReset = true, resetValues = DEFAULT_VALUES, + spacingType, } ) { - inputProps = label === __( 'Margin' ) ? -Infinity : defaultInputProps; + inputProps = spacingType === 'Margin' ? -Infinity : defaultInputProps; const [ values, setValues ] = useControlledState( valuesProp, { fallback: DEFAULT_VALUES, From bd00bc340b910136dfded05ab1b4bcb4b6de077b Mon Sep 17 00:00:00 2001 From: Justin Ahinon Date: Tue, 26 Apr 2022 13:54:28 +0200 Subject: [PATCH 3/3] Use a boolean to allow negative values for margin --- packages/block-editor/src/hooks/margin.js | 2 +- packages/components/src/box-control/index.js | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/block-editor/src/hooks/margin.js b/packages/block-editor/src/hooks/margin.js index c67b42e0608900..19ea51dc1ff9b0 100644 --- a/packages/block-editor/src/hooks/margin.js +++ b/packages/block-editor/src/hooks/margin.js @@ -143,7 +143,7 @@ export function MarginEdit( props ) { units={ units } allowReset={ false } splitOnAxis={ splitOnAxis } - spacingType={ __( 'Margin' ) } + allowNegativeValues={ true } /> ), diff --git a/packages/components/src/box-control/index.js b/packages/components/src/box-control/index.js index 75303bcc436957..a6744f420ac474 100644 --- a/packages/components/src/box-control/index.js +++ b/packages/components/src/box-control/index.js @@ -55,9 +55,9 @@ export default function BoxControl( { splitOnAxis = false, allowReset = true, resetValues = DEFAULT_VALUES, - spacingType, + allowNegativeValues = false, } ) { - inputProps = spacingType === 'Margin' ? -Infinity : defaultInputProps; + inputProps = allowNegativeValues ? { min: -Infinity } : defaultInputProps; const [ values, setValues ] = useControlledState( valuesProp, { fallback: DEFAULT_VALUES,