Block Previews: Update shadows in different contexts (#60161)

WordPress · Mar 25, 2024 · f5280e5 · f5280e5
1 parent ce20894
commit f5280e5
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 11 deletions.
diff --git a/packages/block-editor/src/components/block-preview/style.scss b/packages/block-editor/src/components/block-preview/style.scss
@@ -48,3 +48,31 @@
 	bottom: 0;
 	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-preview__container {
+			box-shadow: 0 15px 25px rgb(0 0 0 / 7%);
+		}
+		&:hover {
+			.block-editor-block-preview__container {
+				box-shadow: 0 0 0 2px $gray-900, 0 15px 25px rgb(0 0 0 / 7%);
+			}
+		}
+	}
+}
diff --git a/packages/block-editor/src/components/inserter/style.scss b/packages/block-editor/src/components/inserter/style.scss
@@ -318,17 +318,6 @@ $block-inserter-tabs-height: 44px;
 	}
 }
 
-.block-editor-block-patterns-list__list-item {
-	.block-editor-block-preview__container {
-		box-shadow: 0 15px 25px rgb(0 0 0 / 7%);
-	}
-	&:hover {
-		.block-editor-block-preview__container {
-			box-shadow: 0 0 0 2px $gray-900, 0 15px 25px rgb(0 0 0 / 7%);
-		}
-	}
-}
-
 .block-editor-inserter__patterns-category-panel {
 	padding: 0 $grid-unit-20;
 	display: flex;