Improve the 'Show button text labels' preference by using a button wrapper component

packages/block-editor/README.md

@@ -804,10 +804,6 @@ _Related_
 
 -   <https://github.com/WordPress/gutenberg/blob/HEAD/packages/data/README.md#registerStore>
 
-### ToolSelector
-
-Undocumented declaration.
-
 ### transformStyles
 
 Applies a series of CSS rule transforms to wrap selectors inside a given class and/or rewrite URLs depending on the parameters passed.

packages/block-editor/src/components/index.js

@@ -86,7 +86,6 @@ export {
 	RichTextToolbarButton,
 	__unstableRichTextInputEvent,
 } from './rich-text';
-export { default as ToolSelector } from './tool-selector';
 export { default as __experimentalUnitControl } from './unit-control';
 export { default as URLInput } from './url-input';
 export { default as URLInputButton } from './url-input/button';

packages/block-editor/src/style.scss

@@ -43,7 +43,6 @@
 @import "./components/rich-text/style.scss";
 @import "./components/segmented-text-control/style.scss";
 @import "./components/skip-to-selected-block/style.scss";
-@import "./components/tool-selector/style.scss";
 @import "./components/url-input/style.scss";
 @import "./components/url-popover/style.scss";
 @import "./hooks/block-bindings.scss";

packages/editor/src/components/document-tools/index.js

@@ -11,10 +11,9 @@ import { useSelect, useDispatch } from '@wordpress/data';
 import { __, _x } from '@wordpress/i18n';
 import {
 	NavigableToolbar,
-	ToolSelector,
 	store as blockEditorStore,
 } from '@wordpress/block-editor';
-import { Button, ToolbarItem } from '@wordpress/components';
+import { ToolbarItem } from '@wordpress/components';
 import { listView, plus } from '@wordpress/icons';
 import { useCallback } from '@wordpress/element';
 import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts';
@@ -27,6 +26,8 @@ import { unlock } from '../../lock-unlock';
 import { store as editorStore } from '../../store';
 import EditorHistoryRedo from '../editor-history/redo';
 import EditorHistoryUndo from '../editor-history/undo';
