From afe1634d58b042d91fa3991cacfbbce3a34aac2d Mon Sep 17 00:00:00 2001
From: Andrea Fercia <a.fercia@gmail.com>
Date: Tue, 21 May 2024 12:59:27 +0200
Subject: [PATCH 1/4] First pass at wrapper component for Show button text
 labels.

---
 .../src/components/document-tools/index.js    |  7 ++--
 .../src/components/editor-history/redo.js     |  4 +--
 .../src/components/editor-history/undo.js     |  4 +--
 .../editor/src/components/header/style.scss   |  8 -----
 .../preferences-aware-button/index.js         | 34 +++++++++++++++++++
 5 files changed, 42 insertions(+), 15 deletions(-)
 create mode 100644 packages/editor/src/components/preferences-aware-button/index.js

diff --git a/packages/editor/src/components/document-tools/index.js b/packages/editor/src/components/document-tools/index.js
index 6952fa34e31ae9..8887a26194d7f0 100644
--- a/packages/editor/src/components/document-tools/index.js
+++ b/packages/editor/src/components/document-tools/index.js
@@ -14,7 +14,7 @@ import {
 	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 +27,7 @@ import { unlock } from '../../lock-unlock';
 import { store as editorStore } from '../../store';
 import EditorHistoryRedo from '../editor-history/redo';
 import EditorHistoryUndo from '../editor-history/undo';
+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 }
diff --git a/packages/editor/src/components/editor-history/redo.js b/packages/editor/src/components/editor-history/redo.js
index 2ded5bfd52539a..b997ca1a90e239 100644
--- a/packages/editor/src/components/editor-history/redo.js
+++ b/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 }
diff --git a/packages/editor/src/components/editor-history/undo.js b/packages/editor/src/components/editor-history/undo.js
index 18f2cb2e7e35d6..c22c26e9c66ba3 100644
--- a/packages/editor/src/components/editor-history/undo.js
+++ b/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 }
diff --git a/packages/editor/src/components/header/style.scss b/packages/editor/src/components/header/style.scss
index 427297161ed8b9..d78486e90f56b3 100644
--- a/packages/editor/src/components/header/style.scss
+++ b/packages/editor/src/components/header/style.scss
@@ -80,14 +80,6 @@
 	.components-button.has-icon {
 		width: auto;
 
-		// Hide the button icons when labels are set to display...
-		svg {
-			display: none;
-		}
-		// ... and display labels.
-		&::after {
-			content: attr(aria-label);
-		}
 		&[aria-disabled="true"] {
 			background-color: transparent;
 		}
diff --git a/packages/editor/src/components/preferences-aware-button/index.js b/packages/editor/src/components/preferences-aware-button/index.js
new file mode 100644
index 00000000000000..1257bd74ef01db
--- /dev/null
+++ b/packages/editor/src/components/preferences-aware-button/index.js
@@ -0,0 +1,34 @@
+/**
+ * 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, ...restProps } = props;
+
+	return (
+		<Button
+			icon={ showIconLabels ? null : icon }
+			label={ label }
+			text={ showIconLabels ? label : text }
+			ref={ ref }
+			{ ...restProps }
+		/>
+	);
+}
+
+export const PreferencesAwareButton = forwardRef(
+	UnforwardedPreferencesAwareButton
+);
+export default PreferencesAwareButton;

From 0f2d032b62f5842957375eb5f4ed23fafb5e1f00 Mon Sep 17 00:00:00 2001
From: Andrea Fercia <a.fercia@gmail.com>
Date: Tue, 21 May 2024 13:53:58 +0200
Subject: [PATCH 2/4] Move ToolSelector to editor package.

---
 packages/block-editor/README.md                             | 4 ----
 packages/block-editor/src/components/index.js               | 1 -
 packages/editor/src/components/document-tools/index.js      | 2 +-
 .../src/components/tool-selector/index.js                   | 6 +++---
 .../src/components/tool-selector/style.scss                 | 0
 5 files changed, 4 insertions(+), 9 deletions(-)
 rename packages/{block-editor => editor}/src/components/tool-selector/index.js (93%)
 rename packages/{block-editor => editor}/src/components/tool-selector/style.scss (100%)

diff --git a/packages/block-editor/README.md b/packages/block-editor/README.md
index de914a553c0bca..b260b1f1e93df2 100644
--- a/packages/block-editor/README.md
+++ b/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.
diff --git a/packages/block-editor/src/components/index.js b/packages/block-editor/src/components/index.js
index 2a127feb3df1cc..ec9f0a7373efe5 100644
--- a/packages/block-editor/src/components/index.js
+++ b/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';
diff --git a/packages/editor/src/components/document-tools/index.js b/packages/editor/src/components/document-tools/index.js
index 8887a26194d7f0..000c3a40defbd5 100644
--- a/packages/editor/src/components/document-tools/index.js
+++ b/packages/editor/src/components/document-tools/index.js
@@ -11,7 +11,6 @@ import { useSelect, useDispatch } from '@wordpress/data';
 import { __, _x } from '@wordpress/i18n';
 import {
 	NavigableToolbar,
-	ToolSelector,
 	store as blockEditorStore,
 } from '@wordpress/block-editor';
 import { ToolbarItem } from '@wordpress/components';
@@ -27,6 +26,7 @@ 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 ) => {
diff --git a/packages/block-editor/src/components/tool-selector/index.js b/packages/editor/src/components/tool-selector/index.js
similarity index 93%
rename from packages/block-editor/src/components/tool-selector/index.js
rename to packages/editor/src/components/tool-selector/index.js
index 1e93a18cf6bb9e..0e2e0243ed37bd 100644
--- a/packages/block-editor/src/components/tool-selector/index.js
+++ b/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 }
diff --git a/packages/block-editor/src/components/tool-selector/style.scss b/packages/editor/src/components/tool-selector/style.scss
similarity index 100%
rename from packages/block-editor/src/components/tool-selector/style.scss
rename to packages/editor/src/components/tool-selector/style.scss

From 6f4a8e750602e42c63bb1adc29092bcbacec1594 Mon Sep 17 00:00:00 2001
From: Andrea Fercia <a.fercia@gmail.com>
Date: Tue, 21 May 2024 15:48:15 +0200
Subject: [PATCH 3/4] Adjust styling.

---
 packages/block-editor/src/style.scss          |  1 -
 .../src/components/document-tools/style.scss  | 28 ++++++++++---------
 .../preferences-aware-button/index.js         | 10 ++++++-
 .../preferences-aware-button/style.scss       |  4 +++
 packages/editor/src/style.scss                |  2 ++
 5 files changed, 30 insertions(+), 15 deletions(-)
 create mode 100644 packages/editor/src/components/preferences-aware-button/style.scss

diff --git a/packages/block-editor/src/style.scss b/packages/block-editor/src/style.scss
index 484d79e8db9fa0..21b499aa8a7af1 100644
--- a/packages/block-editor/src/style.scss
+++ b/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";
diff --git a/packages/editor/src/components/document-tools/style.scss b/packages/editor/src/components/document-tools/style.scss
index 36c643bbaa027e..9e8ac2dfafca5f 100644
--- a/packages/editor/src/components/document-tools/style.scss
+++ b/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;
 }
diff --git a/packages/editor/src/components/preferences-aware-button/index.js b/packages/editor/src/components/preferences-aware-button/index.js
index 1257bd74ef01db..78ab78a0518d47 100644
--- a/packages/editor/src/components/preferences-aware-button/index.js
+++ b/packages/editor/src/components/preferences-aware-button/index.js
@@ -1,3 +1,8 @@
+/**
+ * External dependencies
+ */
+import clsx from 'clsx';
+
 /**
  * WordPress dependencies
  */
@@ -15,7 +20,7 @@ export function UnforwardedPreferencesAwareButton( props, ref ) {
 		};
 	}, [] );
 
