Move focus styles closer to original component

WordPress · Oct 20, 2022 · 6c17fae · 6c17fae
1 parent c11264e
commit 6c17fae
Show file tree

Hide file tree

Showing 4 changed files with 39 additions and 36 deletions.
diff --git a/packages/block-editor/src/components/block-mover/style.scss b/packages/block-editor/src/components/block-mover/style.scss
@@ -61,3 +61,38 @@
 		overflow: hidden;
 	}
 }
+
+// Specificity is necessary to override block toolbar button styles.
+.components-button.block-editor-block-mover-button {
+	// Focus and toggle pseudo elements.
+	&::before {
+		content: "";
+		position: absolute;
+		display: block;
+		border-radius: $radius-block-ui;
+		height: $grid-unit-40;
+
+		// Position the focus rectangle.
+		left: $grid-unit-10;
+		right: $grid-unit-10;
+		z-index: -1;
+
+		// Animate in.
+		animation: components-button__appear-animation 0.1s ease;
+		animation-fill-mode: forwards;
+		@include reduce-motion("animation");
+	}
+
+	// Don't show the focus inherited by the Button component.
+	&:focus,
+	&:focus:enabled,
+	// Override focus styles from the block toolbar
+	&:focus::before {
+		box-shadow: none;
+		outline: none;
+	}
+
+	&:focus-visible::before {
+		@include block-toolbar-button-style__focus();
+	}
+}
diff --git a/packages/block-editor/src/components/list-view/block.js b/packages/block-editor/src/components/list-view/block.js
@@ -134,7 +134,7 @@ function ListViewBlock( {
 	const { isTreeGridMounted, expand, collapse } = useListViewContext();
 
 	const hasSiblings = siblingBlockCount > 0;
-	const hasRenderedMovers = showBlockMovers && hasSiblings;
+	const hasRenderedMovers = true && hasSiblings;
 	const moverCellClassName = classnames(
 		'block-editor-list-view-block__mover-cell',
 		{ 'is-visible': isHovered || isSelected }

diff --git a/packages/block-editor/src/components/list-view/style.scss b/packages/block-editor/src/components/list-view/style.scss
@@ -249,39 +249,12 @@
 			}
 		}
 
-		// Don't show the focus inherited by the Button component.
-		&:focus:enabled {
-			box-shadow: none;
-			outline: none;
-		}
-
-		// Focus style.
-		&:focus {
-			box-shadow: none;
-			outline: none;
-		}
-
-		&:focus-visible::before {
-			@include block-toolbar-button-style__focus();
-		}
-
-		// Focus and toggle pseudo elements.
+		// Tweak size and position of focus ring.
 		&::before {
-			content: "";
-			position: absolute;
-			display: block;
-			border-radius: $radius-block-ui;
 			height: 16px;
 			min-width: 100%;
-
-			// Position the focus rectangle.
 			left: 0;
 			right: 0;
-
-			// Animate in.
-			animation: components-button__appear-animation 0.1s ease;
-			animation-fill-mode: forwards;
-			@include reduce-motion("animation");
 		}
 	}
 

diff --git a/packages/components/src/toolbar/style.scss b/packages/components/src/toolbar/style.scss
@@ -66,13 +66,8 @@
 			}
 		}
 
-		// Focus style for toolbar buttons, except block movers.
-		&:not(.block-editor-block-mover-button):focus::before {
-			@include block-toolbar-button-style__focus();
-		}
-
-		// Focus style for block mover buttons (using :focus-visible instead of :focus)
-		&.block-editor-block-mover-button:focus-visible::before {
+		// Focus style
+		&:focus::before {
 			@include block-toolbar-button-style__focus();
 		}