Display labels instead of icons in top toolbar.

WordPress · Aug 4, 2020 · 8c9ec13 · 8c9ec13
1 parent 5916692
commit 8c9ec13
Show file tree

Hide file tree

Showing 12 changed files with 168 additions and 29 deletions.
diff --git a/packages/components/src/dropdown-menu/index.js b/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 || true }
 					>
 						{ mergedToggleProps.children }
 					</Button>

diff --git a/packages/edit-post/src/components/header/fullscreen-mode-close/index.js b/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>

diff --git a/packages/edit-post/src/components/header/header-toolbar/index.js b/packages/edit-post/src/components/header/header-toolbar/index.js
@@ -17,9 +17,10 @@ import {
 } from '@wordpress/editor';
 import {
 	Button,
+	Dropdown,
 	__experimentalToolbarItem as ToolbarItem,
 } from '@wordpress/components';
-import { plus } from '@wordpress/icons';
+import { plus, chevronDown } from '@wordpress/icons';
 
 function HeaderToolbar() {
 	const { setIsInserterOpened } = useDispatch( 'core/edit-post' );
@@ -29,6 +30,7 @@ function HeaderToolbar() {
 		isInserterOpened,
 		isTextModeEnabled,
 		previewDeviceType,
+		showIconLabels,
 	} = useSelect( ( select ) => {
 		const {
 			hasInserterItems,
@@ -53,9 +55,14 @@ function HeaderToolbar() {
 			previewDeviceType: select(
 				'core/edit-post'
 			).__experimentalGetPreviewDeviceType(),
+			showIconLabels: select( 'core/edit-post' ).isFeatureActive(
+				'showIconLabels'
+			),
 		};
 	}, [] );
 	const isLargeViewport = useViewportMatch( 'medium' );
+	const isWideViewport = useViewportMatch( 'wide' );
+	const isSmallViewport = useViewportMatch( 'small', '<' );
 
 	const displayBlockToolbar =
 		! isLargeViewport || previewDeviceType !== 'Desktop' || hasFixedToolbar;
@@ -66,6 +73,35 @@ function HeaderToolbar() {
 		: /* translators: accessibility text for the editor toolbar when Top Toolbar is off */
 		  __( 'Document tools' );
 
+	const overflowItems = (
+		<>
+			{ isLargeViewport && (
+				<ToolbarItem
+					as={ ToolSelector }
+					showTooltip={ ! showIconLabels }
+				/>
+			) }
+			<ToolbarItem
+				as={ EditorHistoryUndo }
+				showTooltip={ ! showIconLabels }
+			/>
+			<ToolbarItem
+				as={ EditorHistoryRedo }
+				showTooltip={ ! showIconLabels }
+			/>
+			<ToolbarItem
+				as={ TableOfContents }
+				hasOutlineItemsDisabled={ isTextModeEnabled }
+				showTooltip={ ! showIconLabels }
+			/>
+			<ToolbarItem
+				as={ BlockNavigationDropdown }
+				isDisabled={ isTextModeEnabled }
+				showTooltip={ ! showIconLabels }
+			/>
+		</>
+	);
+
 	return (
 		<NavigableToolbar
 			className="edit-post-header-toolbar"
@@ -83,18 +119,25 @@ function HeaderToolbar() {
 					'Add block',
 					'Generic label for block inserter button'
 				) }
+				showTooltip={ ! showIconLabels }
 			/>
-			{ isLargeViewport && <ToolbarItem as={ ToolSelector } /> }
-			<ToolbarItem as={ EditorHistoryUndo } />
-			<ToolbarItem as={ EditorHistoryRedo } />
-			<ToolbarItem
-				as={ TableOfContents }
-				hasOutlineItemsDisabled={ isTextModeEnabled }
-			/>
-			<ToolbarItem
-				as={ BlockNavigationDropdown }
-				isDisabled={ isTextModeEnabled }
-			/>
+			{ ( isWideViewport || ! showIconLabels ) && overflowItems }
+			{ ! isWideViewport && ! isSmallViewport && showIconLabels && (
+				<Dropdown
+					contentClassName="edit-post-header__dropdown"
+					position="bottom right"
+					renderToggle={ ( { isOpen, onToggle } ) => (
+						<Button
+							className="button-toggle"
+							aria-expanded={ isOpen }
+							icon={ chevronDown }
+							isSecondary
+							onClick={ onToggle }
+						/>
+					) }
+					renderContent={ () => overflowItems }
+				/>
+			) }
 			{ displayBlockToolbar && (
 				<div className="edit-post-header-toolbar__block-toolbar">
 					<BlockToolbar hideDragHandle />

diff --git a/packages/edit-post/src/components/header/header-toolbar/style.scss b/packages/edit-post/src/components/header/header-toolbar/style.scss
@@ -113,3 +113,12 @@
 	height: 32px;
 	padding: 0;
 }
+// Always display block toolbar under main toolbar when text labels are visible
+.show-icon-labels .edit-post-header-toolbar__block-toolbar {
+	@include break-wide {
+		position: absolute;
+		top: $header-height + $border-width;
+		left: 0;
+		right: 0;
+	}
+}
diff --git a/packages/edit-post/src/components/header/index.js b/packages/edit-post/src/components/header/index.js
@@ -7,6 +7,9 @@ import {
 	PinnedItems,
 	__experimentalMainDashboardButton as MainDashboardButton,
 } from '@wordpress/interface';
+import { Button, Dropdown } from '@wordpress/components';
+import { useViewportMatch } from '@wordpress/compose';
+import { chevronDown } from '@wordpress/icons';
 
 /**
  * Internal dependencies
@@ -18,21 +21,38 @@ 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' );
+
+	const overflowItems = (
+		<>
+			<PinnedItems.Slot scope="core/edit-post" />
+			<MoreMenu showTooltip={ ! showIconLabels } />
+		</>
+	);
+
 	return (
 		<div className="edit-post-header">
 			<MainDashboardButton.Slot>
-				<FullscreenModeClose />
+				<FullscreenModeClose showTooltip={ ! showIconLabels } />
 			</MainDashboardButton.Slot>
 			<div className="edit-post-header__toolbar">
 				<HeaderToolbar />
@@ -61,8 +81,23 @@ function Header( { setEntitiesSavedStatesCallback } ) {
 						setEntitiesSavedStatesCallback
 					}
 				/>
-				<PinnedItems.Slot scope="core/edit-post" />
-				<MoreMenu />
+				{ ( isLargeViewport || ! showIconLabels ) && overflowItems }
+				{ showIconLabels && ! isLargeViewport && (
+					<Dropdown
+						contentClassName="edit-post-header__dropdown"
+						position="bottom right"
+						renderToggle={ ( { isOpen, onToggle } ) => (
+							<Button
+								className="button-toggle"
+								aria-expanded={ isOpen }
+								icon={ chevronDown }
+								isSecondary
+								onClick={ onToggle }
+							/>
+						) }
+						renderContent={ () => overflowItems }
+					/>
+				) }
 			</div>
 		</div>
 	);

diff --git a/packages/edit-post/src/components/header/more-menu/index.js b/packages/edit-post/src/components/header/more-menu/index.js
@@ -22,13 +22,13 @@ const TOGGLE_PROPS = {
 	tooltipPosition: 'bottom',
 };
 
-const MoreMenu = () => (
+const MoreMenu = ( { showTooltip } ) => (
 	<DropdownMenu
 		className="edit-post-more-menu"
 		icon={ moreVertical }
-		label={ __( 'More tools & options' ) }
+		label={ __( 'Options' ) }
 		popoverProps={ POPOVER_PROPS }
-		toggleProps={ TOGGLE_PROPS }
+		toggleProps={ { showTooltip, ...TOGGLE_PROPS } }
 	>
 		{ ( { onClose } ) => (
 			<>

diff --git a/packages/edit-post/src/components/header/more-menu/test/__snapshots__/index.js.snap b/packages/edit-post/src/components/header/more-menu/test/__snapshots__/index.js.snap
@@ -14,7 +14,7 @@ exports[`MoreMenu should match snapshot 1`] = `
         />
       </SVG>
     }
-    label="More tools & options"
+    label="Options"
     popoverProps={
       Object {
         "className": "edit-post-more-menu__content",
@@ -23,6 +23,7 @@ exports[`MoreMenu should match snapshot 1`] = `
     }
     toggleProps={
       Object {
+        "showTooltip": undefined,
         "tooltipPosition": "bottom",
       }
     }
@@ -55,20 +56,20 @@ exports[`MoreMenu should match snapshot 1`] = `
               />
             </SVG>
           }
-          label="More tools & options"
+          label="Options"
           onClick={[Function]}
           onKeyDown={[Function]}
           showTooltip={true}
           tooltipPosition="bottom"
         >
           <Tooltip
             position="bottom"
-            text="More tools & options"
+            text="Options"
           >
             <button
               aria-expanded={false}
               aria-haspopup="true"
-              aria-label="More tools & options"
+              aria-label="Options"
               className="components-button components-dropdown-menu__toggle has-icon"
               onBlur={[Function]}
               onClick={[Function]}

diff --git a/packages/edit-post/src/components/header/style.scss b/packages/edit-post/src/components/header/style.scss
@@ -123,3 +123,46 @@
 		padding-bottom: 0;
 	}
 }
+
+.show-icon-labels .edit-post-header,
+.edit-post-header__dropdown {
+	.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);
+			margin: 0 0.5em;
+		}
+	}
+	// Exception for drodpdown toggle buttons.
+	// Temporary exception for block toolbar (pending design).
+	.edit-post-header-toolbar__block-toolbar .components-button.has-icon,
+	.components-button.has-icon.button-toggle {
+		svg {
+			display: block;
+		}
+		&::after {
+			content: none;
+		}
+	}
+}
+
+.edit-post-header__dropdown {
+	.components-popover__content {
+		min-width: 0;
+
+		> div * {
+			white-space: nowrap;
+			display: block;
+		}
+		.components-button.has-icon {
+			margin: 0;
+			padding: 6px;
+		}
+	}
+}
diff --git a/packages/edit-post/src/components/layout/index.js b/packages/edit-post/src/components/layout/index.js
@@ -85,6 +85,7 @@ function Layout() {
 		hasBlockSelected,
 		showMostUsedBlocks,
 		isInserterOpened,
+		showIconLabels,
 	} = useSelect( ( select ) => {
 		return {
 			hasFixedToolbar: select( 'core/edit-post' ).isFeatureActive(
@@ -114,12 +115,16 @@ function Layout() {
 			nextShortcut: select(
 				'core/keyboard-shortcuts'
 			).getAllShortcutRawKeyCombinations( 'core/edit-post/next-region' ),
+			showIconLabels: select( 'core/edit-post' ).isFeatureActive(
+				'showIconLabels'
+			),
 		};
 	}, [] );
 	const className = classnames( 'edit-post-layout', 'is-mode-' + mode, {
 		'is-sidebar-opened': sidebarIsOpened,
 		'has-fixed-toolbar': hasFixedToolbar,
 		'has-metaboxes': hasActiveMetaboxes,
+		'show-icon-labels': showIconLabels,
 	} );
 	const openSidebarPanel = () =>
 		openGeneralSidebar(
@@ -163,7 +168,7 @@ function Layout() {
 			<LocalAutosaveMonitor />
 			<EditPostKeyboardShortcuts />
 			<EditorKeyboardShortcutsRegister />
-			<SettingsSidebar />
+			<SettingsSidebar showTooltip={ ! showIconLabels } />
 			<FocusReturnProvider>
 				<InterfaceSkeleton
 					className={ className }

diff --git a/packages/edit-post/src/components/sidebar/settings-sidebar/index.js b/packages/edit-post/src/components/sidebar/settings-sidebar/index.js
@@ -28,7 +28,7 @@ const SIDEBAR_ACTIVE_BY_DEFAULT = Platform.select( {
 	native: false,
 } );
 
-const SettingsSidebar = () => {
+const SettingsSidebar = ( { showTooltip } ) => {
 	const { sidebarName, keyboardShortcut } = useSelect( ( select ) => {
 		// The settings sidebar is used by the edit-post/document and edit-post/block sidebars.
 		// sidebarName represents the sidebar that is active or that should be active when the SettingsSidebar toggle button is pressed.
@@ -64,6 +64,7 @@ const SettingsSidebar = () => {
 			toggleShortcut={ keyboardShortcut }
 			icon={ cog }
 			isActiveByDefault={ SIDEBAR_ACTIVE_BY_DEFAULT }
+			showTooltip={ showTooltip }
 		>
 			{ sidebarName === 'edit-post/document' && (
 				<>

diff --git a/packages/editor/src/components/table-of-contents/index.js b/packages/editor/src/components/table-of-contents/index.js
@@ -29,7 +29,7 @@ function TableOfContents( { hasOutlineItemsDisabled, ...props }, ref ) {
 					onClick={ hasBlocks ? onToggle : undefined }
 					icon={ info }
 					aria-expanded={ isOpen }
-					label={ __( 'Content structure' ) }
+					label={ __( 'Outline' ) }
 					tooltipPosition="bottom"
 					aria-disabled={ ! hasBlocks }
 				/>