Use focus-visible only for block mover buttons, remaining toolbar but…

…tons use same focus styles as on trunk
WordPress · Oct 20, 2022 · 41f76b2 · 41f76b2
1 parent 39427e9
commit 41f76b2
Showing 1 changed file with 12 additions and 5 deletions.
diff --git a/packages/components/src/toolbar/style.scss b/packages/components/src/toolbar/style.scss
@@ -66,15 +66,22 @@
 			}
 		}
 
-		// Focus style.
-		&:focus-visible::before {
+		// Focus style but toolbar buttons, execpt block movers.
+		&:not(.block-editor-block-mover-button):focus::before {
 			@include block-toolbar-button-style__focus();
 		}
-		// Fallback for browsers without :focus-visible support
-		@supports not selector(:focus-visible) {
-			&:focus::before {
+
+		// Focus style for block mover buttons (using :focus-visible instead of :focus)
+		&.block-editor-block-mover-button {
+			&:focus-visible::before {
 				@include block-toolbar-button-style__focus();
 			}
+			// Fallback for browsers without :focus-visible support
+			@supports not selector(:focus-visible) {
+				&:focus::before {
+					@include block-toolbar-button-style__focus();
+				}
+			}
 		}
 
 		// Ensure the icon buttons remain square.