Fix pattern preview focus styles (#60881)

The focus styles for the pattern previews were missing. This refactors to have a default focus style that works as a base and then overrides it for the pattern inserter since it uses a large soft shadow for the previews too. Co-authored-by: jeryj <[email protected]> Co-authored-by: scruffian <[email protected]> Co-authored-by: getdave <[email protected]>
WordPress · Apr 22, 2024 · 72c1291 · 72c1291
1 parent fa3a719
commit 72c1291
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 18 deletions.
diff --git a/packages/block-editor/src/components/block-patterns-list/style.scss b/packages/block-editor/src/components/block-patterns-list/style.scss
@@ -50,9 +50,7 @@
 		&:hover,
 		&:focus {
 			.block-editor-block-preview__container {
-				box-shadow:
-					0 0 0 2px var(--wp-block-synced-color),
-					0 15px 25px rgb(0 0 0 / 7%);
+				box-shadow: 0 0 0 2px var(--wp-block-synced-color);
 			}
 		}
 	}

diff --git a/packages/block-editor/src/components/block-preview/style.scss b/packages/block-editor/src/components/block-preview/style.scss
@@ -49,30 +49,28 @@
 	z-index: 1;
 }
 
-// Restrict these shadows to the context of the inspector.
-.interface-interface-skeleton__sidebar {
-	.block-editor-block-patterns-list__list-item {
-		.block-editor-block-preview__container {
-			box-shadow: 0 0 $border-width rgba($black, 0.1);
-		}
-		&:hover {
-			.block-editor-block-preview__container {
-				box-shadow: 0 0 0 2px $gray-900;
-			}
-		}
-	}
-}
-
 // Restrict these shadows to the context of the inserter.
 .editor-inserter-sidebar {
-	.block-editor-block-patterns-list__list-item {
+	.block-editor-block-patterns-list__item {
 		.block-editor-block-preview__container {
 			box-shadow: 0 15px 25px rgb(0 0 0 / 7%);
 		}
+		&:focus,
 		&:hover {
 			.block-editor-block-preview__container {
 				box-shadow: 0 0 0 2px $gray-900, 0 15px 25px rgb(0 0 0 / 7%);
 			}
 		}
+
+		&.block-editor-block-patterns-list__list-item-synced {
+			&:hover,
+			&:focus {
+				.block-editor-block-preview__container {
+					box-shadow:
+						0 0 0 2px var(--wp-block-synced-color),
+						0 15px 25px rgb(0 0 0 / 7%);
+				}
+			}
+		}
 	}
 }