Allow negative values for margin controls (#60347)

* allow negative margins on margin controls * change z-index when block is selected in the editor * reduced exagerated z-index * Add "has-child-selected". * added position relative to groups with backgrounds * target only group blocks * added period to comment * avoid dragging input to negative values * fix min values for non margin inputs * change min value on box control component too * disable slider when value is out of bounds * Revert "disable slider when value is out of bounds" This reverts commit 194e413. * disable dragging to the negatives on BoxControl * updated changelog * only apply z-index if negative margins are present * move the changelog entry to unreleased --------- Co-authored-by: jasmussen <[email protected]> Co-authored-by: Ben Dwyer <[email protected]> Unlinked contributors: timsinc, jonathanelmgren, diegosomar, nendeb, bnjunge, dimasoho, dmpinder, wpalani, Pacicio, adamghorne, thomasnuggets, wiinf, alexisreau, madfcat, curiousduck-dev, alperta, wpsoul, DevAndreyBilchenko. Co-authored-by: MaggieCabrera <[email protected]> Co-authored-by: jasmussen <[email protected]> Co-authored-by: scruffian <[email protected]> Co-authored-by: aaronrobertshaw <[email protected]> Co-authored-by: draganescu <[email protected]> Co-authored-by: mirka <[email protected]> Co-authored-by: markhowellsmead <[email protected]> Co-authored-by: andrewserong <[email protected]> Co-authored-by: bgardner <[email protected]> Co-authored-by: annezazu <[email protected]> Co-authored-by: colorful-tones <[email protected]> Co-authored-by: carolinan <[email protected]> Co-authored-by: afercia <[email protected]> Co-authored-by: richtabor <[email protected]> Co-authored-by: thirumani02 <[email protected]> Co-authored-by: aurooba <[email protected]> Co-authored-by: mrfoxtalbot <[email protected]> Co-authored-by: daviedR <[email protected]> Co-authored-by: samxmunoz <[email protected]> Co-authored-by: rolf-yoast <[email protected]> Co-authored-by: aristath <[email protected]> Co-authored-by: AdsonCicilioti <[email protected]> Co-authored-by: peiche <[email protected]> Co-authored-by: namithj <[email protected]> Co-authored-by: rxnlabs <[email protected]> Co-authored-by: seothemes <[email protected]> Co-authored-by: nicmare <[email protected]> Co-authored-by: hagege <[email protected]> Co-authored-by: flipflap <[email protected]> Co-authored-by: websitegenii <[email protected]> Co-authored-by: jameskoster <[email protected]> Co-authored-by: dkjensen <[email protected]> Co-authored-by: cawa-93 <[email protected]> Co-authored-by: asmittle <[email protected]> Co-authored-by: QuietNoise <[email protected]> Co-authored-by: itsjustdj <[email protected]> Co-authored-by: metabreakr <[email protected]> Co-authored-by: ohiawins <[email protected]> Co-authored-by: JiveDig <[email protected]> Co-authored-by: ouw-jvt <[email protected]> Co-authored-by: flabernardez <[email protected]> Co-authored-by: SH4LIN <[email protected]> Co-authored-by: lunule <[email protected]> Co-authored-by: cloudcreationsjess <[email protected]>
WordPress · Apr 22, 2024 · aa5cdae · aa5cdae
1 parent 13deab0
commit aa5cdae
Show file tree

Hide file tree

Showing 9 changed files with 72 additions and 7 deletions.
diff --git a/packages/base-styles/_z-index.scss b/packages/base-styles/_z-index.scss
@@ -4,6 +4,7 @@
 
 $z-layers: (
 	".block-editor-block-list__block::before": 0,
+	".block-editor-block-list__block.is-selected": 20,
 	".block-editor-block-switcher__arrow": 1,
 	".block-editor-block-list__block {core/image aligned wide or fullwide}": 20,
 	".block-library-classic__toolbar": 31, // When scrolled to top this toolbar needs to sit over block-editor-block-toolbar

diff --git a/packages/block-editor/src/components/block-list/content.scss b/packages/block-editor/src/components/block-list/content.scss
@@ -183,6 +183,14 @@ _::-webkit-full-page-media, _:future, :root .has-multi-selection .block-editor-b
 		user-select: none;
 	}
 
+	&.has-negative-margin {
+		&.is-selected,
+		&.has-child-selected {
+			// Bring the selected block forward so we can see it.
+			z-index: z-index(".block-editor-block-list__block.is-selected");
+		}
+	}
+
 	.reusable-block-edit-panel * {
 		z-index: z-index(".block-editor-block-list__block .reusable-block-edit-panel *");
 	}

diff --git a/packages/block-editor/src/components/block-list/use-block-props/index.js b/packages/block-editor/src/components/block-list/use-block-props/index.js
@@ -144,6 +144,16 @@ export function useBlockProps( props = {}, { __unstableIsHtml } = {} ) {
 		);
 	}
 
