From 8d8cfe0f8193329ae74cec30d25555de1e5e7fdf Mon Sep 17 00:00:00 2001
From: Kjell Reigstad <kjell@kjellr.com>
Date: Thu, 11 Jul 2019 12:26:29 -0400
Subject: [PATCH 1/2] Improve and align focus styles.

---
 assets/stylesheets/_mixins.scss               | 22 +++++++++++++++++--
 .../src/components/block-styles/style.scss    | 17 ++++++++------
 .../components/inserter-list-item/style.scss  | 11 ++++++++--
 3 files changed, 39 insertions(+), 11 deletions(-)

diff --git a/assets/stylesheets/_mixins.scss b/assets/stylesheets/_mixins.scss
index 5e92ec128eaaf..b9b198631e895 100644
--- a/assets/stylesheets/_mixins.scss
+++ b/assets/stylesheets/_mixins.scss
@@ -238,15 +238,33 @@
 	color: $dark-gray-900;
 }
 
-@mixin block-style__focus-active() {
+@mixin block-style__focus() {
 	color: $dark-gray-900;
-	box-shadow: 0 0 0 2px $blue-medium-500;
+	box-shadow: 0 0 0 1px $white, 0 0 0 3px $blue-medium-500;
 
 	// Windows High Contrast mode will show this outline, but not the box-shadow.
 	outline: 2px solid transparent;
 	outline-offset: -2px;
 }
 
+@mixin block-style__is-active() {
+	color: $dark-gray-900;
+	box-shadow: inset 0 0 0 2px $dark-gray-500;
+
+	// Windows High Contrast mode will show this outline, but not the box-shadow.
+	outline: 2px solid transparent;
+	outline-offset: -2px;
+}
+
+@mixin block-style__is-active-focus() {
+	color: $dark-gray-900;
+	box-shadow: 0 0 0 1px $white, 0 0 0 3px $blue-medium-500, inset 0 0 0 2px $dark-gray-500;
+
+	// Windows High Contrast mode will show this outline, but not the box-shadow.
+	outline: 4px solid transparent;
+	outline-offset: -4px;
+}
+
 /**
  * Applies editor left position to the selector passed as argument
  */
diff --git a/packages/block-editor/src/components/block-styles/style.scss b/packages/block-editor/src/components/block-styles/style.scss
index d818bcb15349b..988e7563878fc 100644
--- a/packages/block-editor/src/components/block-styles/style.scss
+++ b/packages/block-editor/src/components/block-styles/style.scss
@@ -11,20 +11,23 @@
 	cursor: pointer;
 	overflow: hidden;
 	border-radius: $radius-round-rectangle;
-	padding: $grid-size-small;
-
-	&.is-active {
-		@include block-style__focus-active();
-		box-shadow: 0 0 0 2px $dark-gray-500;
-	}
+	padding: $grid-size-small * 1.5;
 
 	&:focus {
-		@include block-style__focus-active();
+		@include block-style__focus();
 	}
 
 	&:hover {
 		@include block-style__hover;
 	}
+
+	&.is-active {
+		@include block-style__is-active();
+
+		&:focus {
+			@include block-style__is-active-focus();
+		}
+	}
 }
 
 .block-editor-block-styles__item-preview {
diff --git a/packages/block-editor/src/components/inserter-list-item/style.scss b/packages/block-editor/src/components/inserter-list-item/style.scss
index d9051da5c839a..5725edf2f67b7 100644
--- a/packages/block-editor/src/components/inserter-list-item/style.scss
+++ b/packages/block-editor/src/components/inserter-list-item/style.scss
@@ -51,19 +51,26 @@
 		}
 
 		&:active,
-		&.is-active,
 		&:focus {
 			position: relative;
 
 			// Show the focus style in the icon inside instead.
 			outline: none;
-			@include block-style__focus-active();
+			@include block-style__focus();
 
 			.block-editor-block-types-list__item-icon,
 			.block-editor-block-types-list__item-title {
 				color: inherit;
 			}
 		}
+
+		&.is-active {
+			@include block-style__is-active();
+
+			&:focus {
+				@include block-style__is-active-focus();
+			}
+		}
 	}
 }
 

From d238ce4e9e23db89557e2ab2a668342be7a11042 Mon Sep 17 00:00:00 2001
From: Kjell Reigstad <kjell@kjellr.com>
Date: Thu, 11 Jul 2019 12:26:50 -0400
Subject: [PATCH 2/2] Add padding to prevent focus style clipping in the block
 list.

---
 .../block-editor/src/components/block-types-list/style.scss     | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/block-editor/src/components/block-types-list/style.scss b/packages/block-editor/src/components/block-types-list/style.scss
index 73872e11ed5e0..33c6db039f1d9 100644
--- a/packages/block-editor/src/components/block-types-list/style.scss
+++ b/packages/block-editor/src/components/block-types-list/style.scss
@@ -1,6 +1,6 @@
 .block-editor-block-types-list {
 	list-style: none;
-	padding: 2px 0;
+	padding: 4px 0;
 	overflow: hidden;
 	display: flex;
 	flex-wrap: wrap;