From 8a2d38157fbe46cf4bdb61fdb2a0a1ec78990e88 Mon Sep 17 00:00:00 2001
From: Ben Dwyer <ben@scruffian.com>
Date: Tue, 3 Mar 2026 14:23:56 +0000
Subject: [PATCH 1/2] Extract inserter-toggle mixin from duplicated button
 styles

The dark inserter toggle button styles (background, color, size,
hover state) were duplicated across three SCSS files. Extract them
into a shared inserter-toggle mixin in base-styles.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 packages/base-styles/_mixins.scss             | 13 +++++++++
 .../src/components/block-tools/style.scss     | 15 +---------
 .../default-block-appender/content.scss       | 28 ++-----------------
 3 files changed, 17 insertions(+), 39 deletions(-)

diff --git a/packages/base-styles/_mixins.scss b/packages/base-styles/_mixins.scss
index 74974a84254ec5..862d91c1400062 100644
--- a/packages/base-styles/_mixins.scss
+++ b/packages/base-styles/_mixins.scss
@@ -667,6 +667,19 @@
 	}
 }
 
+@mixin inserter-toggle() {
+	background: colors.$gray-900;
+	color: colors.$white;
+	padding: 0;
+	min-width: variables.$button-size-small;
+	height: variables.$button-size-small;
+
+	&:hover {
+		color: colors.$white;
+		background: var(--wp-admin-theme-color);
+	}
+}
+
 @mixin selected-block-outline($widthRatio: 1) {
 	outline-color: var(--wp-admin-theme-color);
 	outline-style: solid;
diff --git a/packages/block-editor/src/components/block-tools/style.scss b/packages/block-editor/src/components/block-tools/style.scss
index 8d3f5b9e2cd12e..2cdf3e7096ce39 100644
--- a/packages/block-editor/src/components/block-tools/style.scss
+++ b/packages/block-editor/src/components/block-tools/style.scss
@@ -76,20 +76,7 @@
 .block-editor-block-list__empty-block-inserter,
 .block-editor-block-list__insertion-point-inserter {
 	.block-editor-inserter__toggle.components-button.has-icon {
-		// Basic look
-		background: $gray-900;
-		color: $white;
-		padding: 0;
-
-		// TODO: Consider passing size="small" to the Inserter toggle instead.
-		// Special dimensions for this button.
-		min-width: $button-size-small;
-		height: $button-size-small;
-
-		&:hover {
-			color: $white;
-			background: var(--wp-admin-theme-color);
-		}
+		@include inserter-toggle;
 	}
 }
 
diff --git a/packages/block-editor/src/components/default-block-appender/content.scss b/packages/block-editor/src/components/default-block-appender/content.scss
index c94a8f21c17345..211202d40218d0 100644
--- a/packages/block-editor/src/components/default-block-appender/content.scss
+++ b/packages/block-editor/src/components/default-block-appender/content.scss
@@ -1,4 +1,5 @@
 @use "@wordpress/base-styles/colors" as *;
+@use "@wordpress/base-styles/mixins" as *;
 @use "@wordpress/base-styles/variables" as *;
 @use "@wordpress/base-styles/z-index" as *;
 
@@ -41,20 +42,7 @@
 	}
 
 	.block-editor-inserter__toggle.components-button.has-icon {
-		// Basic look
-		background: $gray-900;
-		color: $white;
-		padding: 0;
-
-		// TODO: Consider passing size="small" to the Inserter toggle instead.
-		// Special dimensions for this button.
-		min-width: $button-size-small;
-		height: $button-size-small;
-
-		&:hover {
-			color: $white;
-			background: var(--wp-admin-theme-color);
-		}
+		@include inserter-toggle;
 	}
 }
 
@@ -103,26 +91,16 @@
 	// treating them the same, one or both can be retired.
 	.block-editor-inserter__toggle.components-button.has-icon,
 	.block-list-appender__toggle {
+		@include inserter-toggle;
 		flex-direction: row;
 		box-shadow: none;
-		height: $button-size-small;
 		width: $button-size-small;
-		min-width: $button-size-small;
 
 		// Hide by default, then we unhide it when the selected block is a direct ancestor.
 		display: none;
 
 		// Important to override styles form Button component.
 		padding: 0 !important;
-
-		// Basic look
-		background: $gray-900;
-		color: $white;
-
-		&:hover {
-			color: $white;
-			background: var(--wp-admin-theme-color);
-		}
 	}
 
 	// This content only shows up inside the empty appender.

From 7b7bb725366c0c68a78d961a3be296ca9f81c1b9 Mon Sep 17 00:00:00 2001
From: Ben Dwyer <ben@scruffian.com>
Date: Tue, 3 Mar 2026 14:44:01 +0000
Subject: [PATCH 2/2] add comment

---
 packages/base-styles/_mixins.scss | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/packages/base-styles/_mixins.scss b/packages/base-styles/_mixins.scss
index 862d91c1400062..bbae5daa274121 100644
--- a/packages/base-styles/_mixins.scss
+++ b/packages/base-styles/_mixins.scss
@@ -668,9 +668,13 @@
 }
 
 @mixin inserter-toggle() {
+	// Basic look
 	background: colors.$gray-900;
 	color: colors.$white;
 	padding: 0;
+
+	// TODO: Consider passing size="small" to the Inserter toggle instead.
+	// Special dimensions for this button.
 	min-width: variables.$button-size-small;
 	height: variables.$button-size-small;