Site editor outlines: try subtle outlines on block hover

WordPress · Oct 7, 2022 · eef0496 · eef0496
1 parent f5f3d8d
commit eef0496
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 1 deletion.
diff --git a/packages/block-editor/src/components/block-content-overlay/style.scss b/packages/block-editor/src/components/block-content-overlay/style.scss
@@ -1,3 +1,12 @@
+@keyframes click-overlay__fade-in-animation {
+	from {
+		opacity: 0;
+	}
+	to {
+		opacity: 1;
+	}
+}
+
 .block-editor-block-list__block.has-block-overlay {
 	cursor: default;
 
@@ -21,6 +30,11 @@
 	&:hover:not(.is-dragging-blocks)::before {
 		background: rgba(var(--wp-admin-theme-color--rgb), 0.3);
 		box-shadow: 0 0 0 $border-width var(--wp-admin-theme-color) inset;
+
+		// Animate.
+		animation: click-overlay__fade-in-animation 0.1s ease-out;
+		animation-fill-mode: forwards;
+		@include reduce-motion("animation");
 	}
 
 	&.is-selected:not(.is-dragging-blocks)::before {

diff --git a/packages/block-editor/src/components/block-list/style.scss b/packages/block-editor/src/components/block-list/style.scss
@@ -264,7 +264,7 @@
 .is-outline-mode .block-editor-block-list__block:not(.remove-outline) {
 	&.is-hovered {
 		cursor: default;
-		box-shadow: inset 0 0 0 $border-width var(--wp-admin-theme-color);
+		box-shadow: inset 0 0 0 0.5px currentColor;
 		border-radius: $radius-block-ui;
 	}