From 84567a6872510f4dfc5c0cfdec308bd0d1a2fd9d Mon Sep 17 00:00:00 2001 From: MaggieCabrera Date: Mon, 1 Apr 2024 18:12:43 +0200 Subject: [PATCH 01/16] allow negative margins on margin controls --- .../src/components/global-styles/dimensions-panel.js | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/block-editor/src/components/global-styles/dimensions-panel.js b/packages/block-editor/src/components/global-styles/dimensions-panel.js index 94e53eec16372..40110d8739217 100644 --- a/packages/block-editor/src/components/global-styles/dimensions-panel.js +++ b/packages/block-editor/src/components/global-styles/dimensions-panel.js @@ -574,6 +574,7 @@ export default function DimensionsPanel( { Date: Mon, 1 Apr 2024 18:27:17 +0200 Subject: [PATCH 02/16] change z-index when block is selected in the editor --- packages/base-styles/_z-index.scss | 1 + packages/block-editor/src/components/block-list/content.scss | 5 +++++ 2 files changed, 6 insertions(+) diff --git a/packages/base-styles/_z-index.scss b/packages/base-styles/_z-index.scss index b5d6beabb4f60..f845a25baca36 100644 --- 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": 9999, ".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 index 2bf9d47d3385d..a277c4523a8d3 100644 --- a/packages/block-editor/src/components/block-list/content.scss +++ b/packages/block-editor/src/components/block-list/content.scss @@ -183,6 +183,11 @@ _::-webkit-full-page-media, _:future, :root .has-multi-selection .block-editor-b user-select: none; } + &.is-selected { + // So we can see it if a block is overlaping the selected one + 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 *"); } From 5e89477c13cf42a61db71a036a90aea6f3a3fe04 Mon Sep 17 00:00:00 2001 From: MaggieCabrera Date: Mon, 1 Apr 2024 18:28:20 +0200 Subject: [PATCH 03/16] reduced exagerated z-index --- packages/base-styles/_z-index.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/base-styles/_z-index.scss b/packages/base-styles/_z-index.scss index f845a25baca36..affe9489684cd 100644 --- a/packages/base-styles/_z-index.scss +++ b/packages/base-styles/_z-index.scss @@ -4,7 +4,7 @@ $z-layers: ( ".block-editor-block-list__block::before": 0, - ".block-editor-block-list__block.is-selected": 9999, + ".block-editor-block-list__block.is-selected": 1, ".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 From b790667a3dc94bdb735e06699f717732ed1788b9 Mon Sep 17 00:00:00 2001 From: jasmussen Date: Tue, 2 Apr 2024 11:26:04 +0200 Subject: [PATCH 04/16] Add "has-child-selected". --- packages/block-editor/src/components/block-list/content.scss | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/packages/block-editor/src/components/block-list/content.scss b/packages/block-editor/src/components/block-list/content.scss index a277c4523a8d3..bee4cdb424349 100644 --- a/packages/block-editor/src/components/block-list/content.scss +++ b/packages/block-editor/src/components/block-list/content.scss @@ -183,8 +183,9 @@ _::-webkit-full-page-media, _:future, :root .has-multi-selection .block-editor-b user-select: none; } - &.is-selected { - // So we can see it if a block is overlaping the selected one + &.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"); } From 5959a6378c8c4fbb90736a05ac879eaf995e0142 Mon Sep 17 00:00:00 2001 From: MaggieCabrera Date: Tue, 2 Apr 2024 12:17:29 +0200 Subject: [PATCH 05/16] added position relative to groups with backgrounds --- packages/block-library/src/group/style.scss | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/packages/block-library/src/group/style.scss b/packages/block-library/src/group/style.scss index 3457a12adb622..6ff701814dbc6 100644 --- 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.has-background) { + position: relative; +} From 4d1bba875650fb47cfd25c193f7a5c9a68d52f08 Mon Sep 17 00:00:00 2001 From: MaggieCabrera Date: Wed, 3 Apr 2024 10:25:21 +0200 Subject: [PATCH 06/16] target only group blocks --- packages/block-library/src/group/style.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/block-library/src/group/style.scss b/packages/block-library/src/group/style.scss index 6ff701814dbc6..4681a77c8df13 100644 --- a/packages/block-library/src/group/style.scss +++ b/packages/block-library/src/group/style.scss @@ -4,6 +4,6 @@ } // We need this so groups with negative margins overlap as expected -:where(.wp-block-group.has-background) { +:where(.wp-block-group.wp-block-group-is-layout-constrained) { position: relative; } From da9ba059844998b9db7b62e8e58da385a9b49a78 Mon Sep 17 00:00:00 2001 From: MaggieCabrera Date: Wed, 3 Apr 2024 11:41:19 +0200 Subject: [PATCH 07/16] added period to comment --- packages/block-library/src/group/style.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/block-library/src/group/style.scss b/packages/block-library/src/group/style.scss index 4681a77c8df13..018091ffd4564 100644 --- a/packages/block-library/src/group/style.scss +++ b/packages/block-library/src/group/style.scss @@ -3,7 +3,7 @@ box-sizing: border-box; } -// We need this so groups with negative margins overlap as expected +// We need this so groups with negative margins overlap as expected. :where(.wp-block-group.wp-block-group-is-layout-constrained) { position: relative; } From e5f328be0330afcd78b0d58837035a1d7a5ee5ce Mon Sep 17 00:00:00 2001 From: MaggieCabrera Date: Thu, 4 Apr 2024 10:31:08 +0200 Subject: [PATCH 08/16] avoid dragging input to negative values --- .../input-controls/spacing-input-control.js | 17 ++++++++++++++++- 1 file changed, 16 insertions(+), 1 deletion(-) diff --git a/packages/block-editor/src/components/spacing-sizes-control/input-controls/spacing-input-control.js b/packages/block-editor/src/components/spacing-sizes-control/input-controls/spacing-input-control.js index 3a549bd8e15cc..ebf068fb809a2 100644 --- a/packages/block-editor/src/components/spacing-sizes-control/input-controls/spacing-input-control.js +++ b/packages/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( -Infinity ); + } } /> Date: Thu, 4 Apr 2024 10:33:47 +0200 Subject: [PATCH 09/16] fix min values for non margin inputs --- .../input-controls/spacing-input-control.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/block-editor/src/components/spacing-sizes-control/input-controls/spacing-input-control.js b/packages/block-editor/src/components/spacing-sizes-control/input-controls/spacing-input-control.js index ebf068fb809a2..6feb583c29cdb 100644 --- a/packages/block-editor/src/components/spacing-sizes-control/input-controls/spacing-input-control.js +++ b/packages/block-editor/src/components/spacing-sizes-control/input-controls/spacing-input-control.js @@ -242,7 +242,7 @@ export default function SpacingInputControl( { } } } onDragEnd={ () => { - setMinValue( -Infinity ); + setMinValue( minimumCustomValue ); } } /> Date: Tue, 9 Apr 2024 11:12:39 +0200 Subject: [PATCH 10/16] change min value on box control component too --- .../src/components/global-styles/dimensions-panel.js | 1 + packages/components/src/box-control/index.tsx | 11 +++++------ 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/packages/block-editor/src/components/global-styles/dimensions-panel.js b/packages/block-editor/src/components/global-styles/dimensions-panel.js index 40110d8739217..3ba726b1a6613 100644 --- 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( { {}; 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, From 1af916483ee2de2f453c88d600d77a95cd57edd1 Mon Sep 17 00:00:00 2001 From: MaggieCabrera Date: Tue, 9 Apr 2024 12:05:06 +0200 Subject: [PATCH 11/16] disable slider when value is out of bounds --- .../input-controls/spacing-input-control.js | 3 +++ 1 file changed, 3 insertions(+) diff --git a/packages/block-editor/src/components/spacing-sizes-control/input-controls/spacing-input-control.js b/packages/block-editor/src/components/spacing-sizes-control/input-controls/spacing-input-control.js index 6feb583c29cdb..c09d81b2174d6 100644 --- a/packages/block-editor/src/components/spacing-sizes-control/input-controls/spacing-input-control.js +++ b/packages/block-editor/src/components/spacing-sizes-control/input-controls/spacing-input-control.js @@ -203,6 +203,8 @@ export default function SpacingInputControl( { typeLabel ).trim(); + const areNegativeValuesAllowed = minValue < 0; + return ( { icon && ( @@ -250,6 +252,7 @@ export default function SpacingInputControl( { onMouseOut={ onMouseOut } onFocus={ onMouseOver } onBlur={ onMouseOut } + disabled={ areNegativeValuesAllowed } value={ customRangeValue } min={ 0 } max={ CUSTOM_VALUE_SETTINGS[ selectedUnit ]?.max ?? 10 } From 21bed04103c999d2ae3904f2341c41e9aa746c77 Mon Sep 17 00:00:00 2001 From: MaggieCabrera Date: Tue, 9 Apr 2024 13:21:11 +0200 Subject: [PATCH 12/16] Revert "disable slider when value is out of bounds" This reverts commit 194e41343badc07cf4845c2b609a9c8b9ee59ce3. --- .../input-controls/spacing-input-control.js | 3 --- 1 file changed, 3 deletions(-) diff --git a/packages/block-editor/src/components/spacing-sizes-control/input-controls/spacing-input-control.js b/packages/block-editor/src/components/spacing-sizes-control/input-controls/spacing-input-control.js index c09d81b2174d6..6feb583c29cdb 100644 --- a/packages/block-editor/src/components/spacing-sizes-control/input-controls/spacing-input-control.js +++ b/packages/block-editor/src/components/spacing-sizes-control/input-controls/spacing-input-control.js @@ -203,8 +203,6 @@ export default function SpacingInputControl( { typeLabel ).trim(); - const areNegativeValuesAllowed = minValue < 0; - return ( { icon && ( @@ -252,7 +250,6 @@ export default function SpacingInputControl( { onMouseOut={ onMouseOut } onFocus={ onMouseOver } onBlur={ onMouseOut } - disabled={ areNegativeValuesAllowed } value={ customRangeValue } min={ 0 } max={ CUSTOM_VALUE_SETTINGS[ selectedUnit ]?.max ?? 10 } From 6c98a0e05aeecf1c539f71dd5db4cf0cdd63d86b Mon Sep 17 00:00:00 2001 From: MaggieCabrera Date: Wed, 10 Apr 2024 16:40:08 +0200 Subject: [PATCH 13/16] disable dragging to the negatives on BoxControl --- .../src/box-control/input-controls.tsx | 20 +++++++++++++++++++ 1 file changed, 20 insertions(+) diff --git a/packages/components/src/box-control/input-controls.tsx b/packages/components/src/box-control/input-controls.tsx index 553f547abf9b0..2c10c0510ad3e 100644 --- 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 /> From 336a9ce28d4d00cfb644c56c5655f7525d668e96 Mon Sep 17 00:00:00 2001 From: MaggieCabrera Date: Wed, 10 Apr 2024 18:04:01 +0200 Subject: [PATCH 14/16] updated changelog --- packages/components/CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md index d4ae542784097..8c448d5863953 100644 --- a/packages/components/CHANGELOG.md +++ b/packages/components/CHANGELOG.md @@ -21,6 +21,7 @@ - `Navigator`: Navigation to the active path doesn't create a new location history ([#60561](https://github.com/WordPress/gutenberg/pull/60561)) - `FormToggle`: Forwards ref to input ([#60234](https://github.com/WordPress/gutenberg/pull/60234)). - `ToggleControl`: Forwards ref to FormToggle ([#60234](https://github.com/WordPress/gutenberg/pull/60234)). +- `BoxControl`: Allow negative values for margin controls ([#60347](https://github.com/WordPress/gutenberg/pull/60347)). ### Bug Fix From 202506dab463c7a6208b975b12eb5542730e1379 Mon Sep 17 00:00:00 2001 From: MaggieCabrera Date: Fri, 12 Apr 2024 15:43:12 +0200 Subject: [PATCH 15/16] only apply z-index if negative margins are present --- packages/base-styles/_z-index.scss | 2 +- .../src/components/block-list/content.scss | 10 ++++++---- .../components/block-list/use-block-props/index.js | 11 +++++++++++ 3 files changed, 18 insertions(+), 5 deletions(-) diff --git a/packages/base-styles/_z-index.scss b/packages/base-styles/_z-index.scss index affe9489684cd..d995ccb31bbf5 100644 --- a/packages/base-styles/_z-index.scss +++ b/packages/base-styles/_z-index.scss @@ -4,7 +4,7 @@ $z-layers: ( ".block-editor-block-list__block::before": 0, - ".block-editor-block-list__block.is-selected": 1, + ".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 index bee4cdb424349..3971df611c277 100644 --- a/packages/block-editor/src/components/block-list/content.scss +++ b/packages/block-editor/src/components/block-list/content.scss @@ -183,10 +183,12 @@ _::-webkit-full-page-media, _:future, :root .has-multi-selection .block-editor-b user-select: none; } - &.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"); + &.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 * { 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 index af98f24b98785..b91b9d32f52ac 100644 --- 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, }, From 83d7b95a7c69879516a0041addafb7bea107f037 Mon Sep 17 00:00:00 2001 From: Ben Dwyer Date: Mon, 22 Apr 2024 13:42:19 +0100 Subject: [PATCH 16/16] move the changelog entry to unreleased --- packages/components/CHANGELOG.md | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md index 8c448d5863953..5585290ed6e64 100644 --- 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)). @@ -21,7 +25,6 @@ - `Navigator`: Navigation to the active path doesn't create a new location history ([#60561](https://github.com/WordPress/gutenberg/pull/60561)) - `FormToggle`: Forwards ref to input ([#60234](https://github.com/WordPress/gutenberg/pull/60234)). - `ToggleControl`: Forwards ref to FormToggle ([#60234](https://github.com/WordPress/gutenberg/pull/60234)). -- `BoxControl`: Allow negative values for margin controls ([#60347](https://github.com/WordPress/gutenberg/pull/60347)). ### Bug Fix