+import ToolSelector from '../tool-selector';
+import PreferencesAwareButton from '../preferences-aware-button';
 
 const preventDefault = ( event ) => {
 	event.preventDefault();
@@ -118,7 +119,7 @@ function DocumentTools( {
 				{ ! isDistractionFree && (
 					<ToolbarItem
 						ref={ inserterSidebarToggleRef }
-						as={ Button }
+						as={ PreferencesAwareButton }
 						className="editor-document-tools__inserter-toggle"
 						variant="primary"
 						isPressed={ isInserterOpened }
@@ -158,7 +159,7 @@ function DocumentTools( {
 						/>
 						{ ! isDistractionFree && (
 							<ToolbarItem
-								as={ Button }
+								as={ PreferencesAwareButton }
 								className="editor-document-tools__document-overview-toggle"
 								icon={ listView }
 								disabled={ disableBlockTools }

packages/editor/src/components/document-tools/style.scss

@@ -25,6 +25,20 @@
 				transform: rotate(45deg);
 			}
 		}
+
+		&.has-icon {
+			min-width: $button-size-compact;
+			width: $button-size-compact;
+			height: $button-size-compact;
+			padding: 0;
+		}
+
+		.show-icon-labels &.is-showing-icon-label {
+			min-width: $button-size-compact;
+			width: auto;
+			height: $button-size-compact;
+			padding: 0 $grid-unit-10;
+		}
 	}
 
 	// Hide table of contents and list view on mobile.
@@ -39,6 +53,7 @@
 	// The Toolbar component adds different styles to buttons, so we reset them
 	// here to the original button styles
 	.editor-document-tools__left > .components-button.has-icon,
+	.editor-document-tools__left > .components-button.is-showing-icon-label,
 	.editor-document-tools__left > .components-dropdown > .components-button.has-icon {
 		// @todo override toolbar group inherited paddings from components/block-tools/style.scss.
 		// This is best fixed by making the mover control area a proper single toolbar group.
@@ -73,19 +88,6 @@
 	margin-right: $grid-unit-10;
 }
 
-.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;
-	}
-}
-
 .show-icon-labels .editor-document-tools__left > * + * {
 	margin-left: $grid-unit-10;
 }

packages/editor/src/components/editor-history/redo.js

@@ -2,7 +2,6 @@
  * WordPress dependencies
  */
 import { __, isRTL } from '@wordpress/i18n';
-import { Button } from '@wordpress/components';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { displayShortcut, isAppleOS } from '@wordpress/keycodes';
 import { redo as redoIcon, undo as undoIcon } from '@wordpress/icons';
@@ -12,6 +11,7 @@ import { forwardRef } from '@wordpress/element';
  * Internal dependencies
  */
 import { store as editorStore } from '../../store';
+import PreferencesAwareButton from '../preferences-aware-button';
 
 function EditorHistoryRedo( props, ref ) {
 	const shortcut = isAppleOS()
@@ -24,7 +24,7 @@ function EditorHistoryRedo( props, ref ) {
 	);
 	const { redo } = useDispatch( editorStore );
 	return (
-		<Button
+		<PreferencesAwareButton
 			{ ...props }
 			ref={ ref }
 			icon={ ! isRTL() ? redoIcon : undoIcon }

packages/editor/src/components/editor-history/undo.js

@@ -2,7 +2,6 @@
  * WordPress dependencies
  */
 import { __, isRTL } from '@wordpress/i18n';
-import { Button } from '@wordpress/components';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { displayShortcut } from '@wordpress/keycodes';
 import { undo as undoIcon, redo as redoIcon } from '@wordpress/icons';
@@ -12,6 +11,7 @@ import { forwardRef } from '@wordpress/element';
  * Internal dependencies
  */
 import { store as editorStore } from '../../store';
+import PreferencesAwareButton from '../preferences-aware-button';
 
 function EditorHistoryUndo( props, ref ) {
 	const hasUndo = useSelect(
@@ -20,7 +20,7 @@ function EditorHistoryUndo( props, ref ) {
 	);
 	const { undo } = useDispatch( editorStore );
 	return (
-		<Button
+		<PreferencesAwareButton
 			{ ...props }
 			ref={ ref }
 			icon={ ! isRTL() ? undoIcon : redoIcon }

packages/editor/src/components/header/style.scss

@@ -88,6 +88,7 @@
 		&::after {
 			content: attr(aria-label);
 		}
+
 		&[aria-disabled="true"] {
 			background-color: transparent;
 		}

packages/editor/src/components/preferences-aware-button/index.js

@@ -0,0 +1,42 @@
+/**
+ * External dependencies
+ */
+import clsx from 'clsx';
+
+/**
+ * WordPress dependencies
+ */
+import { useSelect } from '@wordpress/data';
+import { forwardRef } from '@wordpress/element';
+import { Button } from '@wordpress/components';
+import { store as preferencesStore } from '@wordpress/preferences';
+
+export function UnforwardedPreferencesAwareButton( props, ref ) {
+	const { showIconLabels } = useSelect( ( select ) => {
+		const { get } = select( preferencesStore );
+
+		return {
+			showIconLabels: get( 'core', 'showIconLabels' ),
+		};
+	}, [] );
+
+	const { icon, label, text, className, ...restProps } = props;
+
+	return (
+		<Button
+			icon={ showIconLabels ? null : icon }
+			label={ label }
+			text={ showIconLabels ? label : text }
+			ref={ ref }
+			className={ clsx( 'preferences-aware-button', className, {
+				'is-showing-icon-label': showIconLabels,
+			} ) }
+			{ ...restProps }
+		/>
+	);
+}
+
+export const PreferencesAwareButton = forwardRef(
+	UnforwardedPreferencesAwareButton
+);
+export default PreferencesAwareButton;

packages/editor/src/components/preferences-aware-button/style.scss

@@ -0,0 +1,4 @@
+.preferences-aware-button.is-showing-icon-label {
+	width: auto;
+	padding: $grid-unit-05;
+}

packages/block-editor/src/components/tool-selector/index.js → packages/editor/src/components/tool-selector/index.js

@@ -3,7 +3,6 @@
  */
 import {
 	Dropdown,
-	Button,
 	MenuItemsChoice,
 	SVG,
 	Path,
@@ -13,11 +12,12 @@ import { __ } from '@wordpress/i18n';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { forwardRef } from '@wordpress/element';
 import { Icon, edit as editIcon } from '@wordpress/icons';
+import { store as blockEditorStore } from '@wordpress/block-editor';
 
 /**
  * Internal dependencies
  */
-import { store as blockEditorStore } from '../../store';
+import PreferencesAwareButton from '../preferences-aware-button';
 
 const selectIcon = (
 	<SVG
@@ -40,7 +40,7 @@ function ToolSelector( props, ref ) {
 	return (
 		<Dropdown
 			renderToggle={ ( { isOpen, onToggle } ) => (
-				<Button
+				<PreferencesAwareButton
 					{ ...props }
 					ref={ ref }
 					icon={ mode === 'navigation' ? selectIcon : editIcon }

packages/editor/src/style.scss

@@ -42,6 +42,7 @@
 @import "./components/post-visibility/style.scss";
 @import "./components/posts-per-page/style.scss";
 @import "./components/post-trash/style.scss";
+@import "./components/preferences-aware-button/style.scss";
 @import "./components/preview-dropdown/style.scss";
 @import "./components/save-publish-panels/style.scss";
 @import "./components/start-page-options/style.scss";
@@ -50,3 +51,4 @@
 @import "./components/site-discussion/style.scss";
 @import "./components/table-of-contents/style.scss";
 @import "./components/template-areas/style.scss";
+@import "./components/tool-selector/style.scss";