Try improving and standardizing the block styles focus + active states (

#16545)

* Improve and align focus styles.

* Add padding to prevent focus style clipping in the block list.

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
  */

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 {

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;

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();
+			}
+		}
 	}
 }