Add thick borders to the left of blocks when they're hovred + selected.

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

@@ -116,7 +116,8 @@
 			content: "";
 			position: absolute;
 			outline: $border-width solid transparent;
-			transition: outline 0.1s linear;
+			box-shadow: none;
+			transition: outline 0.1s linear, box-shadow 0.1s linear;
 			pointer-events: none;
 
 			// Go edge-to-edge on mobile.
@@ -131,15 +132,17 @@
 	&.is-selected > .editor-block-list__block-edit::before {
 		// Use opacity to work in various editor styles.
 		outline: $border-width solid $dark-opacity-light-500;
+		box-shadow: ($border-width * -3) 0 0 0 $dark-opacity-500;
 
 		.is-dark-theme & {
 			outline-color: $light-opacity-light-500;
+			box-shadow: ($border-width * -3) 0 0 0 $light-opacity-600;
 		}
 	}
 
 	// Hover style.
 	&.is-hovered > .editor-block-list__block-edit::before {
-		outline: $border-width solid theme(outlines);
+		box-shadow: ($border-width * -3) 0 0 0 theme(outlines);
 	}
 
 	// Spotlight mode.

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

@@ -4,14 +4,16 @@
 	width: 100%;
 	overflow: auto; // Allow horizontal scrolling on mobile.
 	position: relative;
+	transition: border-color 0.1s linear, box-shadow 0.1s linear;
 
 	// Allow overflow on desktop.
 	@include break-small() {
 		overflow: inherit;
 	}
 
 	// Show a left border on the parent container.
-	border-left: $border-width solid $light-gray-500;
+	border-left: $border-width solid $dark-opacity-500;
+	box-shadow: ($border-width * -2) 0 0 0 $dark-opacity-500;
 
 	// The component is born with a border, but we only need some of them.
 	.components-toolbar {