From 854f1c55f211bbc41d8cebd84af72f25bc2763da Mon Sep 17 00:00:00 2001
From: Kjell Reigstad <kjell@kjellr.com>
Date: Fri, 15 Mar 2019 11:27:19 -0400
Subject: [PATCH] Use a left border for hover + selection states (#14145)

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

* Add thick left border to the page title.

* Turn off block toolbar centering for alignwide blocks.

This splits the left border in two, which looks a bit weird.

* Move block breadcrump to the left side, position it on top of the block.

* Clean up the block toolbar's left border.

* Use inset borders on mobile.

* Prevent inset borders from overlapping with full-bleed content.

* Use a gray border instead of a blue one on hover.

* Use a sass variable to define the left block border width

* Fix breadcrumb potision for alignfull blocks.

* Clean up breadcrumb position for left & right-aligned blocks.

* Sync block mover animation up with the hover state.

* Darken focused block borders slightly.

From $light-gray-500 to $light-gray-800.

* Switch to using border instead of outline for block borders.

Also, change the thick left border to a solid color, to prevent weird overlap.

* Make this work better with Windows High Contrast Mode

* Adjust z-index of border + breadcrumb for child blocks.

So that they're not overlapped by the parent block's border + toolbar.

* Remove extra z-index rule from the block border.

Turns out this wasn't needed anyway.

* Remove extra z-index rule from the block border. Minor description cleanup.

* Ensure these styles are compatible with Top Toolbar mode.

* Use the new gray value for the mobile toolbar border.

* Add a matching left border to the post permalink area above the title.

* Improve border position for mobile screens, especially for elements that float left/right.

* Remove a couple unnecessary border updates from 047e1e4.

Turns out these styles can be preserved on all screen sizes with no ill effect.

* Clean up bugs related to the hover + focus states of the classic editor block.

* Classic Block toolbar icon cleanup.

Even out margins, remove white background.

* Reusable Block border cleanup.

* Keeping a light border on the classic block when it's inactive.

* Clean up borders on warning blocks.

* Switch to a solid color border color for the permalink box.

This mirrors the approach we use for block toolbars, and also ensures that we don't layer opacities and make the permalink toolbar darker than intended.

* Update z-index rule name to match the one used in the latest merge.

* Combine full-wide toolbar centering rules.

Previously, these were declared in two separate palces.

* Add a darker hover state for dark themes.

* Remove the left toolbar border on mobile screens.

This fixes some visual bugs with themes like TwentyNineteen, which include margins on either side of the block on mobile.
---
 assets/stylesheets/_variables.scss            |   1 +
 assets/stylesheets/_z-index.scss              |   1 +
 .../src/components/block-list/style.scss      | 155 +++++++++++++-----
 .../src/components/block-toolbar/style.scss   |  32 +++-
 .../src/components/warning/style.scss         |  10 ++
 .../src/block/edit-panel/style.scss           |  14 ++
 .../src/block/indicator/style.scss            |   3 +-
 .../block-library/src/classic/editor.scss     |  25 ++-
 .../src/components/visual-editor/style.scss   |  14 +-
 .../src/components/post-permalink/style.scss  |  16 +-
 .../src/components/post-title/style.scss      |  27 ++-
 11 files changed, 228 insertions(+), 70 deletions(-)

diff --git a/assets/stylesheets/_variables.scss b/assets/stylesheets/_variables.scss
index 7fda170813add..1c30d4f053d66 100644
--- a/assets/stylesheets/_variables.scss
+++ b/assets/stylesheets/_variables.scss
@@ -52,6 +52,7 @@ $resize-handler-size: 16px;
 $resize-handler-container-size: $resize-handler-size + ($grid-size-small * 2); // Make the resize handle container larger so there's a larger grabbable area.
 
 // Blocks
+$block-left-border-width: $border-width * 3;
 $block-padding: 14px; // Space between block footprint and focus boundaries. These are drawn outside the block footprint, and do not affect the size.
 $block-spacing: 4px; // Vertical space between blocks.
 $block-side-ui-width: 28px; // Width of the movers/drag handle UI.
diff --git a/assets/stylesheets/_z-index.scss b/assets/stylesheets/_z-index.scss
index 6b1a15b95ec7b..86ab07f3e28ab 100644
--- a/assets/stylesheets/_z-index.scss
+++ b/assets/stylesheets/_z-index.scss
@@ -9,6 +9,7 @@ $z-layers: (
 	".block-library-classic__toolbar": 10,
 	".block-editor-block-list__layout .reusable-block-indicator": 1,
 	".block-editor-block-list__breadcrumb": 2,
+	".editor-inner-blocks .block-editor-block-list__breadcrumb": 22,
 	".components-form-toggle__input": 1,
 	".components-panel__header.edit-post-sidebar__panel-tabs": -1,
 	".edit-post-sidebar .components-panel": -2,
diff --git a/packages/block-editor/src/components/block-list/style.scss b/packages/block-editor/src/components/block-list/style.scss
index bca7a3dc5f654..4a72cb3ed3423 100644
--- a/packages/block-editor/src/components/block-list/style.scss
+++ b/packages/block-editor/src/components/block-list/style.scss
@@ -11,7 +11,7 @@
 	// While block is being dragged, dim the slot dragged from, and hide some UI.
 	&.is-dragging {
 		.block-editor-block-list__block-edit::before {
-			outline: none;
+			border: none;
 		}
 
 		> .block-editor-block-list__block-edit > * {
@@ -105,7 +105,7 @@
 	}
 
 	/**
-	 * Block outline layout
+	 * Block border layout
 	 */
 
 	.block-editor-block-list__block-edit {
@@ -115,10 +115,15 @@
 			z-index: z-index(".block-editor-block-list__block-edit::before");
 			content: "";
 			position: absolute;
-			outline: $border-width solid transparent;
-			transition: outline 0.1s linear;
+			border: $border-width solid transparent;
+			border-left: none;
+			box-shadow: none;
+			transition: border-color 0.1s linear, box-shadow 0.1s linear;
 			pointer-events: none;
 
+			// Include a transparent outline for Windows High Contrast mode.
+			outline: $border-width solid transparent;
+
 			// Go edge-to-edge on mobile.
 			right: -$block-padding;
 			left: -$block-padding;
@@ -128,18 +133,36 @@
 	}
 
 	// Selected style.
-	&.is-selected > .block-editor-block-list__block-edit::before {
-		// Use opacity to work in various editor styles.
-		outline: $border-width solid $dark-opacity-light-500;
+	&.is-selected {
 
-		.is-dark-theme & {
-			outline-color: $light-opacity-light-500;
+		> .block-editor-block-list__block-edit::before {
+			// Use opacity to work in various editor styles.
+			border-color: $dark-opacity-light-800;
+			box-shadow: inset $block-left-border-width 0 0 0 $dark-gray-500;
+
+			.is-dark-theme & {
+				border-color: $light-opacity-light-800;
+				box-shadow: inset $block-left-border-width 0 0 0 $light-gray-600;
+			}
+
+			// Switch to outset borders on larger screens.
+			@include break-small() {
+				box-shadow: -$block-left-border-width 0 0 0 $dark-gray-500;
+
+				.is-dark-theme & {
+					box-shadow: -$block-left-border-width 0 0 0 $light-gray-600;
+				}
+			}
 		}
 	}
 
 	// Hover style.
 	&.is-hovered > .block-editor-block-list__block-edit::before {
-		outline: $border-width solid theme(outlines);
+		box-shadow: -$block-left-border-width 0 0 0 $light-gray-500;
+
+		.is-dark-theme & {
+			box-shadow: -$block-left-border-width 0 0 0 $dark-gray-600;
+		}
 	}
 
 	// Spotlight mode.
@@ -213,12 +236,23 @@
 		}
 	}
 
-	&.has-warning:not(.is-hovered) .block-editor-block-list__block-edit::before {
+	&.has-warning .block-editor-block-list__block-edit::before {
+		// Use opacity to work in various editor styles.
+		border-color: $dark-opacity-light-500;
+		border-left: $border-width solid $dark-opacity-light-500;
+
+		.is-dark-theme & {
+			border-color: $light-opacity-light-600;
+		}
+	}
+
+	&.has-warning.is-selected .editor-block-list__block-edit::before {
 		// Use opacity to work in various editor styles.
-		outline-color: $dark-opacity-light-500;
+		border-color: $dark-opacity-light-800;
+		border-left-color: transparent;
 
 		.is-dark-theme & {
-			outline-color: $light-opacity-light-500;
+			border-color: $light-opacity-light-800;
 		}
 	}
 
@@ -260,11 +294,21 @@
 
 	// Reusable blocks
 	&.is-reusable > .block-editor-block-list__block-edit::before {
+		border: $border-width dashed $dark-opacity-light-500;
+
+		.is-dark-theme & {
+			border-color: $light-opacity-light-600;
+		}
+	}
+
+	&.is-reusable.is-selected > .block-editor-block-list__block-edit::before {
 		// Use opacity to work in various editor styles.
-		outline: $border-width dashed $dark-opacity-light-500;
+		border-color: $dark-opacity-light-800;
+		border-left-color: transparent;
 
 		.is-dark-theme & {
-			outline-color: $light-opacity-light-500;
+			border-color: $light-opacity-light-800;
+			border-left-color: transparent;
 		}
 	}
 
@@ -278,7 +322,7 @@
 		// When images are floated, the block itself should collapse to zero height.
 		height: 0;
 
-		// Hide block outline when an image is floated.
+		// Hide block border when an image is floated.
 		.block-editor-block-list__block-edit {
 			&::before {
 				content: none;
@@ -296,7 +340,7 @@
 		// Position toolbar better on mobile.
 		.block-editor-block-contextual-toolbar {
 			width: auto;
-			border-bottom: $border-width solid $light-gray-500;
+			border-bottom: $border-width solid $light-gray-800;
 			bottom: auto;
 		}
 	}
@@ -424,9 +468,9 @@
 
 	// Full-wide
 	&[data-align="full"] {
-		// Position hover label on the right for the top level block.
+		// Position hover label on the left for the top level block.
 		> .block-editor-block-list__block-edit > .block-editor-block-list__breadcrumb {
-			right: 0;
+			left: 0;
 		}
 
 		// Compensate for main container padding and subtract border.
@@ -595,13 +639,16 @@
 		margin-top: $block-toolbar-height;
 		margin-right: -$block-padding;
 		margin-left: -$block-padding;
-		border-top: $border-width solid $light-gray-500;
+		border-top: $border-width solid $light-gray-800;
 		height: $block-toolbar-height;
 
 		@include break-small() {
 			display: none;
 		}
 
+		// Add a white background to prevent the block's left border from showing through.
+		background-color: $white;
+
 		// Show a shadow below the selected block to imply separation.
 		box-shadow: $shadow-below-only;
 		@include break-small() {
@@ -707,7 +754,7 @@
 
 	// Hide both the button until hovered.
 	opacity: 0;
-	transition: opacity 0.1s linear 0.1s;
+	transition: opacity 0.1s linear;
 
 	&:hover,
 	&.is-visible {
@@ -791,12 +838,12 @@
 
 		// Position toolbar below the block on mobile.
 		position: absolute;
-		bottom: $block-toolbar-height - $block-padding;
+		bottom: $block-toolbar-height - $block-padding - $border-width;
 		left: -$block-padding;
 		right: -$block-padding;
 
 		// Paint the borders on the toolbar itself on mobile.
-		border-top: $border-width solid $light-gray-500;
+		border-top: $border-width solid $light-gray-800;
 		.components-toolbar {
 			border-top: none;
 			border-bottom: none;
@@ -805,17 +852,31 @@
 		@include break-small() {
 			border-top: none;
 			.components-toolbar {
-				border-top: $border-width solid $light-gray-500;
-				border-bottom: $border-width solid $light-gray-500;
+				border-top: $border-width solid $light-gray-800;
+				border-bottom: $border-width solid $light-gray-800;
 			}
 		}
 	}
 
-	// Floated items have special needs for the contextual toolbar position.
+	// Floated items have special needs for the contextual toolbar position + the thicker left border.
 	&[data-align="left"] .block-editor-block-contextual-toolbar,
 	&[data-align="right"] .block-editor-block-contextual-toolbar {
 		margin-bottom: $border-width;
 		margin-top: -$block-toolbar-height;
+
+		// Display the box-shadow on the parent element.
+		box-shadow: -$block-left-border-width 0 0 0 $dark-gray-500;
+		.is-dark-theme & {
+			box-shadow: -$block-left-border-width 0 0 0 $light-gray-600;
+		}
+
+		@include break-small() {
+			box-shadow: none;
+		}
+
+		.editor-block-toolbar {
+			border-left: none;
+		}
 	}
 
 	// Make block toolbar full width on mobile.
@@ -903,7 +964,8 @@
 
 		// This prevents floats from messing up the position of the block toolbar on floats-adjacent blocks when selected.
 		position: absolute;
-		left: 0;
+		left: $border-width;
+		top: $border-width;
 	}
 }
 
@@ -917,20 +979,24 @@
 	line-height: 1;
 	z-index: z-index(".block-editor-block-list__breadcrumb");
 
-	// Position in the top right of the border.
-	right: -$block-padding;
-	top: -$block-padding - $border-width;
+	// Position in the top left of the border.
+	left: -$block-padding - $block-left-border-width;
+	top: (($block-padding * -2) - $block-left-border-width);
 
 	.components-toolbar {
 		padding: 0;
 		border: none;
-		background: transparent;
 		line-height: 1;
 		font-family: $default-font;
 		font-size: 11px;
 		padding: 4px 4px;
-		background: theme(outlines);
-		color: $white;
+		background: $light-gray-500;
+		color: $dark-gray-900;
+
+		.is-dark-theme & {
+			background: $dark-gray-600;
+			color: $white;
+		}
 
 		// Animate in
 		.block-editor-block-list__block:hover & {
@@ -939,11 +1005,20 @@
 		}
 	}
 
-	// Position the breadcrumb closer on mobile.
-	[data-align="left"] &,
+	// Position this above the toolbar of parent blocks.
+	.editor-inner-blocks & {
+		z-index: z-index(".editor-inner-blocks .block-editor-block-list__breadcrumb");
+	}
+
+	// Remove negative left breadcrumb position for left aligned blocks.
+	[data-align="left"] & {
+		left: 0;
+	}
+
+	// Right-align the breadcrumb for right-aligned blocks.
 	[data-align="right"] & {
+		left: auto;
 		right: 0;
-		top: 0;
 	}
 }
 
@@ -992,12 +1067,12 @@
 .block-editor-block-list__block .block-editor-warning {
 	z-index: z-index(".block-editor-warning");
 	position: relative;
-	margin-right: -$block-padding - $border-width;
-	margin-left: -$block-padding - $border-width;
+	margin-right: -$block-padding;
+	margin-left: -$block-padding;
 
 	// Pull the warning upwards to the edge, and add a negative bottom margin to compensate.
-	margin-bottom: -$block-padding - $border-width;
-	transform: translateY(-$block-padding - $border-width);
+	margin-bottom: -$block-padding;
+	transform: translateY(-$block-padding);
 
 	// Bigger padding on mobile where blocks are edge to edge.
 	padding: 10px $block-padding;
diff --git a/packages/block-editor/src/components/block-toolbar/style.scss b/packages/block-editor/src/components/block-toolbar/style.scss
index 4b426de6f11d6..e0fbc6601ee36 100644
--- a/packages/block-editor/src/components/block-toolbar/style.scss
+++ b/packages/block-editor/src/components/block-toolbar/style.scss
@@ -4,22 +4,40 @@
 	width: 100%;
 	overflow: auto; // Allow horizontal scrolling on mobile.
 	position: relative;
+	transition: border-color 0.1s linear, box-shadow 0.1s linear;
+	border-left: $border-width solid $light-gray-800;
 
-	// Allow overflow on desktop.
 	@include break-small() {
+		// Allow overflow on desktop.
 		overflow: inherit;
-	}
 
-	// Show a left border on the parent container.
-	border-left: $border-width solid $light-gray-500;
+		// Show a left border on the parent container.
+		border-left: none;
+		box-shadow: -$block-left-border-width 0 0 0 $dark-gray-500;
+
+		// Show a lighter version for dark themes.
+		.is-dark-theme & {
+			box-shadow: -$block-left-border-width 0 0 0 $light-gray-600;
+		}
+	}
 
 	// The component is born with a border, but we only need some of them.
 	.components-toolbar {
 		border: 0;
-		border-top: $border-width solid $light-gray-500;
-		border-bottom: $border-width solid $light-gray-500;
+		border-top: $border-width solid $light-gray-800;
+		border-bottom: $border-width solid $light-gray-800;
 
 		// Add a right border to show as separator in the block toolbar.
-		border-right: $border-width solid $light-gray-500;
+		border-right: $border-width solid $light-gray-800;
+	}
+
+	// Add a left border and adjust the color for Top Toolbar mode.
+	.has-fixed-toolbar & {
+		box-shadow: none;
+		border-left: $border-width solid $light-gray-500;
+
+		.components-toolbar {
+			border-color: $light-gray-500;
+		}
 	}
 }
diff --git a/packages/block-editor/src/components/warning/style.scss b/packages/block-editor/src/components/warning/style.scss
index 27f571d6a7a77..6af2f5e9a7704 100644
--- a/packages/block-editor/src/components/warning/style.scss
+++ b/packages/block-editor/src/components/warning/style.scss
@@ -13,6 +13,16 @@
 		background-color: transparent;
 	}
 
+	.is-selected & {
+		// Use opacity to work in various editor styles.
+		border-color: $dark-opacity-light-800;
+		border-left-color: transparent;
+
+		.is-dark-theme & {
+			border-color: $light-opacity-light-800;
+		}
+	}
+
 	.block-editor-warning__message {
 		line-height: $default-line-height;
 		font-family: $default-font;
diff --git a/packages/block-library/src/block/edit-panel/style.scss b/packages/block-library/src/block/edit-panel/style.scss
index 0b899669c08f2..bb22417472a37 100644
--- a/packages/block-library/src/block/edit-panel/style.scss
+++ b/packages/block-library/src/block/edit-panel/style.scss
@@ -12,6 +12,10 @@
 	padding: $grid-size $block-padding;
 	position: relative;
 
+	// Use opacity to work in various editor styles.
+	border: $border-width dashed $dark-opacity-light-500;
+	border-bottom: none;
+
 	// Show a smaller padding when nested.
 	.block-editor-block-list__layout & {
 		margin: 0 (-$block-padding);
@@ -58,3 +62,13 @@
 		}
 	}
 }
+
+.editor-block-list__layout .is-selected .reusable-block-edit-panel {
+	border-color: $dark-opacity-light-800;
+	border-left-color: transparent;
+
+	.is-dark-theme & {
+		border-color: $light-opacity-light-800;
+		border-left-color: transparent;
+	}
+}
diff --git a/packages/block-library/src/block/indicator/style.scss b/packages/block-library/src/block/indicator/style.scss
index 2e02c866c3d88..08ebbce4674fa 100644
--- a/packages/block-library/src/block/indicator/style.scss
+++ b/packages/block-library/src/block/indicator/style.scss
@@ -1,8 +1,7 @@
 .block-editor-block-list__layout .reusable-block-indicator {
 	background: $white;
-	border-left: $border-width dashed $light-gray-500;
+	border: $border-width dashed $light-gray-500;
 	color: $dark-gray-500;
-	border-bottom: $border-width dashed $light-gray-500;
 	top: -$block-padding;
 	height: 30px;
 	padding: $grid-size-small;
diff --git a/packages/block-library/src/classic/editor.scss b/packages/block-library/src/classic/editor.scss
index 2bb0bd4f77a7f..758609eb9d549 100644
--- a/packages/block-library/src/classic/editor.scss
+++ b/packages/block-library/src/classic/editor.scss
@@ -207,7 +207,16 @@
 	}
 
 	.block-editor-block-list__block-edit::before {
-		outline: $border-width solid #e2e4e7;
+		transition: border-color 0.1s linear, box-shadow 0.1s linear;
+		border: $border-width solid $light-gray-500;
+
+		// Windows High Contrast mode will show this outline.
+		outline: $border-width solid transparent;
+	}
+
+	&.is-selected .block-editor-block-list__block-edit::before {
+		border-color: $light-gray-800;
+		border-left-color: transparent;
 	}
 
 	// Don't show block type label for classic block
@@ -228,10 +237,17 @@ div[data-type="core/freeform"] .block-editor-block-contextual-toolbar + div {
 	z-index: z-index(".block-library-classic__toolbar");
 	top: $block-padding;
 	transform: translateY(-$block-padding);
+	border: $border-width solid $light-gray-500;
+	border-bottom: none;
 
 	// On mobile, toolbars go edge to edge.
 	padding: 0 $block-padding;
 
+	.is-selected & {
+		border-color: $light-gray-800;
+		border-left-color: transparent;
+	}
+
 	@include break-small() {
 		padding: 0;
 	}
@@ -289,12 +305,13 @@ div[data-type="core/freeform"] .block-editor-block-contextual-toolbar + div {
 		}
 		.block-editor-block-contextual-toolbar {
 			float: right;
-			margin-right: $icon-button-size - $block-padding + $border-width;
+			margin-right: $icon-button-size - $block-padding + ($border-width * 3);
 			transform: translateY(-#{ $block-padding - $border-width });
 			top: $block-padding;
 
 			.block-editor-block-toolbar {
 				border: none;
+				box-shadow: none;
 
 				// Match the TinyMCE "mobile" breakpoint buttons alignment.
 				margin-top: 3px;
@@ -309,6 +326,10 @@ div[data-type="core/freeform"] .block-editor-block-contextual-toolbar + div {
 					margin-top: $grid-size-small;
 					margin-bottom: $grid-size-small;
 				}
+
+				.components-toolbar__control.components-button:hover {
+					background-color: transparent;
+				}
 			}
 
 			.components-toolbar {
diff --git a/packages/edit-post/src/components/visual-editor/style.scss b/packages/edit-post/src/components/visual-editor/style.scss
index aa3ee7cbc7995..1ba9ce38e0113 100644
--- a/packages/edit-post/src/components/visual-editor/style.scss
+++ b/packages/edit-post/src/components/visual-editor/style.scss
@@ -27,12 +27,13 @@
 			margin-right: -$block-side-ui-width;
 		}
 
-		// Center the block toolbar on wide and full-wide blocks.
+		// Center the block toolbar on full-wide blocks.
 		// Use specific selector to not affect nested block toolbars.
-		&[data-align="wide"] > .block-editor-block-list__block-edit > .block-editor-block-contextual-toolbar,
 		&[data-align="full"] > .block-editor-block-list__block-edit > .block-editor-block-contextual-toolbar {
-			width: calc(100% + #{ $block-padding * 2 + $border-width * 2 }); // Matches the negative margins applied to parent blocks.
 			height: 0; // This collapses the container to an invisible element without margin.
+			width: 100%;
+			margin-left: 0;
+			margin-right: 0;
 			text-align: center;
 
 			// This float rule takes the toolbar out of the flow, without it having to be absolute positioned.
@@ -49,13 +50,6 @@
 				position: relative;
 			}
 		}
-
-		// The centering math is simpler for a fullwide block, which doesn't have any block padding.
-		&[data-align="full"] > .block-editor-block-list__block-edit > .editor-block-contextual-toolbar {
-			width: 100%;
-			margin-left: 0;
-			margin-right: 0;
-		}
 	}
 }
 
diff --git a/packages/editor/src/components/post-permalink/style.scss b/packages/editor/src/components/post-permalink/style.scss
index c35abcb009dfc..5b13e75843994 100644
--- a/packages/editor/src/components/post-permalink/style.scss
+++ b/packages/editor/src/components/post-permalink/style.scss
@@ -7,11 +7,21 @@
 	font-size: $default-font-size;
 	height: 40px;
 	white-space: nowrap;
-
-	// Use opacity to work in various editor styles.
-	border: $border-width solid $dark-opacity-light-500;
+	border: $border-width solid $light-gray-800;
 	background-clip: padding-box;
 
+	// Show a thick left border to match the left border on the title field.
+	border-left: 0;
+	box-shadow: -$block-left-border-width 0 0 0 $dark-gray-500;
+
+	// Use a lighter border for dark themes.
+	.is-dark-theme & {
+		box-shadow: -$block-left-border-width 0 0 0 $light-gray-600;
+	}
+
+	// Include transparent outline for Windows High Contrast mode.
+	outline: $border-width solid transparent;
+
 	// Put toolbar snugly to edge on mobile.
 	margin-left: -$block-padding - $border-width; // This hides the border off the edge of the screen.
 	margin-right: -$block-padding - $border-width;
diff --git a/packages/editor/src/components/post-title/style.scss b/packages/editor/src/components/post-title/style.scss
index 71fc698dea202..a065097cd6465 100644
--- a/packages/editor/src/components/post-title/style.scss
+++ b/packages/editor/src/components/post-title/style.scss
@@ -16,7 +16,7 @@
 		font-family: $editor-font;
 		line-height: $default-line-height;
 		color: $dark-gray-900;
-		transition: border 0.1s ease-out;
+		transition: border 0.1s ease-out, box-shadow 0.1s linear;
 		padding: #{ $block-padding + 5px } $block-padding;
 		word-break: keep-all;
 
@@ -25,8 +25,12 @@
 		border-left-width: 0;
 		border-right-width: 0;
 
+		// Include transparent outline for Windows High Contrast mode.
+		outline: $border-width solid transparent;
+
 		@include break-small() {
 			border-width: $border-width;
+			border-left-width: 0;
 		}
 
 		// Match h1 heading.
@@ -49,18 +53,29 @@
 
 	&:not(.is-focus-mode) {
 		&.is-selected .editor-post-title__input {
-			// use opacity to work in various editor styles
-			border-color: $dark-opacity-light-500;
+			// use opacity to work in various editor styles.
+			border-color: $dark-opacity-light-800;
+			box-shadow: inset $block-left-border-width 0 0 0 $dark-gray-500;
 
 			.is-dark-theme & {
-				border-color: $light-opacity-light-500;
+				border-color: $light-opacity-light-800;
+				box-shadow: inset $block-left-border-width 0 0 0 $light-gray-600;
+			}
+
+			// Switch to outset borders on larger screens.
+			@include break-small() {
+				box-shadow: -$block-left-border-width 0 0 0 $dark-gray-500;
+
+				.is-dark-theme & {
+					box-shadow: -$block-left-border-width 0 0 0 $light-gray-600;
+				}
 			}
 		}
 	}
 
-	&:not(.is-focus-mode):not(.has-fixed-toolbar) {
+	&:not(.is-focus-mode):not(.has-fixed-toolbar):not(.is-selected) {
 		.editor-post-title__input:hover {
-			border-color: theme(outlines);
+			box-shadow: -$block-left-border-width 0 0 0 $light-gray-500;
 		}
 	}