diff --git a/packages/block-editor/src/components/block-navigation/dropdown.js b/packages/block-editor/src/components/block-navigation/dropdown.js index 3b9251c5e77842..3ac9d80e6e7713 100644 --- a/packages/block-editor/src/components/block-navigation/dropdown.js +++ b/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 } diff --git a/packages/block-editor/src/components/preview-options/index.js b/packages/block-editor/src/components/preview-options/index.js index 6835b157d8c149..122c85d852d0d2 100644 --- a/packages/block-editor/src/components/preview-options/index.js +++ b/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 ( diff --git a/packages/block-editor/src/components/tool-selector/index.js b/packages/block-editor/src/components/tool-selector/index.js index 33e73995f3e470..f1ca2afaab78e8 100644 --- a/packages/block-editor/src/components/tool-selector/index.js +++ b/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={ () => ( <> - + { mergedToggleProps.children } diff --git a/packages/e2e-test-utils/src/toggle-more-menu.js b/packages/e2e-test-utils/src/toggle-more-menu.js index 87ac3b80c06760..1b9b98d9d6370c 100644 --- a/packages/e2e-test-utils/src/toggle-more-menu.js +++ b/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"]' ); } diff --git a/packages/e2e-tests/specs/editor/blocks/columns.test.js b/packages/e2e-tests/specs/editor/blocks/columns.test.js index 9fe7580f98ac26..a8d8ed25762698 100644 --- a/packages/e2e-tests/specs/editor/blocks/columns.test.js +++ b/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"]' diff --git a/packages/e2e-tests/specs/editor/blocks/cover.test.js b/packages/e2e-tests/specs/editor/blocks/cover.test.js index 494ce761429bec..a5be8cbe5b98ab 100644 --- a/packages/e2e-tests/specs/editor/blocks/cover.test.js +++ b/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' ); diff --git a/packages/e2e-tests/specs/editor/various/block-hierarchy-navigation.test.js b/packages/e2e-tests/specs/editor/various/block-hierarchy-navigation.test.js index ab6986a41b287c..1d268e6dc1cc4b 100644 --- a/packages/e2e-tests/specs/editor/various/block-hierarchy-navigation.test.js +++ b/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')]" diff --git a/packages/e2e-tests/specs/editor/various/dropdown-menu.test.js b/packages/e2e-tests/specs/editor/various/dropdown-menu.test.js index f6824c31d73e3b..1ab5730ab66777 100644 --- a/packages/e2e-tests/specs/editor/various/dropdown-menu.test.js +++ b/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( ',' ); 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 index 79659134f4296a..d7da08c758470f 100644 --- 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 } diff --git a/packages/edit-post/src/components/header/header-toolbar/index.js b/packages/edit-post/src/components/header/header-toolbar/index.js index ecedb37294416c..50959fed4fcb22 100644 --- a/packages/edit-post/src/components/header/header-toolbar/index.js +++ b/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 = ( + <> + + + + ); + return ( - { isLargeViewport && ( - + showTooltip={ ! showIconLabels } + > + { showIconLabels && __( 'Add' ) } + + { ( isWideViewport || ! showIconLabels ) && ( + <> + { isLargeViewport && ( + + ) } + + + { overflowItems } + + ) } + { ! isWideViewport && ! isSmallViewport && showIconLabels && ( + + { () => ( +
+ + + + + + + + { overflowItems } +
+ ) } + ) } - - - - { displayBlockToolbar && (
diff --git a/packages/edit-post/src/components/header/header-toolbar/style.scss b/packages/edit-post/src/components/header/header-toolbar/style.scss index 88d319a63a316d..41b3f596e5c8d2 100644 --- 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,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; + } +} diff --git a/packages/edit-post/src/components/header/index.js b/packages/edit-post/src/components/header/index.js index 6603eddf5ff7d7..631e22db0ca6d7 100644 --- a/packages/edit-post/src/components/header/index.js +++ b/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 (
@@ -47,6 +58,7 @@ function Header( { setEntitiesSavedStatesCallback } ) { ) } @@ -61,8 +73,15 @@ function Header( { setEntitiesSavedStatesCallback } ) { setEntitiesSavedStatesCallback } /> - - + { ( isLargeViewport || ! showIconLabels ) && ( + <> + + + + ) } + { showIconLabels && ! isLargeViewport && ( + + ) }
); diff --git a/packages/edit-post/src/components/header/more-menu/index.js b/packages/edit-post/src/components/header/more-menu/index.js index dd362272a3d66e..0e115cd79c73f2 100644 --- a/packages/edit-post/src/components/header/more-menu/index.js +++ b/packages/edit-post/src/components/header/more-menu/index.js @@ -4,7 +4,8 @@ import { __ } from '@wordpress/i18n'; import { DropdownMenu, MenuGroup, MenuItem } from '@wordpress/components'; import { moreVertical } from '@wordpress/icons'; -import { ActionItem } from '@wordpress/interface'; +import { ActionItem, PinnedItems } from '@wordpress/interface'; +import { useViewportMatch } from '@wordpress/compose'; /** * Internal dependencies @@ -22,31 +23,46 @@ const TOGGLE_PROPS = { tooltipPosition: 'bottom', }; -const MoreMenu = () => ( - - { ( { onClose } ) => ( - <> - - - - - - - - - ) } - -); +const MoreMenu = ( { showIconLabels } ) => { + const isLargeViewport = useViewportMatch( 'large' ); + + return ( + + { ( { onClose } ) => ( + <> + { showIconLabels && ! isLargeViewport && ( + + ) } + + + + + + + + + ) } + + ); +}; export default MoreMenu; 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 index 9296591a638592..7dfc1004081211 100644 --- 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`] = ` /> } - label="More tools & options" + label="Options" popoverProps={ Object { "className": "edit-post-more-menu__content", @@ -23,6 +23,8 @@ exports[`MoreMenu should match snapshot 1`] = ` } toggleProps={ Object { + "isTertiary": undefined, + "showTooltip": true, "tooltipPosition": "bottom", } } @@ -55,7 +57,7 @@ exports[`MoreMenu should match snapshot 1`] = ` /> } - label="More tools & options" + label="Options" onClick={[Function]} onKeyDown={[Function]} showTooltip={true} @@ -63,12 +65,12 @@ exports[`MoreMenu should match snapshot 1`] = ` > ); } diff --git a/packages/editor/src/components/table-of-contents/index.js b/packages/editor/src/components/table-of-contents/index.js index f7cfb0cfc242ea..eecb0c397459d4 100644 --- a/packages/editor/src/components/table-of-contents/index.js +++ b/packages/editor/src/components/table-of-contents/index.js @@ -12,14 +12,17 @@ import { forwardRef } from '@wordpress/element'; */ import TableOfContentsPanel from './panel'; -function TableOfContents( { hasOutlineItemsDisabled, ...props }, ref ) { +function TableOfContents( + { hasOutlineItemsDisabled, repositionDropdown, ...props }, + ref +) { const hasBlocks = useSelect( ( select ) => !! select( 'core/block-editor' ).getBlockCount(), [] ); return ( ( @@ -29,7 +32,8 @@ function TableOfContents( { hasOutlineItemsDisabled, ...props }, ref ) { onClick={ hasBlocks ? onToggle : undefined } icon={ info } aria-expanded={ isOpen } - label={ __( 'Content structure' ) } + /* translators: button label text should, if possible, be under 16 characters. */ + label={ __( 'Details' ) } tooltipPosition="bottom" aria-disabled={ ! hasBlocks } /> diff --git a/packages/interface/src/components/complementary-area/index.js b/packages/interface/src/components/complementary-area/index.js index 462f5ba07a33bf..71e8ee6e4e7b06 100644 --- a/packages/interface/src/components/complementary-area/index.js +++ b/packages/interface/src/components/complementary-area/index.js @@ -9,7 +9,7 @@ import classnames from 'classnames'; import { Animate, Button, Panel, Slot, Fill } from '@wordpress/components'; import { useDispatch, useSelect } from '@wordpress/data'; import { __ } from '@wordpress/i18n'; -import { starEmpty, starFilled } from '@wordpress/icons'; +import { check, starEmpty, starFilled } from '@wordpress/icons'; import { useEffect, useRef } from '@wordpress/element'; /** @@ -94,8 +94,9 @@ function ComplementaryArea( { title, toggleShortcut, isActiveByDefault, + showIconLabels = false, } ) { - const { isActive, isPinned, activeArea, isSmall } = useSelect( + const { isActive, isPinned, activeArea, isSmall, isLarge } = useSelect( ( select ) => { const { getActiveComplementaryArea, isItemPinned } = select( 'core/interface' @@ -108,6 +109,7 @@ function ComplementaryArea( { isSmall: select( 'core/viewport' ).isViewportMatch( '< medium' ), + isLarge: select( 'core/viewport' ).isViewportMatch( 'large' ), }; }, [ identifier, scope ] @@ -139,10 +141,13 @@ function ComplementaryArea( { ) }