Display labels instead of icons in top toolbar.

packages/block-editor/src/components/block-navigation/dropdown.js

@@ -53,7 +53,8 @@ function BlockNavigationDropdownToggle( {
 			icon={ MenuIcon }
 			aria-expanded={ isOpen }
 			onClick={ isEnabled ? onToggle : undefined }
-			label={ __( 'Block navigation' ) }
+			/* translators: button label text should, if possible, be under 16 characters. */
+			label={ __( 'Outline' ) }
 			className="block-editor-block-navigation"
 			shortcut={ shortcut }
 			aria-disabled={ ! isEnabled }

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

@@ -32,6 +32,7 @@ export default function PreviewOptions( {
 		isTertiary: true,
 		className: 'block-editor-post-preview__button-toggle',
 		disabled: ! isEnabled,
+		/* translators: button label text should, if possible, be under 16 characters. */
 		children: __( 'Preview' ),
 	};
 	return (

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

@@ -45,13 +45,14 @@ function ToolSelector( props, ref ) {
 					icon={ isNavigationTool ? selectIcon : editIcon }
 					aria-expanded={ isOpen }
 					onClick={ onToggle }
-					label={ __( 'Tools' ) }
+					/* translators: button label text should, if possible, be under 16 characters. */
+					label={ __( 'Modes' ) }
 				/>
 			) }
 			position="bottom right"
 			renderContent={ () => (
 				<>
-					<NavigableMenu role="menu" aria-label={ __( 'Tools' ) }>
+					<NavigableMenu role="menu" aria-label={ __( 'Modes' ) }>
 						<MenuItemsChoice
 							value={ isNavigationTool ? 'select' : 'edit' }
 							onSelect={ onSwitchMode }

packages/components/src/dropdown-menu/index.js

@@ -129,7 +129,7 @@ function DropdownMenu( {
 						aria-haspopup="true"
 						aria-expanded={ isOpen }
 						label={ label }
-						showTooltip
+						showTooltip={ !! toggleProps?.showTooltip }
 					>
 						{ mergedToggleProps.children }
 					</Button>

packages/e2e-test-utils/src/toggle-more-menu.js

@@ -3,6 +3,6 @@
  */
 export async function toggleMoreMenu() {
 	await expect( page ).toClick(
-		'.edit-post-more-menu [aria-label="More tools & options"]'
+		'.edit-post-more-menu [aria-label="Options"]'
 	);
 }

packages/e2e-tests/specs/editor/blocks/columns.test.js

@@ -18,7 +18,7 @@ describe( 'Columns', () => {
 		await insertBlock( 'Columns' );
 		await closeGlobalBlockInserter();
 		await page.click( '[aria-label="Two columns; equal split"]' );
-		await page.click( '[aria-label="Block navigation"]' );
+		await page.click( '[aria-label="Outline"]' );
 		const columnBlockMenuItem = (
 			await page.$x(
 				'//button[contains(concat(" ", @class, " "), " block-editor-block-navigation-block-select-button ")][text()="Column"]'

packages/e2e-tests/specs/editor/blocks/cover.test.js

@@ -24,7 +24,7 @@ describe( 'Cover', () => {
 		);
 
 		// Select the cover block.By default the child paragraph gets selected.
-		await page.click( 'button[aria-label="Block navigation"]' );
+		await page.click( 'button[aria-label="Outline"]' );
 		await page.click(
 			'.block-editor-block-navigation-block__contents-container button'
 		);

packages/e2e-tests/specs/editor/various/block-hierarchy-navigation.test.js

@@ -35,7 +35,7 @@ describe( 'Navigating the block hierarchy', () => {
 		await page.keyboard.type( 'First column' );
 
 		// Navigate to the columns blocks.
-		await page.click( '[aria-label="Block navigation"]' );
+		await page.click( '[aria-label="Outline"]' );
 		const columnsBlockMenuItem = (
 			await page.$x(
 				"//button[contains(@class,'block-editor-block-navigation-block-select-button') and contains(text(), 'Columns')]"
@@ -54,7 +54,7 @@ describe( 'Navigating the block hierarchy', () => {
 		await page.keyboard.type( '3' );
 
 		// Navigate to the last column block.
-		await page.click( '[aria-label="Block navigation"]' );
+		await page.click( '[aria-label="Outline"]' );
 		const lastColumnsBlockMenuItem = (
 			await page.$x(
 				"//button[contains(@class,'block-editor-block-navigation-block-select-button') and contains(text(), 'Column')]"
@@ -159,8 +159,8 @@ describe( 'Navigating the block hierarchy', () => {
 		// Unselect the blocks
 		await page.click( '.editor-post-title' );
 
-		// Try selecting the group block using the block navigation
-		await page.click( '[aria-label="Block navigation"]' );
+		// Try selecting the group block using the Outline
+		await page.click( '[aria-label="Outline"]' );
 		const groupMenuItem = (
 			await page.$x(
 				"//button[contains(@class,'block-editor-block-navigation-block-select-button') and contains(text(), 'Group')]"

packages/e2e-tests/specs/editor/various/dropdown-menu.test.js

@@ -3,10 +3,9 @@
  */
 import { createNewPost, pressKeyTimes } from '@wordpress/e2e-test-utils';
 
-const moreMenuButtonSelector =
-	'.components-button[aria-label="More tools & options"]';
+const moreMenuButtonSelector = '.components-button[aria-label="Options"]';
 const moreMenuDropdownSelector =
-	'.components-dropdown-menu__menu[aria-label="More tools & options"]';
+	'.components-dropdown-menu__menu[aria-label="Options"]';
 const menuItemsSelector = [ 'menuitem', 'menuitemcheckbox', 'menuitemradio' ]
 	.map( ( role ) => `${ moreMenuDropdownSelector } [role="${ role }"]` )
 	.join( ',' );

packages/edit-post/src/components/header/fullscreen-mode-close/index.js

@@ -12,7 +12,7 @@ import { __ } from '@wordpress/i18n';
 import { addQueryArgs } from '@wordpress/url';
 import { wordpress } from '@wordpress/icons';
 
-function FullscreenModeClose() {
+function FullscreenModeClose( { showTooltip } ) {
 	const { isActive, isRequestingSiteIcon, postType, siteIconUrl } = useSelect(
 		( select ) => {
 			const { getCurrentPostType } = select( 'core/editor' );
@@ -61,7 +61,7 @@ function FullscreenModeClose() {
 				post_type: postType.slug,
 			} ) }
 			label={ get( postType, [ 'labels', 'view_items' ], __( 'Back' ) ) }
-			showTooltip
+			showTooltip={ showTooltip }
 		>
 			{ buttonIcon }
 		</Button>

packages/edit-post/src/components/header/header-toolbar/index.js

@@ -15,7 +15,13 @@ import {
 	EditorHistoryRedo,
 	EditorHistoryUndo,
 } from '@wordpress/editor';
-import { Button, ToolbarItem } from '@wordpress/components';
+import {
+	Button,
+	DropdownMenu,
+	ToolbarItem,
+	MenuItemsChoice,
+	MenuGroup,
+} from '@wordpress/components';
 import { plus } from '@wordpress/icons';
 import { useRef } from '@wordpress/element';
 
@@ -28,6 +34,8 @@ function HeaderToolbar() {
 		isInserterOpened,
 		isTextModeEnabled,
 		previewDeviceType,
+		showIconLabels,
+		isNavigationTool,
 	} = useSelect( ( select ) => {
 		const {
 			hasInserterItems,
@@ -52,9 +60,15 @@ function HeaderToolbar() {
 			previewDeviceType: select(
 				'core/edit-post'
 			).__experimentalGetPreviewDeviceType(),
+			showIconLabels: select( 'core/edit-post' ).isFeatureActive(
+				'showIconLabels'
+			),
+			isNavigationTool: select( 'core/block-editor' ).isNavigationMode(),
 		};
 	}, [] );
 	const isLargeViewport = useViewportMatch( 'medium' );
+	const isWideViewport = useViewportMatch( 'wide' );
+	const isSmallViewport = useViewportMatch( 'small', '<' );
 
 	const displayBlockToolbar =
 		! isLargeViewport || previewDeviceType !== 'Desktop' || hasFixedToolbar;
@@ -65,6 +79,30 @@ function HeaderToolbar() {
 		: /* translators: accessibility text for the editor toolbar when Top Toolbar is off */
 		  __( 'Document tools' );
 
+	const { setNavigationMode } = useDispatch( 'core/block-editor' );
+
+	const onSwitchMode = ( mode ) => {
+		setNavigationMode( mode === 'edit' ? false : true );
+	};
+
+	const overflowItems = (
+		<>
+			<ToolbarItem
+				as={ TableOfContents }
+				hasOutlineItemsDisabled={ isTextModeEnabled }
+				repositionDropdown={ showIconLabels && ! isWideViewport }
+				showTooltip={ ! showIconLabels }
+				isTertiary={ showIconLabels }
+			/>
+			<ToolbarItem
+				as={ BlockNavigationDropdown }
+				isDisabled={ isTextModeEnabled }
+				showTooltip={ ! showIconLabels }
+				isTertiary={ showIconLabels }
+			/>
+		</>
+	);
+
 	return (
 		<NavigableToolbar
 			className="edit-post-header-toolbar"
@@ -89,27 +127,83 @@ function HeaderToolbar() {
 				} }
 				disabled={ ! isInserterEnabled }
 				icon={ plus }
+				/* translators: button label text should, if possible, be under 16
+			characters. */
 				label={ _x(
 					'Add block',
 					'Generic label for block inserter button'
 				) }
-			/>
-			{ isLargeViewport && (
-				<ToolbarItem
-					as={ ToolSelector }
-					disabled={ isTextModeEnabled }
-				/>
+				showTooltip={ ! showIconLabels }
+			>
+				{ showIconLabels && __( 'Add' ) }
+			</ToolbarItem>
+			{ ( isWideViewport || ! showIconLabels ) && (
+				<>
+					{ isLargeViewport && (
+						<ToolbarItem
+							as={ ToolSelector }
+							showTooltip={ ! showIconLabels }
+							isTertiary={ showIconLabels }
+							disabled={ isTextModeEnabled }
+						/>
+					) }
+					<ToolbarItem
+						as={ EditorHistoryUndo }
+						showTooltip={ ! showIconLabels }
+						isTertiary={ showIconLabels }
+					/>
+					<ToolbarItem
+						as={ EditorHistoryRedo }
+						showTooltip={ ! showIconLabels }
+						isTertiary={ showIconLabels }
+					/>
+					{ overflowItems }
+				</>
+			) }
+			{ ! isWideViewport && ! isSmallViewport && showIconLabels && (
+				<DropdownMenu
+					position="bottom right"
+					label={
+						/* translators: button label text should, if possible, be under 16
+	characters. */
+						__( 'Tools' )
+					}
+				>
+					{ () => (
+						<div className="edit-post-header__dropdown">
+							<MenuGroup label={ __( 'Modes' ) }>
+								<MenuItemsChoice
+									value={
+										isNavigationTool ? 'select' : 'edit'
+									}
+									onSelect={ onSwitchMode }
+									choices={ [
+										{
+											value: 'edit',
+											label: __( 'Edit' ),
+										},
+										{
+											value: 'select',
+											label: __( 'Select' ),
+										},
+									] }
+								/>
+							</MenuGroup>
+							<MenuGroup label={ __( 'Edit' ) }>
+								<EditorHistoryUndo
+									showTooltip={ ! showIconLabels }
+									isTertiary={ showIconLabels }
+								/>
+								<EditorHistoryRedo
+									showTooltip={ ! showIconLabels }
+									isTertiary={ showIconLabels }
+								/>
+							</MenuGroup>
+							<MenuGroup>{ overflowItems }</MenuGroup>
+						</div>
+					) }
+				</DropdownMenu>
 			) }
-			<ToolbarItem as={ EditorHistoryUndo } />
-			<ToolbarItem as={ EditorHistoryRedo } />
-			<ToolbarItem
-				as={ TableOfContents }
-				hasOutlineItemsDisabled={ isTextModeEnabled }
-			/>
-			<ToolbarItem
-				as={ BlockNavigationDropdown }
-				isDisabled={ isTextModeEnabled }
-			/>
 			{ displayBlockToolbar && (
 				<div className="edit-post-header-toolbar__block-toolbar">
 					<BlockToolbar hideDragHandle />

packages/edit-post/src/components/header/header-toolbar/style.scss

@@ -113,3 +113,27 @@
 	height: 32px;
 	padding: 0;
 }
+
+.show-icon-labels {
+	// Always display block toolbar under main toolbar when text labels are visible
+	.edit-post-header-toolbar__block-toolbar {
+		@include break-wide {
+			position: absolute;
+			top: $header-height + $border-width;
+			left: 0;
+			right: 0;
+			border-bottom: $border-width solid $gray-200;
+			padding: 0;
+			background-color: $white;
+
+			.block-editor-block-toolbar .components-toolbar-group,
+			.block-editor-block-toolbar .components-toolbar {
+				height: auto;
+				padding: 0;
+			}
+		}
+	}
+	.edit-post-header-toolbar__inserter-toggle.edit-post-header-toolbar__inserter-toggle.edit-post-header-toolbar__inserter-toggle {
+		height: 36px;
+	}
+}

packages/edit-post/src/components/header/index.js

@@ -7,6 +7,7 @@ import {
 	PinnedItems,
 	__experimentalMainDashboardButton as MainDashboardButton,
 } from '@wordpress/interface';
+import { useViewportMatch } from '@wordpress/compose';
 
 /**
  * Internal dependencies
@@ -18,17 +19,27 @@ import PostPublishButtonOrToggle from './post-publish-button-or-toggle';
 import { default as DevicePreview } from '../device-preview';
 
 function Header( { setEntitiesSavedStatesCallback } ) {
-	const { hasActiveMetaboxes, isPublishSidebarOpened, isSaving } = useSelect(
+	const {
+		hasActiveMetaboxes,
+		isPublishSidebarOpened,
+		isSaving,
+		showIconLabels,
+	} = useSelect(
 		( select ) => ( {
 			hasActiveMetaboxes: select( 'core/edit-post' ).hasMetaBoxes(),
 			isPublishSidebarOpened: select(
 				'core/edit-post'
 			).isPublishSidebarOpened(),
 			isSaving: select( 'core/edit-post' ).isSavingMetaBoxes(),
+			showIconLabels: select( 'core/edit-post' ).isFeatureActive(
+				'showIconLabels'
+			),
 		} ),
 		[]
 	);
 
+	const isLargeViewport = useViewportMatch( 'large' );
+
 	return (
 		<div className="edit-post-header">
 			<MainDashboardButton.Slot>
@@ -47,6 +58,7 @@ function Header( { setEntitiesSavedStatesCallback } ) {
 					<PostSavedState
 						forceIsDirty={ hasActiveMetaboxes }
 						forceIsSaving={ isSaving }
+						showIconLabels={ showIconLabels }
 					/>
 				) }
 				<DevicePreview />
@@ -61,8 +73,15 @@ function Header( { setEntitiesSavedStatesCallback } ) {
 						setEntitiesSavedStatesCallback
 					}
 				/>
-				<PinnedItems.Slot scope="core/edit-post" />
-				<MoreMenu />
+				{ ( isLargeViewport || ! showIconLabels ) && (
+					<>
+						<PinnedItems.Slot scope="core/edit-post" />
+						<MoreMenu showIconLabels={ showIconLabels } />
+					</>
+				) }
+				{ showIconLabels && ! isLargeViewport && (
+					<MoreMenu showIconLabels={ showIconLabels } />
+				) }
 			</div>
 		</div>
 	);