DocumentTools: Use standard ToolbarButton for inserter

WordPress · Dec 26, 2024 · dd77795 · dd77795
1 parent 5af740f
commit dd77795
Show file tree

Hide file tree

Showing 2 changed files with 3 additions and 12 deletions.
diff --git 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
@@ -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;
 	}
 }