Skip to content

Commit

Permalink
Display labels instead of icons in top toolbar.
Browse files Browse the repository at this point in the history
  • Loading branch information
tellthemachines committed Aug 4, 2020
1 parent 5916692 commit 8c9ec13
Show file tree
Hide file tree
Showing 12 changed files with 168 additions and 29 deletions.
2 changes: 1 addition & 1 deletion packages/components/src/dropdown-menu/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -129,7 +129,7 @@ function DropdownMenu( {
aria-haspopup="true"
aria-expanded={ isOpen }
label={ label }
showTooltip
showTooltip={ toggleProps?.showTooltip || true }
>
{ mergedToggleProps.children }
</Button>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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' );
Expand Down Expand Up @@ -61,7 +61,7 @@ function FullscreenModeClose() {
post_type: postType.slug,
} ) }
label={ get( postType, [ 'labels', 'view_items' ], __( 'Back' ) ) }
showTooltip
showTooltip={ showTooltip }
>
{ buttonIcon }
</Button>
Expand Down
67 changes: 55 additions & 12 deletions packages/edit-post/src/components/header/header-toolbar/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -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' );
Expand All @@ -29,6 +30,7 @@ function HeaderToolbar() {
isInserterOpened,
isTextModeEnabled,
previewDeviceType,
showIconLabels,
} = useSelect( ( select ) => {
const {
hasInserterItems,
Expand All @@ -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;
Expand All @@ -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"
Expand All @@ -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 />
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
}
43 changes: 39 additions & 4 deletions packages/edit-post/src/components/header/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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 />
Expand Down Expand Up @@ -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>
);
Expand Down
6 changes: 3 additions & 3 deletions packages/edit-post/src/components/header/more-menu/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -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 } ) => (
<>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand All @@ -23,6 +23,7 @@ exports[`MoreMenu should match snapshot 1`] = `
}
toggleProps={
Object {
"showTooltip": undefined,
"tooltipPosition": "bottom",
}
}
Expand Down Expand Up @@ -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]}
Expand Down
43 changes: 43 additions & 0 deletions packages/edit-post/src/components/header/style.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
}
}
7 changes: 6 additions & 1 deletion packages/edit-post/src/components/layout/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -85,6 +85,7 @@ function Layout() {
hasBlockSelected,
showMostUsedBlocks,
isInserterOpened,
showIconLabels,
} = useSelect( ( select ) => {
return {
hasFixedToolbar: select( 'core/edit-post' ).isFeatureActive(
Expand Down Expand Up @@ -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(
Expand Down Expand Up @@ -163,7 +168,7 @@ function Layout() {
<LocalAutosaveMonitor />
<EditPostKeyboardShortcuts />
<EditorKeyboardShortcutsRegister />
<SettingsSidebar />
<SettingsSidebar showTooltip={ ! showIconLabels } />
<FocusReturnProvider>
<InterfaceSkeleton
className={ className }
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand Down Expand Up @@ -64,6 +64,7 @@ const SettingsSidebar = () => {
toggleShortcut={ keyboardShortcut }
icon={ cog }
isActiveByDefault={ SIDEBAR_ACTIVE_BY_DEFAULT }
showTooltip={ showTooltip }
>
{ sidebarName === 'edit-post/document' && (
<>
Expand Down
2 changes: 1 addition & 1 deletion packages/editor/src/components/table-of-contents/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -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 }
/>
Expand Down
Loading

0 comments on commit 8c9ec13

Please sign in to comment.