From 42dd3b5c38e407b3498558cd17c3ae86b48f9c1c Mon Sep 17 00:00:00 2001 From: Jorge Date: Mon, 2 Jan 2023 17:22:28 +0000 Subject: [PATCH] Add: Navigation to the browse mode sidebar. --- .../src/components/off-canvas-editor/block.js | 1 + .../sidebar-navigation-item/style.scss | 31 +++++++++++++++++-- .../sidebar-navigation-screen-main/index.js | 25 ++++++++++++++- .../index.js | 25 +++++++++++++++ .../style.scss | 12 +++++++ .../edit-site/src/components/sidebar/index.js | 2 ++ packages/edit-site/src/style.scss | 1 + 7 files changed, 93 insertions(+), 4 deletions(-) create mode 100644 packages/edit-site/src/components/sidebar-navigation-screen-navigation-menus/index.js create mode 100644 packages/edit-site/src/components/sidebar-navigation-screen-navigation-menus/style.scss diff --git a/packages/block-editor/src/components/off-canvas-editor/block.js b/packages/block-editor/src/components/off-canvas-editor/block.js index e79dc59133040..2aafee3a6fa68 100644 --- a/packages/block-editor/src/components/off-canvas-editor/block.js +++ b/packages/block-editor/src/components/off-canvas-editor/block.js @@ -209,6 +209,7 @@ function ListViewBlock( { const listViewBlockEditClassName = classnames( 'block-editor-list-view-block__menu-cell', + 'block-editor-list-view-block__menu-edit', { 'is-visible': isHovered || isFirstSelectedBlock } ); diff --git a/packages/edit-site/src/components/sidebar-navigation-item/style.scss b/packages/edit-site/src/components/sidebar-navigation-item/style.scss index 7d77e2cb8b76d..0670e0a2f9b6c 100644 --- a/packages/edit-site/src/components/sidebar-navigation-item/style.scss +++ b/packages/edit-site/src/components/sidebar-navigation-item/style.scss @@ -3,15 +3,40 @@ border-width: $border-width-tab; &:hover, - &:focus { + &:focus, + &[aria-current] { color: $white; background: $gray-800; border-width: $border-width-tab; } &[aria-current] { - color: $white; background: var(--wp-admin-theme-color); - border-width: $border-width-tab; } } + +.edit-site-sidebar-navigation-screen__content .edit-site-navigation-inspector .components-button { + color: $gray-600; + &:hover, + &:focus, + &[aria-current] { + color: $white; + } +} + +.edit-site-sidebar-navigation-screen__content .edit-site-navigation-inspector .offcanvas-editor-list-view-leaf { + &:hover, + &:focus, + &[aria-current] { + background: $gray-800; + } + .block-editor-list-view-block__menu { + margin-left: -$grid-unit-10; + } +} + +.edit-site-sidebar-navigation-screen__content .block-editor-list-view-block-select-button { + cursor: grab; + width: calc(100% - #{ $border-width-focus }); + padding: $grid-unit-10; +} diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-main/index.js b/packages/edit-site/src/components/sidebar-navigation-screen-main/index.js index e7faaa2eca4df..f80ce4453f024 100644 --- a/packages/edit-site/src/components/sidebar-navigation-screen-main/index.js +++ b/packages/edit-site/src/components/sidebar-navigation-screen-main/index.js @@ -6,7 +6,9 @@ import { __experimentalNavigatorButton as NavigatorButton, } from '@wordpress/components'; import { __ } from '@wordpress/i18n'; -import { layout, symbolFilled } from '@wordpress/icons'; +import { layout, symbolFilled, navigation } from '@wordpress/icons'; +import { useSelect } from '@wordpress/data'; +import { store as coreStore } from '@wordpress/core-data'; /** * Internal dependencies @@ -15,12 +17,33 @@ import SidebarNavigationScreen from '../sidebar-navigation-screen'; import SidebarNavigationItem from '../sidebar-navigation-item'; export default function SidebarNavigationScreenMain() { + const { navigationMenus } = useSelect( ( select ) => { + const { getEntityRecords } = select( coreStore ); + return { + navigationMenus: getEntityRecords( 'postType', 'wp_navigation', { + per_page: -1, + status: 'publish', + } ), + }; + } ); return ( + { !! window?.__experimentalEnableOffCanvasNavigationEditor && + !! navigationMenus && + navigationMenus.length > 0 && ( + + { __( 'Navigation' ) } + + ) } + + + } + /> + ); +} diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menus/style.scss b/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menus/style.scss new file mode 100644 index 0000000000000..81196bac163ae --- /dev/null +++ b/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menus/style.scss @@ -0,0 +1,12 @@ +.edit-site-sidebar-navigation-screen-navigation-menus { + .block-editor-list-view-block__menu-edit, + .edit-site-navigation-inspector__select-menu { + display: none; + } + .offcanvas-editor-list-view-leaf { + max-width: calc(100% - #{ $grid-unit-05 }); + } + .block-editor-list-view-leaf .block-editor-list-view-block__contents-cell { + width: 100%; + } +} diff --git a/packages/edit-site/src/components/sidebar/index.js b/packages/edit-site/src/components/sidebar/index.js index 1a0f2bcfb6f2b..80f5997be118f 100644 --- a/packages/edit-site/src/components/sidebar/index.js +++ b/packages/edit-site/src/components/sidebar/index.js @@ -10,6 +10,7 @@ import { __experimentalNavigatorProvider as NavigatorProvider } from '@wordpress import SidebarNavigationScreenMain from '../sidebar-navigation-screen-main'; import SidebarNavigationScreenTemplates from '../sidebar-navigation-screen-templates'; import useSyncSidebarPathWithURL from '../sync-state-with-url/use-sync-sidebar-path-with-url'; +import SidebarNavigationScreenNavigationMenus from '../sidebar-navigation-screen-navigation-menus'; function SidebarScreens() { useSyncSidebarPathWithURL(); @@ -17,6 +18,7 @@ function SidebarScreens() { return ( <> + diff --git a/packages/edit-site/src/style.scss b/packages/edit-site/src/style.scss index ceb311f8cd0a4..7f7f7aef08334 100644 --- a/packages/edit-site/src/style.scss +++ b/packages/edit-site/src/style.scss @@ -24,6 +24,7 @@ @import "./components/sidebar-navigation-screen/style.scss"; @import "./components/sidebar-navigation-screen-templates/style.scss"; @import "./components/site-hub/style.scss"; +@import "./components/sidebar-navigation-screen-navigation-menus/style.scss"; @import "./components/site-icon/style.scss"; @import "./components/style-book/style.scss"; @import "./hooks/push-changes-to-global-styles/style.scss";