From 152353951b0150bb270d032bb388d33b3c417ec6 Mon Sep 17 00:00:00 2001
From: Shaun Andrews <shaun@automattic.com>
Date: Wed, 3 Jun 2020 16:16:16 -0400
Subject: [PATCH] Porting over some changes from Ella.

---
 .../components/block-list/block-wrapper.js    | 73 ++++++++++---------
 .../src/components/block-list/style.scss      |  9 +--
 2 files changed, 41 insertions(+), 41 deletions(-)

diff --git a/packages/block-editor/src/components/block-list/block-wrapper.js b/packages/block-editor/src/components/block-list/block-wrapper.js
index b45fbae71d1688..a607bc6e7f7c26 100644
--- a/packages/block-editor/src/components/block-list/block-wrapper.js
+++ b/packages/block-editor/src/components/block-list/block-wrapper.js
@@ -71,37 +71,10 @@ const BlockComponent = forwardRef(
 			'core/block-editor'
 		);
 		const fallbackRef = useRef();
+		const isAligned = wrapperProps && !! wrapperProps[ 'data-align' ];
 		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 );
-		};
+		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.
@@ -110,7 +83,6 @@ const BlockComponent = forwardRef(
 		useEffect( () => {
 			if ( isSelected || isFirstMultiSelected || isLastMultiSelected ) {
 				const node = wrapper.current;
-				hideHoverEffects();
 				setBlockNodes( ( nodes ) => ( {
 					...nodes,
 					[ clientId ]: node,
@@ -213,7 +185,6 @@ 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`.
@@ -228,6 +199,34 @@ 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 (
 			<TagName
 				// Overrideable props.
@@ -241,18 +240,20 @@ const BlockComponent = forwardRef(
 					className,
 					props.className,
 					wrapperProps && wrapperProps.className,
-					{ 'is-hovered': isBlockHovered },
-					! isAligned && 'wp-block'
+					{
+						'is-hovered': isHovered,
+						'wp-block': ! isAligned,
+					}
 				) }
 				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 : hideHoverEffects }
+				onMouseLeave={ isSelected ? onMouseLeave : undefined }
+				onMouseOver={ onMouseOver }
+				onMouseOut={ onMouseOut }
 				tabIndex="0"
 				style={ {
 					...( wrapperProps ? wrapperProps.style : {} ),
diff --git a/packages/block-editor/src/components/block-list/style.scss b/packages/block-editor/src/components/block-list/style.scss
index b880b0099304f9..708464889daeff 100644
--- a/packages/block-editor/src/components/block-list/style.scss
+++ b/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,14 +161,12 @@
 			}
 		}
 	}
-}
 
-// Just temporary for now to make it easier to see the effect in action
-.wp-block.is-hovered {
-	outline: 4px solid #f00 !important;
+	.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
  */