From 6c17fae8e9a2a169f106c0ab0a1d60b6ba531712 Mon Sep 17 00:00:00 2001
From: Marco Ciampini <marco.ciampo@gmail.com>
Date: Thu, 20 Oct 2022 20:09:52 +0200
Subject: [PATCH] Move focus styles closer to original component

---
 .../src/components/block-mover/style.scss     | 35 +++++++++++++++++++
 .../src/components/list-view/block.js         |  2 +-
 .../src/components/list-view/style.scss       | 29 +--------------
 packages/components/src/toolbar/style.scss    |  9 ++---
 4 files changed, 39 insertions(+), 36 deletions(-)

diff --git a/packages/block-editor/src/components/block-mover/style.scss b/packages/block-editor/src/components/block-mover/style.scss
index bb88d981adffab..eba7bbed683045 100644
--- 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
index 4d5e2e7ea8c49f..573231e1b23886 100644
--- 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
index cb23838c231ee9..377dee64759aba 100644
--- 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
index aed27f187ba9ce..92141486c4c73f 100644
--- 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();
 		}