+	let hasNegativeMargin = false;
+	if (
+		wrapperProps?.style?.marginTop?.charAt( 0 ) === '-' ||
+		wrapperProps?.style?.marginBottom?.charAt( 0 ) === '-' ||
+		wrapperProps?.style?.marginLeft?.charAt( 0 ) === '-' ||
+		wrapperProps?.style?.marginRight?.charAt( 0 ) === '-'
+	) {
+		hasNegativeMargin = true;
+	}
+
 	return {
 		tabIndex: blockEditingMode === 'disabled' ? -1 : 0,
 		...wrapperProps,
@@ -174,6 +184,7 @@ export function useBlockProps( props = {}, { __unstableIsHtml } = {} ) {
 				'can-insert-moving-block': canInsertMovingBlock,
 				'is-editing-disabled': isEditingDisabled,
 				'has-editable-outline': hasEditableOutline,
+				'has-negative-margin': hasNegativeMargin,
 				'is-content-locked-temporarily-editing-as-blocks':
 					isTemporarilyEditingAsBlocks,
 			},

diff --git a/packages/block-editor/src/components/global-styles/dimensions-panel.js b/packages/block-editor/src/components/global-styles/dimensions-panel.js
@@ -561,6 +561,7 @@ export default function DimensionsPanel( {
 						<BoxControl
 							values={ marginValues }
 							onChange={ setMarginValues }
+							min={ -Infinity }
 							label={ __( 'Margin' ) }
 							sides={ marginSides }
 							units={ units }
@@ -574,6 +575,7 @@ export default function DimensionsPanel( {
 						<SpacingSizesControl
 							values={ marginValues }
 							onChange={ setMarginValues }
+							minimumCustomValue={ -Infinity }
 							label={ __( 'Margin' ) }
 							sides={ marginSides }
 							units={ units }

diff --git a/...block-editor/src/components/spacing-sizes-control/input-controls/spacing-input-control.js b/...block-editor/src/components/spacing-sizes-control/input-controls/spacing-input-control.js
@@ -92,6 +92,8 @@ export default function SpacingInputControl( {
 			! isValueSpacingPreset( value )
 	);
 
+	const [ minValue, setMinValue ] = useState( minimumCustomValue );
+
 	const previousValue = usePrevious( value );
 	if (
 		!! value &&
@@ -222,13 +224,26 @@ export default function SpacingInputControl( {
 						}
 						value={ currentValue }
 						units={ units }
-						min={ minimumCustomValue }
+						min={ minValue }
 						placeholder={ allPlaceholder }
 						disableUnits={ isMixed }
 						label={ ariaLabel }
 						hideLabelFromVision
 						className="spacing-sizes-control__custom-value-input"
 						size={ '__unstable-large' }
+						onDragStart={ () => {
+							if ( value?.charAt( 0 ) === '-' ) {
+								setMinValue( 0 );
+							}
+						} }
+						onDrag={ () => {
+							if ( value?.charAt( 0 ) === '-' ) {
+								setMinValue( 0 );
+							}
+						} }
+						onDragEnd={ () => {
+							setMinValue( minimumCustomValue );
+						} }
 					/>
 					<RangeControl
 						onMouseOver={ onMouseOver }

diff --git a/packages/block-library/src/group/style.scss b/packages/block-library/src/group/style.scss
@@ -2,3 +2,8 @@
 	// This block has customizable padding, border-box makes that more predictable.
 	box-sizing: border-box;
 }
+
+// We need this so groups with negative margins overlap as expected.
+:where(.wp-block-group.wp-block-group-is-layout-constrained) {
+	position: relative;
+}
diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
@@ -2,6 +2,10 @@
 
 ## Unreleased
 
+### Enhancements
+
+-   `BoxControl`: Allow negative values for margin controls ([#60347](https://github.com/WordPress/gutenberg/pull/60347)).
+
 ### Bug Fix
 
 -   `SlotFill`: fixed missing `getServerSnapshot` parameter in slot map ([#60943](https://github.com/WordPress/gutenberg/pull/60943)).

diff --git a/packages/components/src/box-control/index.tsx b/packages/components/src/box-control/index.tsx
@@ -34,10 +34,6 @@ import type {
 	BoxControlValue,
 } from './types';
 
-const defaultInputProps = {
-	min: 0,
-};
-
 const noop = () => {};
 
 function useUniqueId( idProp?: string ) {
@@ -74,7 +70,6 @@ function useUniqueId( idProp?: string ) {
 function BoxControl( {
 	__next40pxDefaultSize = false,
 	id: idProp,
-	inputProps = defaultInputProps,
 	onChange = noop,
 	label = __( 'Box Control' ),
 	values: valuesProp,
@@ -85,6 +80,7 @@ function BoxControl( {
 	resetValues = DEFAULT_VALUES,
 	onMouseOver,
 	onMouseOut,
+	...inputProps
 }: BoxControlProps ) {
 	const [ values, setValues ] = useControlledState( valuesProp, {
 		fallback: DEFAULT_VALUES,
@@ -140,8 +136,11 @@ function BoxControl( {
 		setIsDirty( false );
 	};
 
+	const min = 'min' in inputProps ? inputProps.min : 0;
+	const newInputProps = { ...inputProps, min };
+
 	const inputControlProps = {
-		...inputProps,
+		newInputProps,
 		onChange: handleOnChange,
 		onFocus: handleOnFocus,
 		isLinked,

diff --git a/packages/components/src/box-control/input-controls.tsx b/packages/components/src/box-control/input-controls.tsx
@@ -2,6 +2,7 @@
  * WordPress dependencies
  */
 import { useInstanceId } from '@wordpress/compose';
+import { useState } from '@wordpress/element';
 /**
  * Internal dependencies
  */
@@ -28,6 +29,8 @@ export default function BoxInputControls( {
 	sides,
 	...props
 }: BoxControlInputControlProps ) {
+	const minimumCustomValue = props.min;
+	const [ minValue, setMinValue ] = useState( minimumCustomValue );
 	const generatedId = useInstanceId( BoxInputControls, 'box-control-input' );
 
 	const createHandleOnFocus =
@@ -100,6 +103,9 @@ export default function BoxInputControls( {
 					? parsedUnit
 					: selectedUnits[ side ];
 
+				const isNegativeValue =
+					parsedQuantity !== undefined && parsedQuantity < 0;
+
 				const inputId = [ generatedId, side ].join( '-' );
 
 				return (
@@ -115,6 +121,7 @@ export default function BoxInputControls( {
 								value={ [ parsedQuantity, computedUnit ].join(
 									''
 								) }
+								min={ minValue }
 								onChange={ ( nextValue, extra ) =>
 									handleOnValueChange(
 										side,
@@ -126,6 +133,19 @@ export default function BoxInputControls( {
 									side
 								) }
 								onFocus={ createHandleOnFocus( side ) }
+								onDragStart={ () => {
+									if ( isNegativeValue ) {
+										setMinValue( 0 );
+									}
+								} }
+								onDrag={ () => {
+									if ( isNegativeValue ) {
+										setMinValue( 0 );
+									}
+								} }
+								onDragEnd={ () => {
+									setMinValue( minimumCustomValue );
+								} }
 								label={ LABELS[ side ] }
 								hideLabelFromVision
 							/>