Adjust top bar buttons props for showIconLabels preference.

WordPress · Jan 7, 2025 · 4468263 · 4468263
1 parent 080bf90
commit 4468263
Show file tree

Hide file tree

Showing 2 changed files with 41 additions and 9 deletions.
diff --git a/packages/edit-widgets/src/components/header/document-tools/index.js b/packages/edit-widgets/src/components/header/document-tools/index.js
@@ -8,6 +8,7 @@ import { NavigableToolbar } from '@wordpress/block-editor';
 import { listView, plus } from '@wordpress/icons';
 import { useCallback } from '@wordpress/element';
 import { useViewportMatch } from '@wordpress/compose';
+import { store as preferencesStore } from '@wordpress/preferences';
 
 /**
  * Internal dependencies
@@ -25,6 +26,7 @@ function DocumentTools() {
 		isListViewOpen,
 		inserterSidebarToggleRef,
 		listViewToggleRef,
+		showIconLabels,
 	} = useSelect( ( select ) => {
 		const {
 			isInserterOpened,
@@ -37,6 +39,10 @@ function DocumentTools() {
 			isListViewOpen: isListViewOpened(),
 			inserterSidebarToggleRef: getInserterSidebarToggleRef(),
 			listViewToggleRef: getListViewToggleRef(),
+			showIconLabels: select( preferencesStore ).get(
+				'core',
+				'showIconLabels'
+			),
 		};
 	}, [] );
 	const { setIsInserterOpened, setIsListViewOpened } =
@@ -52,6 +58,13 @@ function DocumentTools() {
 		[ setIsInserterOpened, isInserterOpen ]
 	);
 
+	/* translators: Button label text should, if possible, be under 16 characters. */
+	const longLabel = _x(
+		'Block Inserter',
+		'Generic label for block inserter button'
+	);
+	const shortLabel = ! isInserterOpen ? __( 'Add' ) : __( 'Close' );
+
 	return (
 		<NavigableToolbar
 			className="edit-widgets-header-toolbar"
@@ -69,18 +82,23 @@ function DocumentTools() {
 				} }
 				onClick={ toggleInserterSidebar }
 				icon={ plus }
-				/* translators: button label text should, if possible, be under 16
-					characters. */
-				label={ _x(
-					'Block Inserter',
-					'Generic label for block inserter button'
-				) }
+				label={ showIconLabels ? shortLabel : longLabel }
 				size="compact"
+				showTooltip={ ! showIconLabels }
+				aria-expanded={ isInserterOpen }
 			/>
 			{ isMediumViewport && (
 				<>
-					<ToolbarItem as={ UndoButton } />
-					<ToolbarItem as={ RedoButton } />
+					<ToolbarItem
+						as={ UndoButton }
+						showTooltip={ ! showIconLabels }
+						variant={ showIconLabels ? 'tertiary' : undefined }
+					/>
+					<ToolbarItem
+						as={ RedoButton }
+						showTooltip={ ! showIconLabels }
+						variant={ showIconLabels ? 'tertiary' : undefined }
+					/>
 					<ToolbarItem
 						as={ Button }
 						className="edit-widgets-header-toolbar__list-view-toggle"
@@ -91,6 +109,8 @@ function DocumentTools() {
 						onClick={ toggleListView }
 						ref={ listViewToggleRef }
 						size="compact"
+						showTooltip={ ! showIconLabels }
+						variant={ showIconLabels ? 'tertiary' : undefined }
 					/>
 				</>
 			) }

diff --git a/packages/edit-widgets/src/components/more-menu/index.js b/packages/edit-widgets/src/components/more-menu/index.js
@@ -10,10 +10,14 @@ import {
 import { useState } from '@wordpress/element';
 import { __, _x } from '@wordpress/i18n';
 import { external, moreVertical } from '@wordpress/icons';
-import { PreferenceToggleMenuItem } from '@wordpress/preferences';
+import {
+	PreferenceToggleMenuItem,
+	store as preferencesStore,
+} from '@wordpress/preferences';
 import { displayShortcut } from '@wordpress/keycodes';
 import { useShortcut } from '@wordpress/keyboard-shortcuts';
 import { useViewportMatch } from '@wordpress/compose';
+import { useSelect } from '@wordpress/data';
 
 /**
  * Internal dependencies
@@ -36,6 +40,12 @@ export default function MoreMenu() {
 
 	const isLargeViewport = useViewportMatch( 'medium' );
 
+	const showIconLabels = useSelect(
+		( select ) =>
+			select( preferencesStore ).get( 'core', 'showIconLabels' ),
+		[]
+	);
+
 	return (
 		<>
 			<DropdownMenu
@@ -48,6 +58,8 @@ export default function MoreMenu() {
 				toggleProps={ {
 					tooltipPosition: 'bottom',
 					size: 'compact',
+					showTooltip: ! showIconLabels,
+					...( showIconLabels && { variant: 'tertiary' } ),
 				} }
 			>
 				{ ( onClose ) => (