From 770b1a3f9cc7ad2f9ee306d0b6b38b663b96143f Mon Sep 17 00:00:00 2001 From: George Mamadashvili Date: Thu, 20 May 2021 10:23:12 +0400 Subject: [PATCH] Navigation Screen: Update sidebar (#31821) * Move Sidebar into a separate directory. * Moves settings from InspectorControl into the Sidebar. * Fixes selector for e2e tests. * Wrap "no menu locations" message in the panel body. * Use two sidebar "system." * Incorporate tabs in the sidebar. --- .../experiments/navigation-editor.test.js | 38 ++--- .../inspector-additions/delete-menu.js | 30 ---- .../components/inspector-additions/index.js | 63 --------- .../components/inspector-additions/style.scss | 49 ------- .../src/components/layout/index.js | 39 +++--- .../src/components/layout/sidebar.js | 65 --------- .../src/components/layout/style.scss | 2 +- .../src/components/name-display/index.js | 10 +- .../auto-add-pages.js | 2 +- .../src/components/sidebar/delete-menu.js | 32 +++++ .../src/components/sidebar/index.js | 110 +++++++++++++++ .../manage-locations.js | 21 +-- .../src/components/sidebar/menu-settings.js | 20 +++ .../src/components/sidebar/sidebar-header.js | 68 +++++++++ .../src/components/sidebar/style.scss | 130 ++++++++++++++++++ .../edit-navigation/src/constants/index.js | 13 +- packages/edit-navigation/src/style.scss | 2 +- 17 files changed, 420 insertions(+), 274 deletions(-) delete mode 100644 packages/edit-navigation/src/components/inspector-additions/delete-menu.js delete mode 100644 packages/edit-navigation/src/components/inspector-additions/index.js delete mode 100644 packages/edit-navigation/src/components/inspector-additions/style.scss delete mode 100644 packages/edit-navigation/src/components/layout/sidebar.js rename packages/edit-navigation/src/components/{inspector-additions => sidebar}/auto-add-pages.js (100%) create mode 100644 packages/edit-navigation/src/components/sidebar/delete-menu.js create mode 100644 packages/edit-navigation/src/components/sidebar/index.js rename packages/edit-navigation/src/components/{inspector-additions => sidebar}/manage-locations.js (93%) create mode 100644 packages/edit-navigation/src/components/sidebar/menu-settings.js create mode 100644 packages/edit-navigation/src/components/sidebar/sidebar-header.js create mode 100644 packages/edit-navigation/src/components/sidebar/style.scss diff --git a/packages/e2e-tests/specs/experiments/navigation-editor.test.js b/packages/e2e-tests/specs/experiments/navigation-editor.test.js index 6613f13138a95c..bf681228dc5c70 100644 --- a/packages/e2e-tests/specs/experiments/navigation-editor.test.js +++ b/packages/e2e-tests/specs/experiments/navigation-editor.test.js @@ -381,10 +381,11 @@ describe( 'Navigation editor', () => { await pressKeyWithModifier( 'primary', 'A' ); } } ); + describe( 'Menu name editor', () => { const initialMenuName = 'Main Menu'; const navigationNameEditorSelector = - '.block-editor-block-inspector .edit-navigation-name-editor__text-control'; + '.edit-navigation-name-editor__text-control'; const inputSelector = `${ navigationNameEditorSelector } input`; let navigatorNameEditor, input; beforeEach( async () => { @@ -406,12 +407,6 @@ describe( 'Navigation editor', () => { ] ); await visitNavigationEditor(); - const navBlock = await page.waitForSelector( - 'div[aria-label="Block: Navigation"]' - ); - const boundingBox = await navBlock.boundingBox(); - // click on the navigation editor placeholder. - await page.mouse.click( boundingBox.x + 25, boundingBox.y + 25 ); navigatorNameEditor = await page.$( navigationNameEditorSelector ); input = await page.$( inputSelector ); @@ -445,6 +440,7 @@ describe( 'Navigation editor', () => { ] ); await input.focus(); + // clear input const oldName = await page.$eval( inputSelector, @@ -460,17 +456,16 @@ describe( 'Navigation editor', () => { ); await saveButton.click(); await page.waitForSelector( '.components-snackbar' ); - const menuNameButton = await page.waitForXPath( - '//button[contains(@aria-label, "Edit menu name: ' + - newName + - '" ) ]' + const headerSubtitle = await page.waitForSelector( + '.edit-navigation-header__subtitle' ); - expect( menuNameButton ).toBeTruthy(); - const menuNameButtonText = await menuNameButton.evaluate( + expect( headerSubtitle ).toBeTruthy(); + const headerSubtitleText = await headerSubtitle.evaluate( ( element ) => element.innerText ); - expect( menuNameButtonText ).toBe( newName ); + expect( headerSubtitleText ).toBe( `Editing: ${ newName }` ); } ); + it( 'does not save a menu name upon clicking save button when name is empty', async () => { const menuPostResponse = { id: 4, @@ -501,13 +496,14 @@ describe( 'Navigation editor', () => { ); await saveButton.click(); await page.waitForSelector( '.components-snackbar' ); - const menuNameButton = await page.waitForXPath( - '//button[contains(@aria-label, "Edit menu name" ) ]' + const headerSubtitle = await page.waitForSelector( + '.edit-navigation-header__subtitle' ); - const menuNameButtonText = await menuNameButton.evaluate( + expect( headerSubtitle ).toBeTruthy(); + const headerSubtitleText = await headerSubtitle.evaluate( ( element ) => element.innerText ); - expect( menuNameButtonText ).toBe( oldName ); + expect( headerSubtitleText ).toBe( `Editing: ${ oldName }` ); } ); } ); @@ -531,12 +527,6 @@ describe( 'Navigation editor', () => { ] ); await visitNavigationEditor(); - - // Select the navigation block, so inspector controls are visible. - const navigationBlock = await page.waitForSelector( - 'div[aria-label="Block: Navigation"]' - ); - await navigationBlock.click(); } ); afterEach( async () => { diff --git a/packages/edit-navigation/src/components/inspector-additions/delete-menu.js b/packages/edit-navigation/src/components/inspector-additions/delete-menu.js deleted file mode 100644 index bfacb7adebf81e..00000000000000 --- a/packages/edit-navigation/src/components/inspector-additions/delete-menu.js +++ /dev/null @@ -1,30 +0,0 @@ -/** - * WordPress dependencies - */ -import { Button } from '@wordpress/components'; -import { __ } from '@wordpress/i18n'; - -export default function DeleteMenu( { onDeleteMenu, isMenuBeingDeleted } ) { - return ( - - ); -} diff --git a/packages/edit-navigation/src/components/inspector-additions/index.js b/packages/edit-navigation/src/components/inspector-additions/index.js deleted file mode 100644 index 90ff294e08fd78..00000000000000 --- a/packages/edit-navigation/src/components/inspector-additions/index.js +++ /dev/null @@ -1,63 +0,0 @@ -/** - * WordPress dependencies - */ -import { useSelect } from '@wordpress/data'; -import { - InspectorControls, - store as blockEditorStore, -} from '@wordpress/block-editor'; - -/** - * Internal dependencies - */ -import AutoAddPages from './auto-add-pages'; -import DeleteMenu from './delete-menu'; -import ManageLocations from './manage-locations'; -import { NameEditor } from '../name-editor'; -import { PanelBody } from '@wordpress/components'; -import { __ } from '@wordpress/i18n'; - -export default function InspectorAdditions( { - menuId, - menus, - isMenuBeingDeleted, - onDeleteMenu, - onSelectMenu, - isManageLocationsModalOpen, - closeManageLocationsModal, - openManageLocationsModal, -} ) { - const selectedBlock = useSelect( - ( select ) => select( blockEditorStore ).getSelectedBlock(), - [] - ); - - if ( selectedBlock?.name !== 'core/navigation' ) { - return null; - } - - return ( - - - - - - - - - - - - - ); -} diff --git a/packages/edit-navigation/src/components/inspector-additions/style.scss b/packages/edit-navigation/src/components/inspector-additions/style.scss deleted file mode 100644 index b6d84b2986d30c..00000000000000 --- a/packages/edit-navigation/src/components/inspector-additions/style.scss +++ /dev/null @@ -1,49 +0,0 @@ -.edit-navigation-inspector-additions__delete-menu-button { - width: 100%; - justify-content: center; -} - -.edit-navigation-manage-locations__modal { - max-width: 360px; -} - -.edit-navigation-manage-locations__delete-menu-panel { - text-align: center; -} - -.edit-navigation-manage-locations__menu-entry .components-base-control { - width: 100%; -} - -.edit-navigation-manage-locations__edit-button { - flex: 1; -} - -.edit-navigation-manage-locations__menu-entry { - display: flex; - align-items: flex-end; - margin-bottom: $grid-unit-15; - margin-top: $grid-unit-15; - .components-custom-select-control, - .components-custom-select-control__button { - width: 100%; - } - button { - height: 100%; - margin-bottom: 8px; - } -} - -.edit-navigation-manage-locations__select-menu { - padding-right: $grid-unit-10; -} - -.edit-navigation-manage-locations__open-menu-locations-modal-button { - width: 100%; - justify-content: center; -} - -.edit-navigation-manage-locations__theme-location-text-main, -.edit-navigation-manage-locations__theme-location-text-modal { - margin-bottom: $grid-unit-30; -} diff --git a/packages/edit-navigation/src/components/layout/index.js b/packages/edit-navigation/src/components/layout/index.js index 0925f81e4b1c59..9be2cfa8c6bd27 100644 --- a/packages/edit-navigation/src/components/layout/index.js +++ b/packages/edit-navigation/src/components/layout/index.js @@ -35,11 +35,10 @@ import { } from '../../hooks'; import ErrorBoundary from '../error-boundary'; import NavigationEditorShortcuts from './shortcuts'; -import Sidebar from './sidebar'; +import Sidebar from '../sidebar'; import Header from '../header'; import Notices from '../notices'; import Editor from '../editor'; -import InspectorAdditions from '../inspector-additions'; import UnsavedChangesWarning from './unsaved-changes-warning'; import { store as editNavigationStore } from '../../store'; @@ -175,24 +174,6 @@ export default function Layout( { blockEditorSettings } ) { } blocks={ blocks } /> - ) } @@ -205,7 +186,23 @@ export default function Layout( { blockEditorSettings } ) { ) } /> - + diff --git a/packages/edit-navigation/src/components/layout/sidebar.js b/packages/edit-navigation/src/components/layout/sidebar.js deleted file mode 100644 index 8dc3edf44e54ad..00000000000000 --- a/packages/edit-navigation/src/components/layout/sidebar.js +++ /dev/null @@ -1,65 +0,0 @@ -/** - * WordPress dependencies - */ -import { BlockInspector } from '@wordpress/block-editor'; -import { useDispatch } from '@wordpress/data'; -import { useEffect } from '@wordpress/element'; -import { - ComplementaryArea, - store as interfaceStore, -} from '@wordpress/interface'; -import { __ } from '@wordpress/i18n'; -import { cog } from '@wordpress/icons'; - -/** - * Internal dependencies - */ -import { - COMPLEMENTARY_AREA_SCOPE, - COMPLEMENTARY_AREA_ID, -} from '../../constants'; - -function useTogglePermanentSidebar( hasPermanentSidebar ) { - const { enableComplementaryArea, disableComplementaryArea } = useDispatch( - interfaceStore - ); - - useEffect( () => { - if ( hasPermanentSidebar ) { - enableComplementaryArea( - COMPLEMENTARY_AREA_SCOPE, - COMPLEMENTARY_AREA_ID - ); - } else { - disableComplementaryArea( - COMPLEMENTARY_AREA_SCOPE, - COMPLEMENTARY_AREA_ID - ); - } - }, [ - hasPermanentSidebar, - enableComplementaryArea, - disableComplementaryArea, - ] ); -} - -export default function Sidebar( { hasPermanentSidebar } ) { - useTogglePermanentSidebar( hasPermanentSidebar ); - - return ( - } - isPinnable={ ! hasPermanentSidebar } - > - - - ); -} diff --git a/packages/edit-navigation/src/components/layout/style.scss b/packages/edit-navigation/src/components/layout/style.scss index 29f761f346ba37..6f766e33e635b7 100644 --- a/packages/edit-navigation/src/components/layout/style.scss +++ b/packages/edit-navigation/src/components/layout/style.scss @@ -59,7 +59,7 @@ left: auto; // Hide the toggle as the sidebar should be permanently open. - .interface-complementary-area-header { + .edit-navigation-sidebar__panel-tabs > button { display: none; } } diff --git a/packages/edit-navigation/src/components/name-display/index.js b/packages/edit-navigation/src/components/name-display/index.js index 52d04e55a783bb..794e686df4b040 100644 --- a/packages/edit-navigation/src/components/name-display/index.js +++ b/packages/edit-navigation/src/components/name-display/index.js @@ -17,10 +17,7 @@ import { useMenuEntityProp, IsMenuNameControlFocusedContext, } from '../../hooks'; -import { - COMPLEMENTARY_AREA_SCOPE, - COMPLEMENTARY_AREA_ID, -} from '../../constants'; +import { SIDEBAR_SCOPE, SIDEBAR_MENU } from '../../constants'; export default function NameDisplay() { const { enableComplementaryArea } = useDispatch( interfaceStore ); @@ -42,10 +39,7 @@ export default function NameDisplay() { menuName ) } onClick={ () => { - enableComplementaryArea( - COMPLEMENTARY_AREA_SCOPE, - COMPLEMENTARY_AREA_ID - ); + enableComplementaryArea( SIDEBAR_SCOPE, SIDEBAR_MENU ); setIsMenuNameEditFocused( true ); } } > diff --git a/packages/edit-navigation/src/components/inspector-additions/auto-add-pages.js b/packages/edit-navigation/src/components/sidebar/auto-add-pages.js similarity index 100% rename from packages/edit-navigation/src/components/inspector-additions/auto-add-pages.js rename to packages/edit-navigation/src/components/sidebar/auto-add-pages.js index e1ae4d9fbbe6e7..e09c505b3c617f 100644 --- a/packages/edit-navigation/src/components/inspector-additions/auto-add-pages.js +++ b/packages/edit-navigation/src/components/sidebar/auto-add-pages.js @@ -1,8 +1,8 @@ /** * WordPress dependencies */ -import { ToggleControl } from '@wordpress/components'; import { __ } from '@wordpress/i18n'; +import { ToggleControl } from '@wordpress/components'; /** * Internal dependencies diff --git a/packages/edit-navigation/src/components/sidebar/delete-menu.js b/packages/edit-navigation/src/components/sidebar/delete-menu.js new file mode 100644 index 00000000000000..717279419a5958 --- /dev/null +++ b/packages/edit-navigation/src/components/sidebar/delete-menu.js @@ -0,0 +1,32 @@ +/** + * WordPress dependencies + */ +import { __ } from '@wordpress/i18n'; +import { Button, PanelBody } from '@wordpress/components'; + +export default function DeleteMenu( { onDeleteMenu, isMenuBeingDeleted } ) { + return ( + + + + ); +} diff --git a/packages/edit-navigation/src/components/sidebar/index.js b/packages/edit-navigation/src/components/sidebar/index.js new file mode 100644 index 00000000000000..c7b2c60660f345 --- /dev/null +++ b/packages/edit-navigation/src/components/sidebar/index.js @@ -0,0 +1,110 @@ +/** + * WordPress dependencies + */ +import { __ } from '@wordpress/i18n'; +import { cog } from '@wordpress/icons'; +import { useEffect } from '@wordpress/element'; +import { useSelect, useDispatch } from '@wordpress/data'; +import { + BlockInspector, + store as blockEditorStore, +} from '@wordpress/block-editor'; +import { + ComplementaryArea, + store as interfaceStore, +} from '@wordpress/interface'; + +/** + * Internal dependencies + */ +import SidebarHeader from './sidebar-header'; +import MenuSettings from './menu-settings'; +import ManageLocations from './manage-locations'; +import DeleteMenu from './delete-menu'; +import { SIDEBAR_BLOCK, SIDEBAR_MENU, SIDEBAR_SCOPE } from '../../constants'; + +export default function Sidebar( { + menuId, + menus, + isMenuBeingDeleted, + onDeleteMenu, + onSelectMenu, + isManageLocationsModalOpen, + closeManageLocationsModal, + openManageLocationsModal, + hasPermanentSidebar, +} ) { + const { sidebar, hasBlockSelection, hasSidebarEnabled } = useSelect( + ( select ) => { + const _sidebar = select( + interfaceStore + ).getActiveComplementaryArea( SIDEBAR_SCOPE ); + + const _hasSidebarEnabled = [ SIDEBAR_MENU, SIDEBAR_BLOCK ].includes( + _sidebar + ); + + return { + sidebar: _sidebar, + hasBlockSelection: !! select( + blockEditorStore + ).getBlockSelectionStart(), + hasSidebarEnabled: _hasSidebarEnabled, + }; + }, + [] + ); + const { enableComplementaryArea } = useDispatch( interfaceStore ); + + useEffect( () => { + if ( ! hasSidebarEnabled ) { + return; + } + + if ( hasBlockSelection ) { + enableComplementaryArea( SIDEBAR_SCOPE, SIDEBAR_BLOCK ); + } else { + enableComplementaryArea( SIDEBAR_SCOPE, SIDEBAR_MENU ); + } + }, [ hasBlockSelection, hasSidebarEnabled ] ); + + let sidebarName = sidebar; + if ( ! hasSidebarEnabled ) { + sidebarName = hasBlockSelection ? SIDEBAR_BLOCK : SIDEBAR_MENU; + } + + return ( + } + headerClassName="edit-navigation-sidebar__panel-tabs" + isPinnable={ ! hasPermanentSidebar } + > + { sidebarName === SIDEBAR_MENU && ( + <> + + + + + ) } + { sidebarName === SIDEBAR_BLOCK && } + + ); +} diff --git a/packages/edit-navigation/src/components/inspector-additions/manage-locations.js b/packages/edit-navigation/src/components/sidebar/manage-locations.js similarity index 93% rename from packages/edit-navigation/src/components/inspector-additions/manage-locations.js rename to packages/edit-navigation/src/components/sidebar/manage-locations.js index ba2e3ec705db4e..b941d5d72981af 100644 --- a/packages/edit-navigation/src/components/inspector-additions/manage-locations.js +++ b/packages/edit-navigation/src/components/sidebar/manage-locations.js @@ -1,14 +1,15 @@ /** * WordPress dependencies */ +import { __, sprintf } from '@wordpress/i18n'; import { - Spinner, - SelectControl, - CheckboxControl, Button, + CheckboxControl, Modal, + PanelBody, + Spinner, + SelectControl, } from '@wordpress/components'; -import { __, sprintf } from '@wordpress/i18n'; /** * Internal dependencies @@ -29,12 +30,16 @@ export default function ManageLocations( { toggleMenuLocationAssignment, } = useMenuLocations(); - if ( ! menuLocations ) { + if ( ! menuLocations || ! menus?.length ) { return ; } if ( ! menuLocations.length ) { - return

{ __( 'There are no available menu locations.' ) }

; + return ( + +

{ __( 'There are no available menu locations.' ) }

+ + ); } const themeLocationCountTextMain = sprintf( @@ -124,7 +129,7 @@ export default function ManageLocations( { ) ); return ( - <> +
{ themeLocationCountTextMain }
@@ -151,6 +156,6 @@ export default function ManageLocations( { { menuLocationCard } ) } - + ); } diff --git a/packages/edit-navigation/src/components/sidebar/menu-settings.js b/packages/edit-navigation/src/components/sidebar/menu-settings.js new file mode 100644 index 00000000000000..b07bfd2062302f --- /dev/null +++ b/packages/edit-navigation/src/components/sidebar/menu-settings.js @@ -0,0 +1,20 @@ +/** + * WordPress dependencies + */ +import { __ } from '@wordpress/i18n'; +import { PanelBody } from '@wordpress/components'; + +/** + * Internal dependencies + */ +import { NameEditor } from '../name-editor'; +import AutoAddPages from './auto-add-pages'; + +export default function MenuSettings( { menuId } ) { + return ( + + + + + ); +} diff --git a/packages/edit-navigation/src/components/sidebar/sidebar-header.js b/packages/edit-navigation/src/components/sidebar/sidebar-header.js new file mode 100644 index 00000000000000..c41f3f5076377a --- /dev/null +++ b/packages/edit-navigation/src/components/sidebar/sidebar-header.js @@ -0,0 +1,68 @@ +/** + * WordPress dependencies + */ +import { __ } from '@wordpress/i18n'; +import { Button } from '@wordpress/components'; +import { useDispatch } from '@wordpress/data'; +import { store as interfaceStore } from '@wordpress/interface'; + +/** + * Internal dependencies + */ +import { SIDEBAR_BLOCK, SIDEBAR_MENU, SIDEBAR_SCOPE } from '../../constants'; + +export default function SidebarHeader( { sidebarName } ) { + const { enableComplementaryArea } = useDispatch( interfaceStore ); + const openMenuSettings = () => + enableComplementaryArea( SIDEBAR_SCOPE, SIDEBAR_MENU ); + const openBlockSettings = () => + enableComplementaryArea( SIDEBAR_SCOPE, SIDEBAR_BLOCK ); + + const [ menuAriaLabel, menuActiveClass ] = + sidebarName === SIDEBAR_MENU + ? // translators: ARIA label for the Menu sidebar tab, selected. + [ __( 'Menu (selected)' ), 'is-active' ] + : // translators: ARIA label for the Menu Settings Sidebar tab, not selected. + [ __( 'Menu' ), '' ]; + + const [ blockAriaLabel, blockActiveClass ] = + sidebarName === SIDEBAR_BLOCK + ? // translators: ARIA label for the Block Settings Sidebar tab, selected. + [ __( 'Block (selected)' ), 'is-active' ] + : // translators: ARIA label for the Block Settings Sidebar tab, not selected. + [ __( 'Block' ), '' ]; + + /* Use a list so screen readers will announce how many tabs there are. */ + return ( +
    +
  • + +
    • +
  • + +
    • +
+ ); +} diff --git a/packages/edit-navigation/src/components/sidebar/style.scss b/packages/edit-navigation/src/components/sidebar/style.scss new file mode 100644 index 00000000000000..62f49d9c832ce4 --- /dev/null +++ b/packages/edit-navigation/src/components/sidebar/style.scss @@ -0,0 +1,130 @@ +.components-panel__header.edit-navigation-sidebar__panel-tabs { + justify-content: flex-start; + padding-left: 0; + padding-right: $grid-unit-20; + border-top: 0; + margin-top: 0; + + ul { + display: flex; + } + li { + margin: 0; + } + + .components-button.has-icon { + display: none; + margin: 0 0 0 auto; + padding: 0; + min-width: $icon-size; + height: $icon-size; + + @include break-medium() { + display: flex; + } + } +} + +.components-button.edit-navigation-sidebar__panel-tab { + border-radius: 0; + height: $grid-unit-60; + background: transparent; + border: none; + box-shadow: none; + cursor: pointer; + display: inline-block; + padding: 3px 15px; // Use padding to offset the is-active border, this benefits Windows High Contrast mode + margin-left: 0; + font-weight: 500; + + // This pseudo-element "duplicates" the tab label and sets the text to bold. + // This ensures that the tab doesn't change width when selected. + // See: https://github.com/WordPress/gutenberg/pull/9793 + &::after { + content: attr(data-label); + display: block; + font-weight: 600; + height: 0; + overflow: hidden; + speak: none; + visibility: hidden; + } + + &.is-active { + // The transparent shadow ensures no jumpiness when focus animates on an active tab. + box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) transparent, inset 0 0 -$border-width-tab 0 0 var(--wp-admin-theme-color); + position: relative; + z-index: z-index(".edit-post-sidebar__panel-tab.is-active"); + + // This border appears in Windows High Contrast mode instead of the box-shadow. + &::before { + content: ""; + position: absolute; + top: 0; + bottom: 1px; + right: 0; + left: 0; + border-bottom: $border-width-tab solid transparent; + } + } + + &:focus { + box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color); + position: relative; + z-index: z-index(".edit-post-sidebar__panel-tab.is-active"); + } + + &.is-active:focus { + box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color), inset 0 0 -$border-width-tab 0 0 var(--wp-admin-theme-color); + } +} + +.edit-navigation-inspector-additions__delete-menu-button { + width: 100%; + justify-content: center; +} + +.edit-navigation-manage-locations__modal { + max-width: 360px; +} + +.edit-navigation-manage-locations__delete-menu-panel { + text-align: center; +} + +.edit-navigation-manage-locations__menu-entry .components-base-control { + width: 100%; +} + +.edit-navigation-manage-locations__edit-button { + flex: 1; +} + +.edit-navigation-manage-locations__menu-entry { + display: flex; + align-items: flex-end; + margin-bottom: $grid-unit-15; + margin-top: $grid-unit-15; + .components-custom-select-control, + .components-custom-select-control__button { + width: 100%; + } + button { + height: 100%; + margin-bottom: 8px; + } +} + +.edit-navigation-manage-locations__select-menu { + padding-right: $grid-unit-10; +} + +.edit-navigation-manage-locations__open-menu-locations-modal-button { + width: 100%; + justify-content: center; +} + +.edit-navigation-manage-locations__theme-location-text-main, +.edit-navigation-manage-locations__theme-location-text-modal { + margin-bottom: $grid-unit-30; +} diff --git a/packages/edit-navigation/src/constants/index.js b/packages/edit-navigation/src/constants/index.js index 68a072f8803909..aa43ab0b446937 100644 --- a/packages/edit-navigation/src/constants/index.js +++ b/packages/edit-navigation/src/constants/index.js @@ -31,14 +31,21 @@ export const NAVIGATION_POST_POST_TYPE = 'postType'; * * @type {string} */ -export const COMPLEMENTARY_AREA_SCOPE = 'core/edit-navigation'; +export const SIDEBAR_SCOPE = 'core/edit-navigation'; /** - * The identifier of the editor's complementary area. + * The identifier of the editor's menu complementary area. * * @type {string} */ -export const COMPLEMENTARY_AREA_ID = 'edit-navigation/block-inspector'; +export const SIDEBAR_MENU = 'edit-navigation/menu'; + +/** + * The identifier of the editor's block complementary area. + * + * @type {string} + */ +export const SIDEBAR_BLOCK = 'edit-navigation/block-inspector'; /** * The string identifier for the menu item's "target" attribute indicating diff --git a/packages/edit-navigation/src/style.scss b/packages/edit-navigation/src/style.scss index 5667e52290c76f..d3865a1dfff8ea 100644 --- a/packages/edit-navigation/src/style.scss +++ b/packages/edit-navigation/src/style.scss @@ -12,7 +12,7 @@ $navigation-editor-spacing-top: $grid-unit-50 * 2; @import "./components/editor/style.scss"; @import "./components/error-boundary/style.scss"; @import "./components/header/style.scss"; -@import "./components/inspector-additions/style.scss"; +@import "./components/sidebar/style.scss"; @import "./components/layout/style.scss"; @import "./components/menu-switcher/style.scss"; @import "./components/notices/style.scss";