diff --git a/packages/base-styles/_z-index.scss b/packages/base-styles/_z-index.scss index e425d111e49f1..de44cd2e64cfd 100644 --- a/packages/base-styles/_z-index.scss +++ b/packages/base-styles/_z-index.scss @@ -81,7 +81,7 @@ $z-layers: ( ".block-editor-block-contextual-toolbar": 61, // Ensures content overlay appears higher than resize containers used for image/video/etc. - ".block-editor-block-content-overlay__overlay": 10, + "..block-editor-block-list__block.has-block-overlay": 10, // Query block setup state. ".block-editor-block-pattern-setup .pattern-slide": 100, diff --git a/packages/block-editor/README.md b/packages/block-editor/README.md index 57820884bb20d..3770e5eb7cf7b 100644 --- a/packages/block-editor/README.md +++ b/packages/block-editor/README.md @@ -724,7 +724,7 @@ _Parameters_ - _props_ `Object`: Optional. Props to pass to the element. Must contain the ref if one is defined. - _options_ `Object`: Options for internal use only. - _options.\_\_unstableIsHtml_ `boolean`: -- _options.\_\_unstableIsDisabled_ `boolean`: Whether the block should be disabled. +- _options.\_\_unstableHasOverlay_ `boolean`: Whether the block should be disabled. _Returns_ diff --git a/packages/block-editor/src/components/block-content-overlay/style.scss b/packages/block-editor/src/components/block-content-overlay/style.scss index cba4b603d0bcf..fbc31e4aecf67 100644 --- a/packages/block-editor/src/components/block-content-overlay/style.scss +++ b/packages/block-editor/src/components/block-content-overlay/style.scss @@ -1,4 +1,4 @@ -.block-editor-block-content-overlay { +.block-editor-block-list__block.has-block-overlay { &::before { content: ""; position: absolute; @@ -9,7 +9,7 @@ background: transparent; border: none; border-radius: $radius-block-ui; - z-index: z-index(".block-editor-block-content-overlay__overlay"); + z-index: z-index(".block-editor-block-list__block.has-block-overlay"); } &:hover:not(.is-dragging-blocks)::before { @@ -17,3 +17,9 @@ box-shadow: 0 0 0 $border-width var(--wp-admin-theme-color) inset; } } + +.block-editor-block-list__block.has-block-overlay .block-editor-block-list__block::before { + display: none; + content: none; + z-index: -1; +} diff --git a/packages/block-editor/src/components/block-list/style.scss b/packages/block-editor/src/components/block-list/style.scss index a611df85ffe62..087ab0474ebfc 100644 --- a/packages/block-editor/src/components/block-list/style.scss +++ b/packages/block-editor/src/components/block-list/style.scss @@ -419,32 +419,6 @@ transform: scale(0.8); } -.is-root-container.is-exploded-mode > .wp-block { - &::after { - content: ""; - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - z-index: z-index(".block-editor-block-content-overlay__overlay"); - pointer-events: unset !important; - } - - &:hover:not(.is-selected)::after { - background: rgba(var(--wp-admin-theme-color--rgb), 0.1); - box-shadow: 0 0 0 0 var(--wp-admin-theme-color) inset; - } - - &.overlay-active * { - pointer-events: none; - } - - &.is-selected { - box-shadow: $border-width 0 0 0 var(--wp-admin-theme-color) inset; - } -} - .is-root-container.is-exploded-mode > .block-list-appender { display: none; } 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 a08a2a5386c81..9e41fa18c7194 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 @@ -54,13 +54,13 @@ const BLOCK_ANIMATION_THRESHOLD = 200; * the ref if one is defined. * @param {Object} options Options for internal use only. * @param {boolean} options.__unstableIsHtml - * @param {boolean} options.__unstableIsDisabled Whether the block should be disabled. + * @param {boolean} options.__unstableHasOverlay Whether the block should be disabled. * * @return {Object} Props to pass to the element to mark as a block. */ export function useBlockProps( props = {}, - { __unstableIsHtml, __unstableIsDisabled = false } = {} + { __unstableIsHtml, __unstableHasOverlay = false } = {} ) { const { clientId, className, wrapperProps = {}, isAligned } = useContext( BlockListBlockContext @@ -134,9 +134,11 @@ export function useBlockProps( adjustScrolling, enableAnimation, triggerAnimationOnChange: index, - scale: isExplodedMode && isRootBlock ? 0.8 : 1, } ), - useDisabled( { isDisabled: ! __unstableIsDisabled } ), + useDisabled( { + isDisabled: + ( isExplodedMode && isRootBlock ) || __unstableHasOverlay, + } ), ] ); const blockEditContext = useBlockEditContext(); @@ -162,6 +164,8 @@ export function useBlockProps( // The wp-block className is important for editor styles. classnames( 'block-editor-block-list__block', { 'wp-block': ! isAligned, + 'has-block-overlay': + ( isExplodedMode && isRootBlock ) || __unstableHasOverlay, } ), className, props.className, diff --git a/packages/block-library/src/block/edit.js b/packages/block-library/src/block/edit.js index 8a6606ea92342..e67ac5c8cd01f 100644 --- a/packages/block-library/src/block/edit.js +++ b/packages/block-library/src/block/edit.js @@ -65,11 +65,9 @@ export default function ReusableBlockEdit( { attributes: { ref }, clientId } ) { const hasBlockOverlay = useBlockOverlayActive( clientId ); const blockProps = useBlockProps( { - className: hasBlockOverlay - ? 'block-library-block__reusable-block-container block-editor-block-content-overlay' - : 'block-library-block__reusable-block-container', + className: 'block-library-block__reusable-block-container', }, - { __unstableIsDisabled: hasBlockOverlay } + { __unstableHasOverlay: hasBlockOverlay } ); const innerBlocksProps = useInnerBlocksProps( blockProps, { diff --git a/packages/block-library/src/navigation/edit/index.js b/packages/block-library/src/navigation/edit/index.js index 0b8ed09154984..ebba40288c5e6 100644 --- a/packages/block-library/src/navigation/edit/index.js +++ b/packages/block-library/src/navigation/edit/index.js @@ -346,7 +346,6 @@ function Navigation( { backgroundColor?.slug ) ]: !! backgroundColor?.slug, [ `has-text-decoration-${ textDecoration }` ]: textDecoration, - 'block-editor-block-content-overlay': hasBlockOverlay, } ), style: { color: ! textColor?.slug && textColor?.color, @@ -354,7 +353,7 @@ function Navigation( { ! backgroundColor?.slug && backgroundColor?.color, }, }, - { __unstableIsDisabled: hasBlockOverlay } + { __unstableHasOverlay: hasBlockOverlay } ); const overlayClassnames = classnames( { diff --git a/packages/block-library/src/template-part/edit/index.js b/packages/block-library/src/template-part/edit/index.js index 5d3364258950c..5633fbccf263e 100644 --- a/packages/block-library/src/template-part/edit/index.js +++ b/packages/block-library/src/template-part/edit/index.js @@ -98,12 +98,8 @@ export default function TemplatePartEdit( { const areaObject = useTemplatePartArea( area ); const hasBlockOverlay = useBlockOverlayActive( clientId ); const blockProps = useBlockProps( - { - className: hasBlockOverlay - ? 'block-editor-block-content-overlay' - : undefined, - }, - { __unstableIsDisabled: hasBlockOverlay } + {}, + { __unstableHasOverlay: hasBlockOverlay } ); const isPlaceholder = ! slug; const isEntityAvailable = ! isPlaceholder && ! isMissing && isResolved;