From 0763561a1649b682f7c30b8ac078741630a86797 Mon Sep 17 00:00:00 2001 From: George Mamadashvili Date: Mon, 13 Sep 2021 16:46:22 +0400 Subject: [PATCH 1/9] Navigation Screen: Consolidate menu name and switcher --- .../src/components/header/actions.js | 91 +++++++++++++++++++ .../src/components/header/index.js | 65 ++----------- .../src/components/header/new-button.js | 42 +++++++++ .../src/components/header/style.scss | 21 ++++- .../src/components/layout/index.js | 2 - 5 files changed, 156 insertions(+), 65 deletions(-) create mode 100644 packages/edit-navigation/src/components/header/actions.js create mode 100644 packages/edit-navigation/src/components/header/new-button.js diff --git a/packages/edit-navigation/src/components/header/actions.js b/packages/edit-navigation/src/components/header/actions.js new file mode 100644 index 0000000000000..b91c710732bd9 --- /dev/null +++ b/packages/edit-navigation/src/components/header/actions.js @@ -0,0 +1,91 @@ +/** + * WordPress dependencies + */ +import { sprintf, __ } from '@wordpress/i18n'; +import { + DropdownMenu, + MenuGroup, + MenuItemsChoice, + __experimentalText as Text, +} from '@wordpress/components'; +import { chevronDown } from '@wordpress/icons'; +import { useRef } from '@wordpress/element'; +import { decodeEntities } from '@wordpress/html-entities'; + +/** + * Internal dependencies + */ +import { useMenuEntityProp, useSelectedMenuId } from '../../hooks'; + +export default function HeaderActions( { menus, isLoading } ) { + const [ selectedMenuId, setSelectedMenuId ] = useSelectedMenuId(); + const [ menuName ] = useMenuEntityProp( 'name', selectedMenuId ); + + // The title ref is passed to the popover as the anchorRef so that the + // dropdown is centered over the whole title area rather than just one + // part of it. + const titleRef = useRef(); + + if ( isLoading ) { + return ( +
+ { __( 'Loading…' ) } +
+ ); + } + + return ( +
+
+ + { decodeEntities( menuName ) } + + + + { ( { onClose } ) => ( + + ( { + value: id, + label: decodeEntities( name ), + 'aria-label': sprintf( + /* translators: %s: The name of a menu. */ + __( "Switch to '%s'" ), + name + ), + } ) ) } + onSelect={ ( value ) => { + setSelectedMenuId( value ); + onClose(); + } } + /> + + ) } + +
+
+ ); +} diff --git a/packages/edit-navigation/src/components/header/index.js b/packages/edit-navigation/src/components/header/index.js index b990725be1126..dc33c55b06079 100644 --- a/packages/edit-navigation/src/components/header/index.js +++ b/packages/edit-navigation/src/components/header/index.js @@ -1,50 +1,29 @@ /** * WordPress dependencies */ +import { __ } from '@wordpress/i18n'; import { NavigableToolbar } from '@wordpress/block-editor'; -import { DropdownMenu } from '@wordpress/components'; import { useViewportMatch } from '@wordpress/compose'; import { PinnedItems } from '@wordpress/interface'; -import { __, sprintf } from '@wordpress/i18n'; -import { decodeEntities } from '@wordpress/html-entities'; /** * Internal dependencies */ +import MenuActions from './actions'; +import NewButton from './new-button'; import SaveButton from './save-button'; import UndoButton from './undo-button'; import RedoButton from './redo-button'; import InserterToggle from './inserter-toggle'; -import MenuSwitcher from '../menu-switcher'; -import { useMenuEntityProp } from '../../hooks'; export default function Header( { isMenuSelected, menus, - selectedMenuId, - onSelectMenu, isPending, navigationPost, } ) { const isMediumViewport = useViewportMatch( 'medium' ); - const [ menuName ] = useMenuEntityProp( 'name', selectedMenuId ); - - let actionHeaderText; - - if ( menuName ) { - actionHeaderText = sprintf( - // translators: Name of the menu being edited, e.g. 'Main Menu'. - __( 'Editing: %s' ), - menuName - ); - } else if ( isPending ) { - // Loading text won't be displayed if menus are preloaded. - actionHeaderText = __( 'Loading …' ); - } else { - actionHeaderText = __( 'No menus available' ); - } - return (
@@ -68,42 +47,12 @@ export default function Header( {
-

- { isMenuSelected && decodeEntities( actionHeaderText ) } -

- + { isMenuSelected && ( + + ) } { isMenuSelected && (
- - { ( { onClose } ) => ( - { - onSelectMenu( menuId ); - onClose(); - } } - /> - ) } - - +
diff --git a/packages/edit-navigation/src/components/header/new-button.js b/packages/edit-navigation/src/components/header/new-button.js new file mode 100644 index 0000000000000..3cbb0d0d0796a --- /dev/null +++ b/packages/edit-navigation/src/components/header/new-button.js @@ -0,0 +1,42 @@ +/** + * WordPress dependencies + */ +import { __ } from '@wordpress/i18n'; +import { Button, Modal } from '@wordpress/components'; +import { useState } from '@wordpress/element'; + +/** + * Internal dependencies + */ +import AddMenu from '../add-menu'; +import { useSelectedMenuId } from '../../hooks'; + +export default function NewButton( { menus } ) { + const [ isModalOpen, setIsModalOpen ] = useState( false ); + const [ , setSelectedMenuId ] = useSelectedMenuId(); + + return ( + <> + + { isModalOpen && ( + setIsModalOpen( false ) } + > + { + setIsModalOpen( false ); + setSelectedMenuId( menuId ); + } } + /> + + ) } + + ); +} diff --git a/packages/edit-navigation/src/components/header/style.scss b/packages/edit-navigation/src/components/header/style.scss index ec6678dfafbef..aa9e4e4740f97 100644 --- a/packages/edit-navigation/src/components/header/style.scss +++ b/packages/edit-navigation/src/components/header/style.scss @@ -44,11 +44,22 @@ } } -.edit-navigation-header__subtitle { - display: block; - margin: 0; - font-size: 15px; - font-weight: normal; +.edit-navigation-menu-actions { + display: flex; + flex-direction: column; + justify-content: center; + + .edit-navigation-menu-actions__subtitle-wrapper { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + } + + .edit-navigation-menu-actions__switcher-toggle { + padding: 0; + min-width: 0; + } } .edit-navigation-header__actions { diff --git a/packages/edit-navigation/src/components/layout/index.js b/packages/edit-navigation/src/components/layout/index.js index 11d83ad180551..530dcaf4e01f5 100644 --- a/packages/edit-navigation/src/components/layout/index.js +++ b/packages/edit-navigation/src/components/layout/index.js @@ -137,8 +137,6 @@ export default function Layout( { blockEditorSettings } ) { isMenuSelected={ isMenuSelected } isPending={ ! hasLoadedMenus } menus={ menus } - selectedMenuId={ selectedMenuId } - onSelectMenu={ selectMenu } navigationPost={ navigationPost } /> } From e92f0e4bafea4458b2c19a583dad11f57728737d Mon Sep 17 00:00:00 2001 From: George Mamadashvili Date: Mon, 13 Sep 2021 17:04:41 +0400 Subject: [PATCH 2/9] Update E2E test selectors --- .../experiments/navigation-editor.test.js | 22 ++++++------------- 1 file changed, 7 insertions(+), 15 deletions(-) diff --git a/packages/e2e-tests/specs/experiments/navigation-editor.test.js b/packages/e2e-tests/specs/experiments/navigation-editor.test.js index 6872ecb490a7a..dec1a68244d5f 100644 --- a/packages/e2e-tests/specs/experiments/navigation-editor.test.js +++ b/packages/e2e-tests/specs/experiments/navigation-editor.test.js @@ -254,18 +254,12 @@ describe( 'Navigation editor', () => { await visitNavigationEditor(); // Wait for the header to show the menu name. - await page.waitForXPath( '//h2[contains(., "Editing: Test Menu 1")]', { + await page.waitForXPath( '//h2[contains(., "Test Menu 1")]', { visible: true, } ); - // Open up the menu creation dialog and create a new menu. - const switchMenuButton = await page.waitForXPath( - '//button[.="Switch menu"]' - ); - await switchMenuButton.click(); - const createMenuButton = await page.waitForXPath( - '//button[.="Create a new menu"]' + '//button[.="New menu"]' ); await createMenuButton.click(); @@ -305,7 +299,7 @@ describe( 'Navigation editor', () => { await visitNavigationEditor(); // Wait for the header to show the menu name. - await page.waitForXPath( '//h2[contains(., "Editing: Test Menu 1")]', { + await page.waitForXPath( '//h2[contains(., "Test Menu 1")]', { visible: true, } ); @@ -495,13 +489,13 @@ describe( 'Navigation editor', () => { await saveButton.click(); await page.waitForSelector( '.components-snackbar' ); const headerSubtitle = await page.waitForSelector( - '.edit-navigation-header__subtitle' + '.edit-navigation-menu-actions__subtitle' ); expect( headerSubtitle ).toBeTruthy(); const headerSubtitleText = await headerSubtitle.evaluate( ( element ) => element.innerText ); - expect( headerSubtitleText ).toBe( `Editing: ${ newName }` ); + expect( headerSubtitleText ).toBe( newName ); } ); it( 'does not save a menu name upon clicking save button when name is empty', async () => { @@ -532,15 +526,13 @@ describe( 'Navigation editor', () => { await saveButton.click(); await page.waitForSelector( '.components-snackbar' ); const headerSubtitle = await page.waitForSelector( - '.edit-navigation-header__subtitle' + '.edit-navigation-menu-actions__subtitle' ); expect( headerSubtitle ).toBeTruthy(); const headerSubtitleText = await headerSubtitle.evaluate( ( element ) => element.innerText ); - expect( headerSubtitleText ).toBe( - `Editing: ${ initialMenuName }` - ); + expect( headerSubtitleText ).toBe( initialMenuName ); } ); } ); From e33412f8f93f1a221046b9a04975149c9d02f700 Mon Sep 17 00:00:00 2001 From: George Mamadashvili Date: Mon, 13 Sep 2021 18:47:26 +0400 Subject: [PATCH 3/9] Use MenuSwitcher --- .../src/components/header/actions.js | 31 ++++++------------- .../src/components/menu-switcher/index.js | 5 ++- 2 files changed, 14 insertions(+), 22 deletions(-) diff --git a/packages/edit-navigation/src/components/header/actions.js b/packages/edit-navigation/src/components/header/actions.js index b91c710732bd9..7cc1b83ba9c78 100644 --- a/packages/edit-navigation/src/components/header/actions.js +++ b/packages/edit-navigation/src/components/header/actions.js @@ -1,11 +1,9 @@ /** * WordPress dependencies */ -import { sprintf, __ } from '@wordpress/i18n'; +import { __ } from '@wordpress/i18n'; import { DropdownMenu, - MenuGroup, - MenuItemsChoice, __experimentalText as Text, } from '@wordpress/components'; import { chevronDown } from '@wordpress/icons'; @@ -15,6 +13,7 @@ import { decodeEntities } from '@wordpress/html-entities'; /** * Internal dependencies */ +import MenuSwitcher from '../menu-switcher'; import { useMenuEntityProp, useSelectedMenuId } from '../../hooks'; export default function HeaderActions( { menus, isLoading } ) { @@ -65,24 +64,14 @@ export default function HeaderActions( { menus, isLoading } ) { } } > { ( { onClose } ) => ( - - ( { - value: id, - label: decodeEntities( name ), - 'aria-label': sprintf( - /* translators: %s: The name of a menu. */ - __( "Switch to '%s'" ), - name - ), - } ) ) } - onSelect={ ( value ) => { - setSelectedMenuId( value ); - onClose(); - } } - /> - + { + setSelectedMenuId( menuId ); + onClose(); + } } + /> ) }
diff --git a/packages/edit-navigation/src/components/menu-switcher/index.js b/packages/edit-navigation/src/components/menu-switcher/index.js index b6a1843643723..bdcd51a0753b7 100644 --- a/packages/edit-navigation/src/components/menu-switcher/index.js +++ b/packages/edit-navigation/src/components/menu-switcher/index.js @@ -48,7 +48,10 @@ export default function MenuSwitcher( { /> - + { __( 'Create a new menu' ) } { isModalVisible && ( From d61d1025c482db42ab4112298f5f16e47af14c71 Mon Sep 17 00:00:00 2001 From: George Mamadashvili Date: Mon, 13 Sep 2021 18:56:05 +0400 Subject: [PATCH 4/9] Update dropdown z-index styles --- packages/base-styles/_z-index.scss | 2 +- .../edit-navigation/src/components/header/style.scss | 10 +++++----- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/packages/base-styles/_z-index.scss b/packages/base-styles/_z-index.scss index 5b7ddc1a0f0e1..04a58df261194 100644 --- a/packages/base-styles/_z-index.scss +++ b/packages/base-styles/_z-index.scss @@ -147,7 +147,7 @@ $z-layers: ( ".components-popover.edit-widgets-more-menu__content": 99998, ".components-popover.block-editor-rich-text__inline-format-toolbar": 99998, ".components-popover.block-editor-warning__dropdown": 99998, - ".components-popover.edit-navigation-header__menu-switcher-dropdown": 99998, + ".components-popover.edit-navigation-menu-actions__switcher-dropdown": 99998, ".components-autocomplete__results": 1000000, diff --git a/packages/edit-navigation/src/components/header/style.scss b/packages/edit-navigation/src/components/header/style.scss index aa9e4e4740f97..8e79b00e61766 100644 --- a/packages/edit-navigation/src/components/header/style.scss +++ b/packages/edit-navigation/src/components/header/style.scss @@ -62,6 +62,11 @@ } } +.edit-navigation-menu-actions__switcher-dropdown { + // Appear below the modal overlay. + z-index: z-index(".components-popover.edit-navigation-menu-actions__switcher-dropdown"); +} + .edit-navigation-header__actions { display: flex; @@ -74,11 +79,6 @@ } } -.edit-navigation-header__menu-switcher-dropdown { - // Appear below the modal overlay. - z-index: z-index(".components-popover.edit-navigation-header__menu-switcher-dropdown"); -} - // Hide notices. .gutenberg_page_gutenberg-navigation { .notice, From b032fa8c9d0fc1ee51b73010474b0ba3fc45b47d Mon Sep 17 00:00:00 2001 From: George Mamadashvili Date: Tue, 14 Sep 2021 12:43:06 +0400 Subject: [PATCH 5/9] Style menu switcher's new button --- .../src/components/header/style.scss | 30 +++++++++++++++++++ 1 file changed, 30 insertions(+) diff --git a/packages/edit-navigation/src/components/header/style.scss b/packages/edit-navigation/src/components/header/style.scss index 8e79b00e61766..5cf9920740e12 100644 --- a/packages/edit-navigation/src/components/header/style.scss +++ b/packages/edit-navigation/src/components/header/style.scss @@ -65,6 +65,36 @@ .edit-navigation-menu-actions__switcher-dropdown { // Appear below the modal overlay. z-index: z-index(".components-popover.edit-navigation-menu-actions__switcher-dropdown"); + + .components-menu-group.has-hidden-separator { + padding: 0; + } + + .edit-navigation-menu-switcher__new-button.components-button { + justify-content: center; + background: $gray-900; + color: $white; + height: ($button-size + $grid-unit-10); + border-radius: 0; + + &:hover { + color: $white; + } + + &:active { + color: $gray-400; + } + + &:focus:not(:disabled) { + box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color), inset 0 0 0 3px $white; + } + + // This is needed to center the button text. + .components-menu-item__item { + min-width: 0; + margin: 0; + } + } } .edit-navigation-header__actions { From 5c2d4e8ca379cd7fcc6c6f5330657f5f194568ee Mon Sep 17 00:00:00 2001 From: George Mamadashvili Date: Tue, 14 Sep 2021 14:23:58 +0400 Subject: [PATCH 6/9] Hide top level 'New menu' button on small screens --- packages/edit-navigation/src/components/header/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/edit-navigation/src/components/header/index.js b/packages/edit-navigation/src/components/header/index.js index dc33c55b06079..c4d83fc250cad 100644 --- a/packages/edit-navigation/src/components/header/index.js +++ b/packages/edit-navigation/src/components/header/index.js @@ -52,7 +52,7 @@ export default function Header( { ) } { isMenuSelected && (
- + { isMediumViewport && }
From 16e81a6cc2fc02aaad5290ff7d5584aaaa3d3956 Mon Sep 17 00:00:00 2001 From: George Mamadashvili Date: Tue, 14 Sep 2021 15:30:14 +0400 Subject: [PATCH 7/9] Render minimal header when menu isn't selected --- .../src/components/header/index.js | 29 ++++++++++++------- 1 file changed, 19 insertions(+), 10 deletions(-) diff --git a/packages/edit-navigation/src/components/header/index.js b/packages/edit-navigation/src/components/header/index.js index c4d83fc250cad..70029f5378636 100644 --- a/packages/edit-navigation/src/components/header/index.js +++ b/packages/edit-navigation/src/components/header/index.js @@ -24,6 +24,18 @@ export default function Header( { } ) { const isMediumViewport = useViewportMatch( 'medium' ); + if ( ! isMenuSelected ) { + return ( +
+
+

+ { __( 'Navigation' ) } +

+
+
+ ); + } + return (
@@ -47,16 +59,13 @@ export default function Header( {
- { isMenuSelected && ( - - ) } - { isMenuSelected && ( -
- { isMediumViewport && } - - -
- ) } + + +
+ { isMediumViewport && } + + +
); } From eaa2d9163b411cf09ce03683315a44b778cc6fbb Mon Sep 17 00:00:00 2001 From: George Mamadashvili Date: Tue, 14 Sep 2021 16:50:20 +0400 Subject: [PATCH 8/9] Add explaining comment for menu item group style reset --- packages/edit-navigation/src/components/header/style.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/edit-navigation/src/components/header/style.scss b/packages/edit-navigation/src/components/header/style.scss index 5cf9920740e12..883b186999475 100644 --- a/packages/edit-navigation/src/components/header/style.scss +++ b/packages/edit-navigation/src/components/header/style.scss @@ -66,6 +66,7 @@ // Appear below the modal overlay. z-index: z-index(".components-popover.edit-navigation-menu-actions__switcher-dropdown"); + // Resetting MenuItemGroup padding so button can take full space. .components-menu-group.has-hidden-separator { padding: 0; } From ad7d906db1a55fc4b950c581e72f8c1ccc32da7a Mon Sep 17 00:00:00 2001 From: George Mamadashvili Date: Tue, 14 Sep 2021 16:56:23 +0400 Subject: [PATCH 9/9] Try better name for file and component --- packages/edit-navigation/src/components/header/index.js | 2 +- .../src/components/header/{actions.js => menu-actions.js} | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) rename packages/edit-navigation/src/components/header/{actions.js => menu-actions.js} (96%) diff --git a/packages/edit-navigation/src/components/header/index.js b/packages/edit-navigation/src/components/header/index.js index 70029f5378636..01a11dfaf5bcf 100644 --- a/packages/edit-navigation/src/components/header/index.js +++ b/packages/edit-navigation/src/components/header/index.js @@ -9,7 +9,7 @@ import { PinnedItems } from '@wordpress/interface'; /** * Internal dependencies */ -import MenuActions from './actions'; +import MenuActions from './menu-actions'; import NewButton from './new-button'; import SaveButton from './save-button'; import UndoButton from './undo-button'; diff --git a/packages/edit-navigation/src/components/header/actions.js b/packages/edit-navigation/src/components/header/menu-actions.js similarity index 96% rename from packages/edit-navigation/src/components/header/actions.js rename to packages/edit-navigation/src/components/header/menu-actions.js index 7cc1b83ba9c78..79c1944a988a2 100644 --- a/packages/edit-navigation/src/components/header/actions.js +++ b/packages/edit-navigation/src/components/header/menu-actions.js @@ -16,7 +16,7 @@ import { decodeEntities } from '@wordpress/html-entities'; import MenuSwitcher from '../menu-switcher'; import { useMenuEntityProp, useSelectedMenuId } from '../../hooks'; -export default function HeaderActions( { menus, isLoading } ) { +export default function MenuActions( { menus, isLoading } ) { const [ selectedMenuId, setSelectedMenuId ] = useSelectedMenuId(); const [ menuName ] = useMenuEntityProp( 'name', selectedMenuId );