From 1ba8152f09f6ffc30699145705ada748cf5e917e Mon Sep 17 00:00:00 2001
From: Lena Morita <lena@jaguchi.com>
Date: Fri, 27 Dec 2024 22:33:37 +0900
Subject: [PATCH] DocumentTools: Use standard ToolbarButton for inserter
 (#68332)

Co-authored-by: mirka <0mirka00@git.wordpress.org>
Co-authored-by: tyxla <tyxla@git.wordpress.org>
---
 packages/editor/src/components/document-tools/index.js   | 9 +++------
 packages/editor/src/components/document-tools/style.scss | 6 ------
 2 files changed, 3 insertions(+), 12 deletions(-)

diff --git a/packages/editor/src/components/document-tools/index.js b/packages/editor/src/components/document-tools/index.js
index a98def685e93a6..71a8b1b094a135 100644
--- a/packages/editor/src/components/document-tools/index.js
+++ b/packages/editor/src/components/document-tools/index.js
@@ -10,7 +10,7 @@ import { useViewportMatch } from '@wordpress/compose';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { __, _x } from '@wordpress/i18n';
 import { NavigableToolbar, ToolSelector } from '@wordpress/block-editor';
-import { Button, ToolbarItem } from '@wordpress/components';
+import { ToolbarButton, ToolbarItem } from '@wordpress/components';
 import { listView, plus } from '@wordpress/icons';
 import { useCallback } from '@wordpress/element';
 import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts';
@@ -118,9 +118,8 @@ function DocumentTools( { className, disableBlockTools = false } ) {
 		>
 			<div className="editor-document-tools__left">
 				{ ! isDistractionFree && (
-					<ToolbarItem
+					<ToolbarButton
 						ref={ inserterSidebarToggleRef }
-						as={ Button }
 						className="editor-document-tools__inserter-toggle"
 						variant="primary"
 						isPressed={ isInserterOpened }
@@ -159,8 +158,7 @@ function DocumentTools( { className, disableBlockTools = false } ) {
 							size="compact"
 						/>
 						{ ! isDistractionFree && (
-							<ToolbarItem
-								as={ Button }
+							<ToolbarButton
 								className="editor-document-tools__document-overview-toggle"
 								icon={ listView }
 								disabled={ disableBlockTools }
@@ -175,7 +173,6 @@ function DocumentTools( { className, disableBlockTools = false } ) {
 								}
 								aria-expanded={ isListViewOpen }
 								ref={ listViewToggleRef }
-								size="compact"
 							/>
 						) }
 					</>
diff --git a/packages/editor/src/components/document-tools/style.scss b/packages/editor/src/components/document-tools/style.scss
index a1abfd5abd7aef..dfafff2126d66d 100644
--- a/packages/editor/src/components/document-tools/style.scss
+++ b/packages/editor/src/components/document-tools/style.scss
@@ -74,14 +74,8 @@
 }
 
 .editor-document-tools .editor-document-tools__left > .editor-document-tools__inserter-toggle.has-icon {
-	min-width: $button-size-compact;
-	width: $button-size-compact;
-	height: $button-size-compact;
-	padding: 0;
-
 	.show-icon-labels & {
 		width: auto;
-		height: $button-size-compact;
 		padding: 0 $grid-unit-10;
 	}
 }