diff --git a/packages/base-styles/_z-index.scss b/packages/base-styles/_z-index.scss index affe9489684cdd..d995ccb31bbf5f 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 51c53fd580e7b5..a7c6f02ca6d416 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 af98f24b98785e..b91b9d32f52acc 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, },