Trying to bring back the .is-hovered class.

packages/block-editor/src/components/block-list/block-wrapper.js

@@ -7,7 +7,13 @@ import { first, last, omit } from 'lodash';
 /**
  * WordPress dependencies
  */
-import { useRef, useEffect, useContext, forwardRef } from '@wordpress/element';
+import {
+	useRef,
+	useEffect,
+	useState,
+	useContext,
+	forwardRef,
+} from '@wordpress/element';
 import { focus, isTextField, placeCaretAtHorizontalEdge } from '@wordpress/dom';
 import { BACKSPACE, DELETE, ENTER } from '@wordpress/keycodes';
 import { __, sprintf } from '@wordpress/i18n';
@@ -67,13 +73,44 @@ const BlockComponent = forwardRef(
 		const fallbackRef = useRef();
 		wrapper = wrapper || fallbackRef;
 
+		// Handling isHovered
+		const [ isBlockHovered, setBlockHoveredState ] = useState( false );
+
+		/**
+		 * Sets the block state as unhovered if currently hovering. There are cases
+		 * where mouseleave may occur but the block is not hovered (multi-select),
+		 * so to avoid unnecesary renders, the state is only set if hovered.
+		 */
+		const hideHoverEffects = () => {
+			if ( isBlockHovered ) {
+				setBlockHoveredState( false );
+			}
+		};
+		/**
+		 * A mouseover event handler to apply hover effect when a pointer device is
+		 * placed within the bounds of the block. The mouseover event is preferred
+		 * over mouseenter because it may be the case that a previous mouseenter
+		 * event was blocked from being handled by a IgnoreNestedEvents component,
+		 * therefore transitioning out of a nested block to the bounds of the block
+		 * would otherwise not trigger a hover effect.
+		 *
+		 * @see https://developer.mozilla.org/en-US/docs/Web/Events/mouseenter
+		 */
+		const maybeHover = () => {
+			if ( isBlockHovered || isPartOfMultiSelection || isSelected ) {
+				return;
+			}
+			setBlockHoveredState( true );
+		};
+
 		// Provide the selected node, or the first and last nodes of a multi-
 		// selection, so it can be used to position the contextual block toolbar.
 		// We only provide what is necessary, and remove the nodes again when they
 		// are no longer selected.
 		useEffect( () => {
 			if ( isSelected || isFirstMultiSelected || isLastMultiSelected ) {
 				const node = wrapper.current;
+				hideHoverEffects();
 				setBlockNodes( ( nodes ) => ( {
 					...nodes,
 					[ clientId ]: node,
@@ -176,6 +213,7 @@ const BlockComponent = forwardRef(
 		};
 
 		const onMouseLeave = ( { which, buttons } ) => {
+			hideHoverEffects();
 			// The primary button must be pressed to initiate selection. Fall back
 			// to `which` if the standard `buttons` property is falsy. There are
 			// cases where Firefox might always set `buttons` to `0`.
@@ -202,15 +240,19 @@ const BlockComponent = forwardRef(
 				className={ classnames(
 					className,
 					props.className,
-					wrapperProps && wrapperProps.className
+					wrapperProps && wrapperProps.className,
+					{ 'is-hovered': isBlockHovered },
+					! isAligned && 'wp-block'
 				) }
 				data-block={ clientId }
 				data-type={ name }
 				data-title={ blockTitle }
+				onMouseOver={ maybeHover }
+				onFocus={ maybeHover } // pre-commit hook requires this for now -shaun
 				// Only allow shortcuts when a blocks is selected and not locked.
 				onKeyDown={ isSelected && ! isLocked ? onKeyDown : undefined }
 				// Only allow selection to be started from a selected block.
-				onMouseLeave={ isSelected ? onMouseLeave : undefined }
+				onMouseLeave={ isSelected ? onMouseLeave : hideHoverEffects }
 				tabIndex="0"
 				style={ {
 					...( wrapperProps ? wrapperProps.style : {} ),

packages/block-editor/src/components/block-list/style.scss

@@ -160,37 +160,11 @@
 			}
 		}
 	}
+}
 
-	// What if we highlighted blocks on hover while using the Select tool?
-	.is-navigate-mode & .block-editor-block-list__block:hover:not(.is-selected) {
-		// Show selection borders around every non-nested block's actual footprint.
-		&::after {
-			position: absolute;
-			z-index: 1;
-			pointer-events: none;
-			content: "";
-			top: $border-width;
-			bottom: $border-width;
-			left: $border-width;
-			right: $border-width;
-		}
-
-		&::after { // Everything else.
-			// 2px outside.
-			box-shadow: 0 0 0 1px rgba($dark-gray-primary, 0.2);
-			border-radius: $radius-block-ui - $border-width; // Border is outset, so so subtract the width to achieve correct radius.
-			transition: box-shadow 0.2s ease-out;
-			@include reduce-motion("transition");
-
-			// Windows High Contrast mode will show this outline.
-			outline: 2px solid transparent;
-
-			// Show a lighter color for dark themes.
-			.is-dark-theme & {
-				box-shadow: 0 0 0 $border-width-focus $blue-medium-focus-dark;
-			}
-		}
-	}
+// Just temporary for now to make it easier to see the effect in action
+.wp-block.is-hovered {
+	outline: 4px solid #f00 !important;
 }