Select Tool: Show block borders on :hover while using the Select to…

…ol (#22508)

* Playing with adding a block hover border when in select mode.

* Trying to bring back the `.is-hovered` class.

* Porting over some changes from Ella.

* Only add listeners in navigation mode

* Making the linter happy.

Co-authored-by: Ella van Durpe <ella@vandurpe.com>

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';
@@ -65,8 +71,11 @@ const BlockComponent = forwardRef(
 			'core/block-editor'
 		);
 		const fallbackRef = useRef();
+		const isAligned = wrapperProps && !! wrapperProps[ 'data-align' ];
 		wrapper = wrapper || fallbackRef;
 
+		const [ isHovered, setHovered ] = useState( false );
+
 		// 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
@@ -190,7 +199,36 @@ const BlockComponent = forwardRef(
 			mode === 'html' && ! __unstableIsHtml ? '-visual' : '';
 		const blockElementId = `block-${ clientId }${ htmlSuffix }`;
 
+		function onMouseOver( event ) {
+			if ( event.defaultPrevented ) {
+				return;
+			}
+
+			event.preventDefault();
+
+			if ( isHovered ) {
+				return;
+			}
+
+			setHovered( true );
+		}
+
+		function onMouseOut( event ) {
+			if ( event.defaultPrevented ) {
+				return;
+			}
+
+			event.preventDefault();
+
+			if ( ! isHovered ) {
+				return;
+			}
+
+			setHovered( false );
+		}
+
 		return (
+			// eslint-disable-next-line jsx-a11y/mouse-events-have-key-events
 			<TagName
 				// Overrideable props.
 				aria-label={ blockLabel }
@@ -202,7 +240,11 @@ const BlockComponent = forwardRef(
 				className={ classnames(
 					className,
 					props.className,
-					wrapperProps && wrapperProps.className
+					wrapperProps && wrapperProps.className,
+					{
+						'is-hovered': isHovered,
+						'wp-block': ! isAligned,
+					}
 				) }
 				data-block={ clientId }
 				data-type={ name }
@@ -211,6 +253,9 @@ const BlockComponent = forwardRef(
 				onKeyDown={ isSelected && ! isLocked ? onKeyDown : undefined }
 				// Only allow selection to be started from a selected block.
 				onMouseLeave={ isSelected ? onMouseLeave : undefined }
+				// No need to have these listeners for hover class in edit mode.
+				onMouseOver={ isNavigationMode ? onMouseOver : undefined }
+				onMouseOut={ isNavigationMode ? onMouseOut : undefined }
 				tabIndex="0"
 				style={ {
 					...( wrapperProps ? wrapperProps.style : {} ),

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

@@ -122,6 +122,7 @@
 	// The primary indicator of selection in text is the native selection marker.
 	// When selecting multiple blocks, we provide an additional selection indicator.
 	.is-navigate-mode & .block-editor-block-list__block.is-selected,
+	.is-navigate-mode & .block-editor-block-list__block.is-hovered,
 	.block-editor-block-list__block.is-highlighted,
 	.block-editor-block-list__block.is-multi-selected {
 
@@ -160,8 +161,11 @@
 			}
 		}
 	}
-}
 
+	.is-navigate-mode & .block-editor-block-list__block.is-hovered:not(.is-selected)::after {
+		box-shadow: 0 0 0 1px $light-gray-ui;
+	}
+}
 
 /**
  * Block styles and alignments