-	const { icon, label, text, ...restProps } = props;
+	const { icon, label, text, className, ...restProps } = props;
 
 	return (
 		<Button
@@ -23,6 +28,9 @@ export function UnforwardedPreferencesAwareButton( props, ref ) {
 			label={ label }
 			text={ showIconLabels ? label : text }
 			ref={ ref }
+			className={ clsx( 'preferences-aware-button', className, {
+				'is-showing-icon-label': showIconLabels,
+			} ) }
 			{ ...restProps }
 		/>
 	);
diff --git a/packages/editor/src/components/preferences-aware-button/style.scss b/packages/editor/src/components/preferences-aware-button/style.scss
new file mode 100644
index 00000000000000..11e713f20a154c
--- /dev/null
+++ b/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;
+}
diff --git a/packages/editor/src/style.scss b/packages/editor/src/style.scss
index 793d83e54c5488..b1e882c2fb0178 100644
--- a/packages/editor/src/style.scss
+++ b/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";

From 9294fa138491055fb72a8a51d14b04556a6033d8 Mon Sep 17 00:00:00 2001
From: Andrea Fercia <a.fercia@gmail.com>
Date: Tue, 21 May 2024 16:00:12 +0200
Subject: [PATCH 4/4] Restore original editor header styling.

---
 packages/editor/src/components/header/style.scss | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/packages/editor/src/components/header/style.scss b/packages/editor/src/components/header/style.scss
index d78486e90f56b3..2ded3fdfc33123 100644
--- a/packages/editor/src/components/header/style.scss
+++ b/packages/editor/src/components/header/style.scss
@@ -80,6 +80,15 @@
 	.components-button.has-icon {
 		width: auto;
 
+		// Hide the button icons when labels are set to display...
+		svg {
+			display: none;
+		}
+		// ... and display labels.
+		&::after {
+			content: attr(aria-label);
+		}
+
 		&[aria-disabled="true"] {
 			background-color: transparent;
 		}