Improve block overlay

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,

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_
 

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,11 +9,17 @@
 		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 {
 		background: rgba(var(--wp-admin-theme-color--rgb), 0.1);
 		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;
+}

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;
 }

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,

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, {

packages/block-library/src/navigation/edit/index.js

@@ -346,15 +346,14 @@ function Navigation( {
 					backgroundColor?.slug
 				) ]: !! backgroundColor?.slug,
 				[ `has-text-decoration-${ textDecoration }` ]: textDecoration,
-				'block-editor-block-content-overlay': hasBlockOverlay,
 			} ),
 			style: {
 				color: ! textColor?.slug && textColor?.color,
 				backgroundColor:
 					! backgroundColor?.slug && backgroundColor?.color,
 			},
 		},
-		{ __unstableIsDisabled: hasBlockOverlay }
+		{ __unstableHasOverlay: hasBlockOverlay }
 	);
 
 	const overlayClassnames = classnames( {

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;