From 11fa37a62ee12322cb8ec6155baa45e9511f9e06 Mon Sep 17 00:00:00 2001
From: Shaun Andrews <shaun@automattic.com>
Date: Wed, 20 May 2020 15:15:12 -0400
Subject: [PATCH] Playing with adding a block hover border when in select mode.

---
 .../src/components/block-list/style.scss      | 31 +++++++++++++++++++
 1 file changed, 31 insertions(+)

diff --git a/packages/block-editor/src/components/block-list/style.scss b/packages/block-editor/src/components/block-list/style.scss
index fb9a0a925c8db6..748ee85fe71518 100644
--- a/packages/block-editor/src/components/block-list/style.scss
+++ b/packages/block-editor/src/components/block-list/style.scss
@@ -160,6 +160,37 @@
 			}
 		}
 	}
+
+	// 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;
+			}
+		}
+	}
 }