From b60e041eb7ab2da89a9599e0d68806206056ba59 Mon Sep 17 00:00:00 2001 From: David Szabo Date: Thu, 24 Sep 2020 15:45:13 +0200 Subject: [PATCH 01/22] Add page switcher --- .../left-sidebar/navigation-panel/index.js | 43 ++++--- .../navigation-panel/page-switcher/index.js | 115 ++++++++++++++++++ 2 files changed, 141 insertions(+), 17 deletions(-) create mode 100644 packages/edit-site/src/components/left-sidebar/navigation-panel/page-switcher/index.js diff --git a/packages/edit-site/src/components/left-sidebar/navigation-panel/index.js b/packages/edit-site/src/components/left-sidebar/navigation-panel/index.js index bbf12e4dc786b7..968d1ed83720ff 100644 --- a/packages/edit-site/src/components/left-sidebar/navigation-panel/index.js +++ b/packages/edit-site/src/components/left-sidebar/navigation-panel/index.js @@ -18,6 +18,7 @@ import { __ } from '@wordpress/i18n'; import TemplatesMenu from './menus/templates'; import TemplatePartsMenu from './menus/template-parts'; import { MENU_ROOT, MENU_TEMPLATE_PARTS, MENU_TEMPLATES } from './constants'; +import PageSwitcher from './page-switcher'; export const { Fill: NavigationPanelPreviewFill, @@ -33,29 +34,35 @@ const NavigationPanel = () => { } }, [ ref ] ); - const { templateId, templatePartId, templateType, activeMenu } = useSelect( - ( select ) => { - const { - getTemplateId, - getTemplatePartId, - getTemplateType, - getNavigationPanelActiveMenu, - } = select( 'core/edit-site' ); + const { + templateId, + templatePartId, + templateType, + activeMenu, + page, + } = useSelect( ( select ) => { + const { + getTemplateId, + getTemplatePartId, + getTemplateType, + getNavigationPanelActiveMenu, + getPage, + } = select( 'core/edit-site' ); - return { - templateId: getTemplateId(), - templatePartId: getTemplatePartId(), - templateType: getTemplateType(), - activeMenu: getNavigationPanelActiveMenu(), - }; - }, - [] - ); + return { + page: getPage(), + templateId: getTemplateId(), + templatePartId: getTemplatePartId(), + templateType: getTemplateType(), + activeMenu: getNavigationPanelActiveMenu(), + }; + }, [] ); const { setTemplate, setTemplatePart, setNavigationPanelActiveMenu, + setPage, } = useDispatch( 'core/edit-site' ); return ( @@ -92,6 +99,8 @@ const NavigationPanel = () => { + + diff --git a/packages/edit-site/src/components/left-sidebar/navigation-panel/page-switcher/index.js b/packages/edit-site/src/components/left-sidebar/navigation-panel/page-switcher/index.js new file mode 100644 index 00000000000000..216cbba6d4175c --- /dev/null +++ b/packages/edit-site/src/components/left-sidebar/navigation-panel/page-switcher/index.js @@ -0,0 +1,115 @@ +/** + * WordPress dependencies + */ +import { Fragment } from '@wordpress/element'; +import { getPathAndQueryString } from '@wordpress/url'; +import { useSelect } from '@wordpress/data'; +import { + __experimentalNavigationGroup as NavigationGroup, + __experimentalNavigationItem as NavigationItem, +} from '@wordpress/components'; + +const NavigationEntityItems = ( props ) => { + const { + kind, + name, + query = {}, + + renderItem, + } = props; + + const entities = useSelect( + ( select ) => { + const { getEntityRecords } = select( 'core' ); + return getEntityRecords( kind, name, query ); + }, + [ kind, name, query ] + ); + + if ( ! entities ) { + return null; + } + + return entities.map( ( entity ) => { + const key = `${ kind }-${ name }-${ entity.id }`; + + return ( + + { renderItem( { + ItemComponent: NavigationItem, + entity, + item: key, + props: { + item: key, + }, + } ) } + + ); + } ); +}; + +export default function PageSwitcher( { onChangePage } ) { + const onPageSelect = ( { type, slug, link, id }, item ) => { + onChangePage( + { + type, + slug, + path: getPathAndQueryString( link ), + context: { + postType: type, + postId: id, + }, + }, + item + ); + }; + + return ( + <> + + ( + onPageSelect( entity, item ) } + /> + ) } + /> + + + + ( + onPageSelect( entity, item ) } + /> + ) } + /> + + + + ( + onPageSelect( entity, item ) } + /> + ) } + /> + + + ); +} From ff6c38abebb9ac030f54c661c93337ce1dcc2f3c Mon Sep 17 00:00:00 2001 From: David Szabo Date: Thu, 24 Sep 2020 15:50:57 +0200 Subject: [PATCH 02/22] Extract NavigationEntityItems and add getKey --- .../navigation-panel/page-switcher/index.js | 58 ++++--------------- .../page-switcher/navigation-entity-items.js | 49 ++++++++++++++++ 2 files changed, 60 insertions(+), 47 deletions(-) create mode 100644 packages/edit-site/src/components/left-sidebar/navigation-panel/page-switcher/navigation-entity-items.js diff --git a/packages/edit-site/src/components/left-sidebar/navigation-panel/page-switcher/index.js b/packages/edit-site/src/components/left-sidebar/navigation-panel/page-switcher/index.js index 216cbba6d4175c..ae6db8913d52de 100644 --- a/packages/edit-site/src/components/left-sidebar/navigation-panel/page-switcher/index.js +++ b/packages/edit-site/src/components/left-sidebar/navigation-panel/page-switcher/index.js @@ -1,52 +1,13 @@ /** * WordPress dependencies */ -import { Fragment } from '@wordpress/element'; import { getPathAndQueryString } from '@wordpress/url'; -import { useSelect } from '@wordpress/data'; -import { - __experimentalNavigationGroup as NavigationGroup, - __experimentalNavigationItem as NavigationItem, -} from '@wordpress/components'; +import { __experimentalNavigationGroup as NavigationGroup } from '@wordpress/components'; -const NavigationEntityItems = ( props ) => { - const { - kind, - name, - query = {}, - - renderItem, - } = props; - - const entities = useSelect( - ( select ) => { - const { getEntityRecords } = select( 'core' ); - return getEntityRecords( kind, name, query ); - }, - [ kind, name, query ] - ); - - if ( ! entities ) { - return null; - } - - return entities.map( ( entity ) => { - const key = `${ kind }-${ name }-${ entity.id }`; - - return ( - - { renderItem( { - ItemComponent: NavigationItem, - entity, - item: key, - props: { - item: key, - }, - } ) } - - ); - } ); -}; +/** + * Internal dependencies + */ +import NavigationEntityItems from './navigation-entity-items'; export default function PageSwitcher( { onChangePage } ) { const onPageSelect = ( { type, slug, link, id }, item ) => { @@ -64,16 +25,19 @@ export default function PageSwitcher( { onChangePage } ) { ); }; + const keyExtractor = ( { entity: { link } } ) => + getPathAndQueryString( link ); + return ( <> ( onPageSelect( entity, item ) } /> @@ -85,10 +49,10 @@ export default function PageSwitcher( { onChangePage } ) { ( onPageSelect( entity, item ) } /> @@ -100,10 +64,10 @@ export default function PageSwitcher( { onChangePage } ) { ( onPageSelect( entity, item ) } /> diff --git a/packages/edit-site/src/components/left-sidebar/navigation-panel/page-switcher/navigation-entity-items.js b/packages/edit-site/src/components/left-sidebar/navigation-panel/page-switcher/navigation-entity-items.js new file mode 100644 index 00000000000000..f40dd097f82936 --- /dev/null +++ b/packages/edit-site/src/components/left-sidebar/navigation-panel/page-switcher/navigation-entity-items.js @@ -0,0 +1,49 @@ +/** + * WordPress dependencies + */ +import { Fragment } from '@wordpress/element'; +import { useSelect } from '@wordpress/data'; +import { __experimentalNavigationItem as NavigationItem } from '@wordpress/components'; + +const defaultKeyExtractor = ( { kind, name, entity } ) => + `${ kind }-${ name }-${ entity.id }`; + +export default function NavigationEntityItems( props ) { + const { + kind, + name, + query = {}, + + getKey = defaultKeyExtractor, + renderItem, + } = props; + + const entities = useSelect( + ( select ) => { + const { getEntityRecords } = select( 'core' ); + return getEntityRecords( kind, name, query ); + }, + [ kind, name, query ] + ); + + if ( ! entities ) { + return null; + } + + return entities.map( ( entity ) => { + const key = getKey( { kind, name, query, entity } ); + + return ( + + { renderItem( { + ItemComponent: NavigationItem, + entity, + item: key, + props: { + item: key, + }, + } ) } + + ); + } ); +} From ba11dea26aededdf1e83635786ec3639ea64b144 Mon Sep 17 00:00:00 2001 From: David Szabo Date: Thu, 24 Sep 2020 15:52:14 +0200 Subject: [PATCH 03/22] Move key extractor outside --- .../navigation-panel/page-switcher/index.js | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/packages/edit-site/src/components/left-sidebar/navigation-panel/page-switcher/index.js b/packages/edit-site/src/components/left-sidebar/navigation-panel/page-switcher/index.js index ae6db8913d52de..260e62a4df488e 100644 --- a/packages/edit-site/src/components/left-sidebar/navigation-panel/page-switcher/index.js +++ b/packages/edit-site/src/components/left-sidebar/navigation-panel/page-switcher/index.js @@ -9,6 +9,9 @@ import { __experimentalNavigationGroup as NavigationGroup } from '@wordpress/com */ import NavigationEntityItems from './navigation-entity-items'; +const pathKeyExtractor = ( { entity: { link } } ) => + getPathAndQueryString( link ); + export default function PageSwitcher( { onChangePage } ) { const onPageSelect = ( { type, slug, link, id }, item ) => { onChangePage( @@ -25,16 +28,13 @@ export default function PageSwitcher( { onChangePage } ) { ); }; - const keyExtractor = ( { entity: { link } } ) => - getPathAndQueryString( link ); - return ( <> ( ( ( Date: Thu, 24 Sep 2020 15:53:07 +0200 Subject: [PATCH 04/22] I18n --- .../left-sidebar/navigation-panel/page-switcher/index.js | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/packages/edit-site/src/components/left-sidebar/navigation-panel/page-switcher/index.js b/packages/edit-site/src/components/left-sidebar/navigation-panel/page-switcher/index.js index 260e62a4df488e..3da54c563f9869 100644 --- a/packages/edit-site/src/components/left-sidebar/navigation-panel/page-switcher/index.js +++ b/packages/edit-site/src/components/left-sidebar/navigation-panel/page-switcher/index.js @@ -3,6 +3,7 @@ */ import { getPathAndQueryString } from '@wordpress/url'; import { __experimentalNavigationGroup as NavigationGroup } from '@wordpress/components'; +import { __ } from '@wordpress/i18n'; /** * Internal dependencies @@ -30,7 +31,7 @@ export default function PageSwitcher( { onChangePage } ) { return ( <> - + - + - + Date: Fri, 9 Oct 2020 09:41:55 +0200 Subject: [PATCH 05/22] Make page switcher a menu --- .../navigation-panel/page-switcher/index.js | 13 ++++++++++--- 1 file changed, 10 insertions(+), 3 deletions(-) diff --git a/packages/edit-site/src/components/left-sidebar/navigation-panel/page-switcher/index.js b/packages/edit-site/src/components/left-sidebar/navigation-panel/page-switcher/index.js index 3da54c563f9869..937125922fc176 100644 --- a/packages/edit-site/src/components/left-sidebar/navigation-panel/page-switcher/index.js +++ b/packages/edit-site/src/components/left-sidebar/navigation-panel/page-switcher/index.js @@ -2,7 +2,10 @@ * WordPress dependencies */ import { getPathAndQueryString } from '@wordpress/url'; -import { __experimentalNavigationGroup as NavigationGroup } from '@wordpress/components'; +import { + __experimentalNavigationGroup as NavigationGroup, + __experimentalNavigationMenu as NavigationMenu, +} from '@wordpress/components'; import { __ } from '@wordpress/i18n'; /** @@ -30,7 +33,11 @@ export default function PageSwitcher( { onChangePage } ) { }; return ( - <> + - + ); } From 7405b06bb6399f411bcfd170ebf14270f655187b Mon Sep 17 00:00:00 2001 From: David Szabo Date: Fri, 9 Oct 2020 09:42:53 +0200 Subject: [PATCH 06/22] Determine activeItem for content menu --- .../left-sidebar/navigation-panel/index.js | 14 +++++++++----- 1 file changed, 9 insertions(+), 5 deletions(-) diff --git a/packages/edit-site/src/components/left-sidebar/navigation-panel/index.js b/packages/edit-site/src/components/left-sidebar/navigation-panel/index.js index 968d1ed83720ff..496ff41152ed8a 100644 --- a/packages/edit-site/src/components/left-sidebar/navigation-panel/index.js +++ b/packages/edit-site/src/components/left-sidebar/navigation-panel/index.js @@ -65,14 +65,18 @@ const NavigationPanel = () => { setPage, } = useDispatch( 'core/edit-site' ); + let activeItem = + 'wp_template' === templateType + ? `${ templateType }-${ templateId }` + : `${ templateType }-${ templatePartId }`; + if ( activeMenu === 'content' && page ) { + activeItem = page.path; + } + return (
From 1eae588ab830e420f5009e5873fef0cc57e90ccc Mon Sep 17 00:00:00 2001 From: David Szabo Date: Fri, 9 Oct 2020 09:48:32 +0200 Subject: [PATCH 07/22] Refactor and add navigation item --- .../src/components/left-sidebar/navigation-panel/index.js | 8 +++++++- .../{page-switcher/index.js => menus/content.js} | 4 ++-- .../{page-switcher => }/navigation-entity-items.js | 0 3 files changed, 9 insertions(+), 3 deletions(-) rename packages/edit-site/src/components/left-sidebar/navigation-panel/{page-switcher/index.js => menus/content.js} (94%) rename packages/edit-site/src/components/left-sidebar/navigation-panel/{page-switcher => }/navigation-entity-items.js (100%) diff --git a/packages/edit-site/src/components/left-sidebar/navigation-panel/index.js b/packages/edit-site/src/components/left-sidebar/navigation-panel/index.js index 496ff41152ed8a..59567583f152f4 100644 --- a/packages/edit-site/src/components/left-sidebar/navigation-panel/index.js +++ b/packages/edit-site/src/components/left-sidebar/navigation-panel/index.js @@ -19,6 +19,7 @@ import TemplatesMenu from './menus/templates'; import TemplatePartsMenu from './menus/template-parts'; import { MENU_ROOT, MENU_TEMPLATE_PARTS, MENU_TEMPLATES } from './constants'; import PageSwitcher from './page-switcher'; +import ContentMenu from './menus/content'; export const { Fill: NavigationPanelPreviewFill, @@ -100,11 +101,16 @@ const NavigationPanel = () => { navigateToMenu={ MENU_TEMPLATE_PARTS } /> + + - + diff --git a/packages/edit-site/src/components/left-sidebar/navigation-panel/page-switcher/index.js b/packages/edit-site/src/components/left-sidebar/navigation-panel/menus/content.js similarity index 94% rename from packages/edit-site/src/components/left-sidebar/navigation-panel/page-switcher/index.js rename to packages/edit-site/src/components/left-sidebar/navigation-panel/menus/content.js index 937125922fc176..c80051d572653d 100644 --- a/packages/edit-site/src/components/left-sidebar/navigation-panel/page-switcher/index.js +++ b/packages/edit-site/src/components/left-sidebar/navigation-panel/menus/content.js @@ -11,12 +11,12 @@ import { __ } from '@wordpress/i18n'; /** * Internal dependencies */ -import NavigationEntityItems from './navigation-entity-items'; +import NavigationEntityItems from '../navigation-entity-items'; const pathKeyExtractor = ( { entity: { link } } ) => getPathAndQueryString( link ); -export default function PageSwitcher( { onChangePage } ) { +export default function ContentMenu( { onChangePage } ) { const onPageSelect = ( { type, slug, link, id }, item ) => { onChangePage( { diff --git a/packages/edit-site/src/components/left-sidebar/navigation-panel/page-switcher/navigation-entity-items.js b/packages/edit-site/src/components/left-sidebar/navigation-panel/navigation-entity-items.js similarity index 100% rename from packages/edit-site/src/components/left-sidebar/navigation-panel/page-switcher/navigation-entity-items.js rename to packages/edit-site/src/components/left-sidebar/navigation-panel/navigation-entity-items.js From a7d16a5054ac955275eeca6b532b4e1eac745bb8 Mon Sep 17 00:00:00 2001 From: David Szabo Date: Fri, 9 Oct 2020 09:49:51 +0200 Subject: [PATCH 08/22] Destrucutre props inline --- .../navigation-panel/navigation-entity-items.js | 16 +++++++--------- 1 file changed, 7 insertions(+), 9 deletions(-) diff --git a/packages/edit-site/src/components/left-sidebar/navigation-panel/navigation-entity-items.js b/packages/edit-site/src/components/left-sidebar/navigation-panel/navigation-entity-items.js index f40dd097f82936..9a83fb3991ec0f 100644 --- a/packages/edit-site/src/components/left-sidebar/navigation-panel/navigation-entity-items.js +++ b/packages/edit-site/src/components/left-sidebar/navigation-panel/navigation-entity-items.js @@ -8,16 +8,14 @@ import { __experimentalNavigationItem as NavigationItem } from '@wordpress/compo const defaultKeyExtractor = ( { kind, name, entity } ) => `${ kind }-${ name }-${ entity.id }`; -export default function NavigationEntityItems( props ) { - const { - kind, - name, - query = {}, - - getKey = defaultKeyExtractor, - renderItem, - } = props; +export default function NavigationEntityItems( { + kind, + name, + query = {}, + getKey = defaultKeyExtractor, + renderItem, +} ) { const entities = useSelect( ( select ) => { const { getEntityRecords } = select( 'core' ); From e97902d6b2cddaadf8ac959e65cc35e9a9620bb0 Mon Sep 17 00:00:00 2001 From: David Szabo Date: Fri, 9 Oct 2020 09:58:51 +0200 Subject: [PATCH 09/22] Remove old page switcher --- .../edit-site/src/components/header/index.js | 26 +-- .../src/components/page-switcher/index.js | 156 ------------------ .../src/components/page-switcher/style.scss | 20 --- 3 files changed, 2 insertions(+), 200 deletions(-) delete mode 100644 packages/edit-site/src/components/page-switcher/index.js delete mode 100644 packages/edit-site/src/components/page-switcher/style.scss diff --git a/packages/edit-site/src/components/header/index.js b/packages/edit-site/src/components/header/index.js index b84e49684b4cd3..93857414879665 100644 --- a/packages/edit-site/src/components/header/index.js +++ b/packages/edit-site/src/components/header/index.js @@ -21,7 +21,6 @@ import { Button } from '@wordpress/components'; * Internal dependencies */ import MoreMenu from './more-menu'; -import PageSwitcher from '../page-switcher'; import SaveButton from '../save-button'; import UndoButton from './undo-redo/undo'; import RedoButton from './undo-redo/redo'; @@ -35,27 +34,16 @@ export default function Header( { isNavigationOpen, onToggleNavigation, } ) { - const { - deviceType, - hasFixedToolbar, - template, - page, - showOnFront, - } = useSelect( ( select ) => { + const { deviceType, hasFixedToolbar, template } = useSelect( ( select ) => { const { __experimentalGetPreviewDeviceType, isFeatureActive, getTemplateId, getTemplatePartId, getTemplateType, - getPage, } = select( 'core/edit-site' ); - const { getEntityRecord, getEditedEntityRecord } = select( 'core' ); - const { show_on_front: _showOnFront } = getEditedEntityRecord( - 'root', - 'site' - ); + const { getEntityRecord } = select( 'core' ); const _templateId = getTemplateId(); return { @@ -65,14 +53,11 @@ export default function Header( { template: getEntityRecord( 'postType', 'wp_template', _templateId ), templatePartId: getTemplatePartId(), templateType: getTemplateType(), - page: getPage(), - showOnFront: _showOnFront, }; }, [] ); const { __experimentalSetPreviewDeviceType: setPreviewDeviceType, - setPage, } = useDispatch( 'core/edit-site' ); const isLargeViewport = useViewportMatch( 'medium' ); @@ -109,13 +94,6 @@ export default function Header( {
) } -
- -
diff --git a/packages/edit-site/src/components/page-switcher/index.js b/packages/edit-site/src/components/page-switcher/index.js deleted file mode 100644 index ffef44bc45dc27..00000000000000 --- a/packages/edit-site/src/components/page-switcher/index.js +++ /dev/null @@ -1,156 +0,0 @@ -/** - * WordPress dependencies - */ -import { getPathAndQueryString } from '@wordpress/url'; -import { useSelect } from '@wordpress/data'; -import { - Tooltip, - DropdownMenu, - MenuGroup, - MenuItemsChoice, -} from '@wordpress/components'; -import { Icon, home } from '@wordpress/icons'; -import { __ } from '@wordpress/i18n'; -import { __experimentalLinkControl as LinkControl } from '@wordpress/block-editor'; - -export default function PageSwitcher( { - showOnFront, - activePage, - onActivePageChange, -} ) { - const { pages = [], categories = [], posts = [] } = useSelect( - ( select ) => { - const { getEntityRecords } = select( 'core' ); - const pageGroups = { - pages: getEntityRecords( 'postType', 'page' )?.map( - ( _page ) => { - const path = getPathAndQueryString( _page.link ); - return { - label: - path === '/' ? ( - <> - { _page.title.rendered } - -
- -
- - - ) : ( - _page.title.rendered - ), - type: 'page', - slug: _page.slug, - value: path, - context: { - postType: 'page', - postId: _page.id, - }, - }; - } - ), - categories: getEntityRecords( 'taxonomy', 'category' )?.map( - ( category ) => { - const path = getPathAndQueryString( category.link ); - return { - label: category.name, - type: 'category', - slug: category.slug, - value: path, - context: { - query: { categoryIds: [ category.id ] }, - queryContext: { page: 1 }, - }, - }; - } - ), - posts: [], - }; - if ( showOnFront === 'posts' ) - pageGroups.posts.unshift( { - label: ( - <> - { __( 'All Posts' ) } - -
- -
- - - ), - value: '/', - context: { - query: { categoryIds: [] }, - queryContext: { page: 1 }, - }, - } ); - return pageGroups; - }, - [ showOnFront ] - ); - - const onPageSelect = ( newPath ) => { - const { value: path, ...rest } = [ - ...pages, - ...categories, - ...posts, - ].find( ( choice ) => choice.value === newPath ); - onActivePageChange( { ...rest, path } ); - }; - - const onPostSelect = ( post ) => - onActivePageChange( { - type: 'post', - slug: post.slug, - path: getPathAndQueryString( post.url ), - context: { postType: post.type, postId: post.id }, - } ); - - const activePath = activePage?.path; - return ( - choice.value === activePath - )?.label || activePath, - } } - menuProps={ { className: 'edit-site-page-switcher__menu' } } - > - { () => ( - <> - - - - - - - - - - - - ) } - - ); -} diff --git a/packages/edit-site/src/components/page-switcher/style.scss b/packages/edit-site/src/components/page-switcher/style.scss deleted file mode 100644 index f1cf2b8b991334..00000000000000 --- a/packages/edit-site/src/components/page-switcher/style.scss +++ /dev/null @@ -1,20 +0,0 @@ -.edit-site-page-switcher__menu { - .block-editor-link-control { - width: 100%; - } - - .block-editor-link-control .block-editor-link-control__search-input.block-editor-link-control__search-input input[type="text"] { - margin-left: 0; - margin-right: 0; - width: 100%; - } - - .block-editor-link-control__search-actions { - right: 3px; - } - - .block-editor-link-control__settings { - padding-left: 0; - padding-right: 0; - } -} From bbafd7746f379a224379a0b32107aa72f74b5129 Mon Sep 17 00:00:00 2001 From: David Szabo Date: Fri, 9 Oct 2020 15:05:20 +0200 Subject: [PATCH 10/22] Remove page switcher style import --- packages/edit-site/src/style.scss | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/edit-site/src/style.scss b/packages/edit-site/src/style.scss index 765b866eab48c6..ee90929903c16b 100644 --- a/packages/edit-site/src/style.scss +++ b/packages/edit-site/src/style.scss @@ -9,7 +9,6 @@ @import "./components/left-sidebar/inserter-panel/style.scss"; @import "./components/left-sidebar/navigation-panel/style.scss"; @import "./components/notices/style.scss"; -@import "./components/page-switcher/style.scss"; @import "./components/sidebar/style.scss"; @import "./components/editor/style.scss"; @import "./components/template-details/style.scss"; From 9fc33927af2d12ff6a76869f4e2239ce7d2e3f04 Mon Sep 17 00:00:00 2001 From: David Szabo Date: Fri, 9 Oct 2020 15:40:40 +0200 Subject: [PATCH 11/22] Format --- packages/edit-site/src/components/header/index.js | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/edit-site/src/components/header/index.js b/packages/edit-site/src/components/header/index.js index 93857414879665..1ad5ac9727505e 100644 --- a/packages/edit-site/src/components/header/index.js +++ b/packages/edit-site/src/components/header/index.js @@ -42,7 +42,6 @@ export default function Header( { getTemplatePartId, getTemplateType, } = select( 'core/edit-site' ); - const { getEntityRecord } = select( 'core' ); const _templateId = getTemplateId(); From c55f6a386f1fd1fa9ecc966a70f65ae15de919bf Mon Sep 17 00:00:00 2001 From: David Szabo Date: Fri, 9 Oct 2020 15:40:50 +0200 Subject: [PATCH 12/22] Format --- .../left-sidebar/navigation-panel/navigation-entity-items.js | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/packages/edit-site/src/components/left-sidebar/navigation-panel/navigation-entity-items.js b/packages/edit-site/src/components/left-sidebar/navigation-panel/navigation-entity-items.js index 9a83fb3991ec0f..03b4dec2c8df1c 100644 --- a/packages/edit-site/src/components/left-sidebar/navigation-panel/navigation-entity-items.js +++ b/packages/edit-site/src/components/left-sidebar/navigation-panel/navigation-entity-items.js @@ -17,10 +17,7 @@ export default function NavigationEntityItems( { renderItem, } ) { const entities = useSelect( - ( select ) => { - const { getEntityRecords } = select( 'core' ); - return getEntityRecords( kind, name, query ); - }, + ( select ) => select( 'core' ).getEntityRecords( kind, name, query ), [ kind, name, query ] ); From 9727365229fcb75c67d6c34acf43cd5b0d31e18b Mon Sep 17 00:00:00 2001 From: David Szabo Date: Fri, 9 Oct 2020 15:41:01 +0200 Subject: [PATCH 13/22] Add content prefix --- .../src/components/left-sidebar/navigation-panel/index.js | 2 +- .../components/left-sidebar/navigation-panel/menus/content.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/edit-site/src/components/left-sidebar/navigation-panel/index.js b/packages/edit-site/src/components/left-sidebar/navigation-panel/index.js index 59567583f152f4..f897b3f404dacd 100644 --- a/packages/edit-site/src/components/left-sidebar/navigation-panel/index.js +++ b/packages/edit-site/src/components/left-sidebar/navigation-panel/index.js @@ -71,7 +71,7 @@ const NavigationPanel = () => { ? `${ templateType }-${ templateId }` : `${ templateType }-${ templatePartId }`; if ( activeMenu === 'content' && page ) { - activeItem = page.path; + activeItem = `content-${ page.path }`; } return ( diff --git a/packages/edit-site/src/components/left-sidebar/navigation-panel/menus/content.js b/packages/edit-site/src/components/left-sidebar/navigation-panel/menus/content.js index c80051d572653d..80ba8fe9464c09 100644 --- a/packages/edit-site/src/components/left-sidebar/navigation-panel/menus/content.js +++ b/packages/edit-site/src/components/left-sidebar/navigation-panel/menus/content.js @@ -14,7 +14,7 @@ import { __ } from '@wordpress/i18n'; import NavigationEntityItems from '../navigation-entity-items'; const pathKeyExtractor = ( { entity: { link } } ) => - getPathAndQueryString( link ); + `content-${ getPathAndQueryString( link ) }`; export default function ContentMenu( { onChangePage } ) { const onPageSelect = ( { type, slug, link, id }, item ) => { From 528bf83b7cb688098dab2b2480dabf552a8223fb Mon Sep 17 00:00:00 2001 From: David Szabo Date: Mon, 12 Oct 2020 10:56:10 +0200 Subject: [PATCH 14/22] Separate content from theme navigation --- .../navigation-panel/content-navigation.js | 56 ++++++++++++ .../left-sidebar/navigation-panel/index.js | 68 ++++++--------- .../menus/content-categories.js | 22 +++++ .../navigation-panel/menus/content-pages.js | 22 +++++ .../navigation-panel/menus/content-posts.js | 22 +++++ .../navigation-panel/menus/content.js | 87 ------------------- .../navigation-entity-items.js | 54 +++++++----- .../left-sidebar/navigation-panel/style.scss | 5 +- 8 files changed, 180 insertions(+), 156 deletions(-) create mode 100644 packages/edit-site/src/components/left-sidebar/navigation-panel/content-navigation.js create mode 100644 packages/edit-site/src/components/left-sidebar/navigation-panel/menus/content-categories.js create mode 100644 packages/edit-site/src/components/left-sidebar/navigation-panel/menus/content-pages.js create mode 100644 packages/edit-site/src/components/left-sidebar/navigation-panel/menus/content-posts.js delete mode 100644 packages/edit-site/src/components/left-sidebar/navigation-panel/menus/content.js diff --git a/packages/edit-site/src/components/left-sidebar/navigation-panel/content-navigation.js b/packages/edit-site/src/components/left-sidebar/navigation-panel/content-navigation.js new file mode 100644 index 00000000000000..e3934070816932 --- /dev/null +++ b/packages/edit-site/src/components/left-sidebar/navigation-panel/content-navigation.js @@ -0,0 +1,56 @@ +/** + * WordPress dependencies + */ +import { useState } from '@wordpress/element'; +import { + __experimentalNavigation as Navigation, + __experimentalNavigationMenu as NavigationMenu, + __experimentalNavigationItem as NavigationItem, +} from '@wordpress/components'; +import { useSelect } from '@wordpress/data'; +import { __ } from '@wordpress/i18n'; + +/** + * Internal dependencies + */ +import ContentPagesMenu from './menus/content-pages'; +import ContentCategoriesMenu from './menus/content-categories'; +import ContentPostsMenu from './menus/content-posts'; + +export default function ContentNavigation() { + const [ activeMenu, setActiveMenu ] = useState( 'root' ); + + const page = useSelect( + ( select ) => select( 'core/edit-site' ).getPage(), + [] + ); + + return ( + + + + + + + + + + + + + + ); +} diff --git a/packages/edit-site/src/components/left-sidebar/navigation-panel/index.js b/packages/edit-site/src/components/left-sidebar/navigation-panel/index.js index f897b3f404dacd..81078fff7cefdf 100644 --- a/packages/edit-site/src/components/left-sidebar/navigation-panel/index.js +++ b/packages/edit-site/src/components/left-sidebar/navigation-panel/index.js @@ -18,8 +18,7 @@ import { __ } from '@wordpress/i18n'; import TemplatesMenu from './menus/templates'; import TemplatePartsMenu from './menus/template-parts'; import { MENU_ROOT, MENU_TEMPLATE_PARTS, MENU_TEMPLATES } from './constants'; -import PageSwitcher from './page-switcher'; -import ContentMenu from './menus/content'; +import ContentNavigation from './content-navigation'; export const { Fill: NavigationPanelPreviewFill, @@ -35,49 +34,39 @@ const NavigationPanel = () => { } }, [ ref ] ); - const { - templateId, - templatePartId, - templateType, - activeMenu, - page, - } = useSelect( ( select ) => { - const { - getTemplateId, - getTemplatePartId, - getTemplateType, - getNavigationPanelActiveMenu, - getPage, - } = select( 'core/edit-site' ); - - return { - page: getPage(), - templateId: getTemplateId(), - templatePartId: getTemplatePartId(), - templateType: getTemplateType(), - activeMenu: getNavigationPanelActiveMenu(), - }; - }, [] ); + const { templateId, templatePartId, templateType, activeMenu } = useSelect( + ( select ) => { + const { + getTemplateId, + getTemplatePartId, + getTemplateType, + getNavigationPanelActiveMenu, + } = select( 'core/edit-site' ); + + return { + templateId: getTemplateId(), + templatePartId: getTemplatePartId(), + templateType: getTemplateType(), + activeMenu: getNavigationPanelActiveMenu(), + }; + }, + [] + ); const { setTemplate, setTemplatePart, setNavigationPanelActiveMenu, - setPage, } = useDispatch( 'core/edit-site' ); - let activeItem = - 'wp_template' === templateType - ? `${ templateType }-${ templateId }` - : `${ templateType }-${ templatePartId }`; - if ( activeMenu === 'content' && page ) { - activeItem = `content-${ page.path }`; - } - return (
@@ -101,19 +90,14 @@ const NavigationPanel = () => { navigateToMenu={ MENU_TEMPLATE_PARTS } /> - - - - + +
); diff --git a/packages/edit-site/src/components/left-sidebar/navigation-panel/menus/content-categories.js b/packages/edit-site/src/components/left-sidebar/navigation-panel/menus/content-categories.js new file mode 100644 index 00000000000000..3bebd060f220ce --- /dev/null +++ b/packages/edit-site/src/components/left-sidebar/navigation-panel/menus/content-categories.js @@ -0,0 +1,22 @@ +/** + * WordPress dependencies + */ +import { __experimentalNavigationMenu as NavigationMenu } from '@wordpress/components'; +import { __ } from '@wordpress/i18n'; + +/** + * Internal dependencies + */ +import NavigationEntityItems from '../navigation-entity-items'; + +export default function ContentCategoriesMenu() { + return ( + + + + ); +} diff --git a/packages/edit-site/src/components/left-sidebar/navigation-panel/menus/content-pages.js b/packages/edit-site/src/components/left-sidebar/navigation-panel/menus/content-pages.js new file mode 100644 index 00000000000000..f9d3007210659b --- /dev/null +++ b/packages/edit-site/src/components/left-sidebar/navigation-panel/menus/content-pages.js @@ -0,0 +1,22 @@ +/** + * WordPress dependencies + */ +import { __experimentalNavigationMenu as NavigationMenu } from '@wordpress/components'; +import { __ } from '@wordpress/i18n'; + +/** + * Internal dependencies + */ +import NavigationEntityItems from '../navigation-entity-items'; + +export default function ContentPagesMenu() { + return ( + + + + ); +} diff --git a/packages/edit-site/src/components/left-sidebar/navigation-panel/menus/content-posts.js b/packages/edit-site/src/components/left-sidebar/navigation-panel/menus/content-posts.js new file mode 100644 index 00000000000000..04f40760b218e4 --- /dev/null +++ b/packages/edit-site/src/components/left-sidebar/navigation-panel/menus/content-posts.js @@ -0,0 +1,22 @@ +/** + * WordPress dependencies + */ +import { __experimentalNavigationMenu as NavigationMenu } from '@wordpress/components'; +import { __ } from '@wordpress/i18n'; + +/** + * Internal dependencies + */ +import NavigationEntityItems from '../navigation-entity-items'; + +export default function ContentPostsMenu() { + return ( + + + + ); +} diff --git a/packages/edit-site/src/components/left-sidebar/navigation-panel/menus/content.js b/packages/edit-site/src/components/left-sidebar/navigation-panel/menus/content.js deleted file mode 100644 index 80ba8fe9464c09..00000000000000 --- a/packages/edit-site/src/components/left-sidebar/navigation-panel/menus/content.js +++ /dev/null @@ -1,87 +0,0 @@ -/** - * WordPress dependencies - */ -import { getPathAndQueryString } from '@wordpress/url'; -import { - __experimentalNavigationGroup as NavigationGroup, - __experimentalNavigationMenu as NavigationMenu, -} from '@wordpress/components'; -import { __ } from '@wordpress/i18n'; - -/** - * Internal dependencies - */ -import NavigationEntityItems from '../navigation-entity-items'; - -const pathKeyExtractor = ( { entity: { link } } ) => - `content-${ getPathAndQueryString( link ) }`; - -export default function ContentMenu( { onChangePage } ) { - const onPageSelect = ( { type, slug, link, id }, item ) => { - onChangePage( - { - type, - slug, - path: getPathAndQueryString( link ), - context: { - postType: type, - postId: id, - }, - }, - item - ); - }; - - return ( - - - ( - onPageSelect( entity, item ) } - /> - ) } - /> - - - - ( - onPageSelect( entity, item ) } - /> - ) } - /> - - - - ( - onPageSelect( entity, item ) } - /> - ) } - /> - - - ); -} diff --git a/packages/edit-site/src/components/left-sidebar/navigation-panel/navigation-entity-items.js b/packages/edit-site/src/components/left-sidebar/navigation-panel/navigation-entity-items.js index 03b4dec2c8df1c..a0e341cf6e2ece 100644 --- a/packages/edit-site/src/components/left-sidebar/navigation-panel/navigation-entity-items.js +++ b/packages/edit-site/src/components/left-sidebar/navigation-panel/navigation-entity-items.js @@ -1,44 +1,52 @@ /** * WordPress dependencies */ -import { Fragment } from '@wordpress/element'; -import { useSelect } from '@wordpress/data'; +import { useDispatch, useSelect } from '@wordpress/data'; import { __experimentalNavigationItem as NavigationItem } from '@wordpress/components'; +import { getPathAndQueryString } from '@wordpress/url'; -const defaultKeyExtractor = ( { kind, name, entity } ) => - `${ kind }-${ name }-${ entity.id }`; +const EXTRACTORS_TITLE = { + 'taxonomy-category': ( entity ) => entity.name, + default: ( entity ) => entity?.title?.rendered, +}; -export default function NavigationEntityItems( { - kind, - name, - query = {}, - - getKey = defaultKeyExtractor, - renderItem, -} ) { +export default function NavigationEntityItems( { kind, name, query = {} } ) { const entities = useSelect( ( select ) => select( 'core' ).getEntityRecords( kind, name, query ), [ kind, name, query ] ); + const { setPage } = useDispatch( 'core/edit-site' ); + if ( ! entities ) { return null; } + const changePage = ( { type, slug, link, id } ) => { + setPage( { + type, + slug, + path: getPathAndQueryString( link ), + context: { + postType: type, + postId: id, + }, + } ); + }; + return entities.map( ( entity ) => { - const key = getKey( { kind, name, query, entity } ); + const key = `content-${ getPathAndQueryString( entity.link ) }`; + const titleExtractor = + EXTRACTORS_TITLE[ `${ kind }-${ name }` ] || + EXTRACTORS_TITLE.default; return ( - - { renderItem( { - ItemComponent: NavigationItem, - entity, - item: key, - props: { - item: key, - }, - } ) } - + changePage( entity ) } + /> ); } ); } diff --git a/packages/edit-site/src/components/left-sidebar/navigation-panel/style.scss b/packages/edit-site/src/components/left-sidebar/navigation-panel/style.scss index ab0210884ae17c..c45b725c8cb447 100644 --- a/packages/edit-site/src/components/left-sidebar/navigation-panel/style.scss +++ b/packages/edit-site/src/components/left-sidebar/navigation-panel/style.scss @@ -3,6 +3,7 @@ height: 100%; position: relative; width: $nav-sidebar-width; + background: #1e1e1e; @include reduce-motion("animation"); @keyframes edit-site-navigation-panel__slide-in { @@ -13,10 +14,6 @@ transform: translateX(0%); } } - - .components-navigation { - height: 100%; - } } .edit-site-navigation-panel__back-to-dashboard.components-button.is-tertiary { From 80078e2ee92209d7eec2f6a3720d7212eddee4b9 Mon Sep 17 00:00:00 2001 From: David Szabo Date: Mon, 12 Oct 2020 10:59:18 +0200 Subject: [PATCH 15/22] Rename handler --- .../left-sidebar/navigation-panel/navigation-entity-items.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/edit-site/src/components/left-sidebar/navigation-panel/navigation-entity-items.js b/packages/edit-site/src/components/left-sidebar/navigation-panel/navigation-entity-items.js index a0e341cf6e2ece..84178b6f726ffa 100644 --- a/packages/edit-site/src/components/left-sidebar/navigation-panel/navigation-entity-items.js +++ b/packages/edit-site/src/components/left-sidebar/navigation-panel/navigation-entity-items.js @@ -22,7 +22,7 @@ export default function NavigationEntityItems( { kind, name, query = {} } ) { return null; } - const changePage = ( { type, slug, link, id } ) => { + const onActivateItem = ( { type, slug, link, id } ) => { setPage( { type, slug, @@ -45,7 +45,7 @@ export default function NavigationEntityItems( { kind, name, query = {} } ) { key={ key } item={ key } title={ titleExtractor( entity ) } - onClick={ () => changePage( entity ) } + onClick={ () => onActivateItem( entity ) } /> ); } ); From 5830aaa6cd83700695708c993e4fbd62d196064e Mon Sep 17 00:00:00 2001 From: David Szabo Date: Mon, 12 Oct 2020 11:14:44 +0200 Subject: [PATCH 16/22] Add all posts --- .../navigation-panel/menus/content-posts.js | 33 ++++++++++++++++++- 1 file changed, 32 insertions(+), 1 deletion(-) diff --git a/packages/edit-site/src/components/left-sidebar/navigation-panel/menus/content-posts.js b/packages/edit-site/src/components/left-sidebar/navigation-panel/menus/content-posts.js index 04f40760b218e4..1e91a171b0be06 100644 --- a/packages/edit-site/src/components/left-sidebar/navigation-panel/menus/content-posts.js +++ b/packages/edit-site/src/components/left-sidebar/navigation-panel/menus/content-posts.js @@ -1,7 +1,11 @@ /** * WordPress dependencies */ -import { __experimentalNavigationMenu as NavigationMenu } from '@wordpress/components'; +import { + __experimentalNavigationMenu as NavigationMenu, + __experimentalNavigationItem as NavigationItem, +} from '@wordpress/components'; +import { useDispatch, useSelect } from '@wordpress/data'; import { __ } from '@wordpress/i18n'; /** @@ -10,12 +14,39 @@ import { __ } from '@wordpress/i18n'; import NavigationEntityItems from '../navigation-entity-items'; export default function ContentPostsMenu() { + const showOnFront = useSelect( + ( select ) => + select( 'core' ).getEditedEntityRecord( 'root', 'site' ) + .show_on_front, + [] + ); + + const { setPage } = useDispatch( 'core/edit-site' ); + + const onActivateFrontItem = () => { + setPage( { + type: 'page', + path: '/', + context: { + query: { categoryIds: [] }, + queryContext: { page: 1 }, + }, + } ); + }; + return ( + { showOnFront === 'posts' && ( + + ) } ); From d426ab0524ba31fe218226385ad67ac5036fd801 Mon Sep 17 00:00:00 2001 From: David Szabo Date: Wed, 14 Oct 2020 09:05:06 +0200 Subject: [PATCH 17/22] Use variable --- .../src/components/left-sidebar/navigation-panel/style.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/edit-site/src/components/left-sidebar/navigation-panel/style.scss b/packages/edit-site/src/components/left-sidebar/navigation-panel/style.scss index c45b725c8cb447..768d49bd632a89 100644 --- a/packages/edit-site/src/components/left-sidebar/navigation-panel/style.scss +++ b/packages/edit-site/src/components/left-sidebar/navigation-panel/style.scss @@ -3,7 +3,7 @@ height: 100%; position: relative; width: $nav-sidebar-width; - background: #1e1e1e; + background: $gray-900; @include reduce-motion("animation"); @keyframes edit-site-navigation-panel__slide-in { From 45e658cd333ec8e1cdc6ac4e3bad9fc348e057bd Mon Sep 17 00:00:00 2001 From: David Szabo Date: Wed, 14 Oct 2020 09:20:10 +0200 Subject: [PATCH 18/22] Simplify title --- .../navigation-panel/navigation-entity-items.js | 11 +++-------- 1 file changed, 3 insertions(+), 8 deletions(-) diff --git a/packages/edit-site/src/components/left-sidebar/navigation-panel/navigation-entity-items.js b/packages/edit-site/src/components/left-sidebar/navigation-panel/navigation-entity-items.js index 84178b6f726ffa..ca35d46d2a6aa6 100644 --- a/packages/edit-site/src/components/left-sidebar/navigation-panel/navigation-entity-items.js +++ b/packages/edit-site/src/components/left-sidebar/navigation-panel/navigation-entity-items.js @@ -5,10 +5,8 @@ import { useDispatch, useSelect } from '@wordpress/data'; import { __experimentalNavigationItem as NavigationItem } from '@wordpress/components'; import { getPathAndQueryString } from '@wordpress/url'; -const EXTRACTORS_TITLE = { - 'taxonomy-category': ( entity ) => entity.name, - default: ( entity ) => entity?.title?.rendered, -}; +const getEntityTitle = ( kind, entity ) => + 'taxonomy' === kind ? entity.name : entity?.title?.rendered; export default function NavigationEntityItems( { kind, name, query = {} } ) { const entities = useSelect( @@ -36,15 +34,12 @@ export default function NavigationEntityItems( { kind, name, query = {} } ) { return entities.map( ( entity ) => { const key = `content-${ getPathAndQueryString( entity.link ) }`; - const titleExtractor = - EXTRACTORS_TITLE[ `${ kind }-${ name }` ] || - EXTRACTORS_TITLE.default; return ( onActivateItem( entity ) } /> ); From b87b356d78f1f74c411e88a71dae817d6884c05c Mon Sep 17 00:00:00 2001 From: David Szabo Date: Wed, 14 Oct 2020 09:31:08 +0200 Subject: [PATCH 19/22] Use menu constants --- .../left-sidebar/navigation-panel/constants.js | 3 +++ .../navigation-panel/content-navigation.js | 11 ++++++++--- .../navigation-panel/menus/content-categories.js | 5 +++-- .../navigation-panel/menus/content-pages.js | 5 +++-- .../navigation-panel/menus/content-posts.js | 5 +++-- 5 files changed, 20 insertions(+), 9 deletions(-) diff --git a/packages/edit-site/src/components/left-sidebar/navigation-panel/constants.js b/packages/edit-site/src/components/left-sidebar/navigation-panel/constants.js index 44bb2b0c7d37cd..3d6425735db8b8 100644 --- a/packages/edit-site/src/components/left-sidebar/navigation-panel/constants.js +++ b/packages/edit-site/src/components/left-sidebar/navigation-panel/constants.js @@ -10,6 +10,9 @@ export const TEMPLATES_GENERAL = [ export const TEMPLATES_POSTS = [ 'home', 'single' ]; export const MENU_ROOT = 'root'; +export const MENU_CONTENT_CATEGORIES = 'content-categories'; +export const MENU_CONTENT_PAGES = 'content-pages'; +export const MENU_CONTENT_POSTS = 'content-posts'; export const MENU_TEMPLATE_PARTS = 'template-parts'; export const MENU_TEMPLATES = 'templates'; export const MENU_TEMPLATES_ALL = 'templates-all'; diff --git a/packages/edit-site/src/components/left-sidebar/navigation-panel/content-navigation.js b/packages/edit-site/src/components/left-sidebar/navigation-panel/content-navigation.js index e3934070816932..6db4075da3de6c 100644 --- a/packages/edit-site/src/components/left-sidebar/navigation-panel/content-navigation.js +++ b/packages/edit-site/src/components/left-sidebar/navigation-panel/content-navigation.js @@ -16,6 +16,11 @@ import { __ } from '@wordpress/i18n'; import ContentPagesMenu from './menus/content-pages'; import ContentCategoriesMenu from './menus/content-categories'; import ContentPostsMenu from './menus/content-posts'; +import { + MENU_CONTENT_CATEGORIES, + MENU_CONTENT_PAGES, + MENU_CONTENT_POSTS, +} from './constants'; export default function ContentNavigation() { const [ activeMenu, setActiveMenu ] = useState( 'root' ); @@ -34,17 +39,17 @@ export default function ContentNavigation() { diff --git a/packages/edit-site/src/components/left-sidebar/navigation-panel/menus/content-categories.js b/packages/edit-site/src/components/left-sidebar/navigation-panel/menus/content-categories.js index 3bebd060f220ce..f2243940aca5b1 100644 --- a/packages/edit-site/src/components/left-sidebar/navigation-panel/menus/content-categories.js +++ b/packages/edit-site/src/components/left-sidebar/navigation-panel/menus/content-categories.js @@ -8,13 +8,14 @@ import { __ } from '@wordpress/i18n'; * Internal dependencies */ import NavigationEntityItems from '../navigation-entity-items'; +import { MENU_CONTENT_CATEGORIES, MENU_ROOT } from '../constants'; export default function ContentCategoriesMenu() { return ( diff --git a/packages/edit-site/src/components/left-sidebar/navigation-panel/menus/content-pages.js b/packages/edit-site/src/components/left-sidebar/navigation-panel/menus/content-pages.js index f9d3007210659b..bfa08369f338da 100644 --- a/packages/edit-site/src/components/left-sidebar/navigation-panel/menus/content-pages.js +++ b/packages/edit-site/src/components/left-sidebar/navigation-panel/menus/content-pages.js @@ -8,13 +8,14 @@ import { __ } from '@wordpress/i18n'; * Internal dependencies */ import NavigationEntityItems from '../navigation-entity-items'; +import { MENU_CONTENT_PAGES, MENU_ROOT } from '../constants'; export default function ContentPagesMenu() { return ( diff --git a/packages/edit-site/src/components/left-sidebar/navigation-panel/menus/content-posts.js b/packages/edit-site/src/components/left-sidebar/navigation-panel/menus/content-posts.js index 1e91a171b0be06..79337feed401e7 100644 --- a/packages/edit-site/src/components/left-sidebar/navigation-panel/menus/content-posts.js +++ b/packages/edit-site/src/components/left-sidebar/navigation-panel/menus/content-posts.js @@ -12,6 +12,7 @@ import { __ } from '@wordpress/i18n'; * Internal dependencies */ import NavigationEntityItems from '../navigation-entity-items'; +import { MENU_CONTENT_POSTS, MENU_ROOT } from '../constants'; export default function ContentPostsMenu() { const showOnFront = useSelect( @@ -36,9 +37,9 @@ export default function ContentPostsMenu() { return ( { showOnFront === 'posts' && ( Date: Wed, 14 Oct 2020 09:34:09 +0200 Subject: [PATCH 20/22] Extract TemplateNavigation --- .../left-sidebar/navigation-panel/index.js | 85 +---------------- .../navigation-panel/templates-navigation.js | 91 +++++++++++++++++++ 2 files changed, 94 insertions(+), 82 deletions(-) create mode 100644 packages/edit-site/src/components/left-sidebar/navigation-panel/templates-navigation.js diff --git a/packages/edit-site/src/components/left-sidebar/navigation-panel/index.js b/packages/edit-site/src/components/left-sidebar/navigation-panel/index.js index 81078fff7cefdf..3ef00c26a92ed7 100644 --- a/packages/edit-site/src/components/left-sidebar/navigation-panel/index.js +++ b/packages/edit-site/src/components/left-sidebar/navigation-panel/index.js @@ -1,24 +1,13 @@ /** * WordPress dependencies */ -import { useEffect, useRef } from '@wordpress/element'; -import { - __experimentalNavigation as Navigation, - __experimentalNavigationMenu as NavigationMenu, - __experimentalNavigationItem as NavigationItem, - __experimentalNavigationBackButton as NavigationBackButton, - createSlotFill, -} from '@wordpress/components'; -import { useDispatch, useSelect } from '@wordpress/data'; -import { __ } from '@wordpress/i18n'; +import { createSlotFill } from '@wordpress/components'; /** * Internal dependencies */ -import TemplatesMenu from './menus/templates'; -import TemplatePartsMenu from './menus/template-parts'; -import { MENU_ROOT, MENU_TEMPLATE_PARTS, MENU_TEMPLATES } from './constants'; import ContentNavigation from './content-navigation'; +import TemplatesNavigation from './templates-navigation'; export const { Fill: NavigationPanelPreviewFill, @@ -26,78 +15,10 @@ export const { } = createSlotFill( 'EditSiteNavigationPanelPreview' ); const NavigationPanel = () => { - const ref = useRef(); - - useEffect( () => { - if ( ref.current ) { - ref.current.focus(); - } - }, [ ref ] ); - - const { templateId, templatePartId, templateType, activeMenu } = useSelect( - ( select ) => { - const { - getTemplateId, - getTemplatePartId, - getTemplateType, - getNavigationPanelActiveMenu, - } = select( 'core/edit-site' ); - - return { - templateId: getTemplateId(), - templatePartId: getTemplatePartId(), - templateType: getTemplateType(), - activeMenu: getNavigationPanelActiveMenu(), - }; - }, - [] - ); - - const { - setTemplate, - setTemplatePart, - setNavigationPanelActiveMenu, - } = useDispatch( 'core/edit-site' ); - return (
- - { activeMenu === MENU_ROOT && ( - - ) } - - - - - - - - - - - - + -
); diff --git a/packages/edit-site/src/components/left-sidebar/navigation-panel/templates-navigation.js b/packages/edit-site/src/components/left-sidebar/navigation-panel/templates-navigation.js new file mode 100644 index 00000000000000..82deddf0c4b399 --- /dev/null +++ b/packages/edit-site/src/components/left-sidebar/navigation-panel/templates-navigation.js @@ -0,0 +1,91 @@ +/** + * WordPress dependencies + */ +import { useRef, useEffect } from '@wordpress/element'; +import { + __experimentalNavigation as Navigation, + __experimentalNavigationMenu as NavigationMenu, + __experimentalNavigationItem as NavigationItem, + __experimentalNavigationBackButton as NavigationBackButton, +} from '@wordpress/components'; +import { useDispatch, useSelect } from '@wordpress/data'; +import { __ } from '@wordpress/i18n'; + +/** + * Internal dependencies + */ +import TemplatesMenu from './menus/templates'; +import TemplatePartsMenu from './menus/template-parts'; +import { MENU_ROOT, MENU_TEMPLATE_PARTS, MENU_TEMPLATES } from './constants'; + +export default function TemplatesNavigation() { + const ref = useRef(); + + useEffect( () => { + if ( ref.current ) { + ref.current.focus(); + } + }, [ ref ] ); + + const { templateId, templatePartId, templateType, activeMenu } = useSelect( + ( select ) => { + const { + getTemplateId, + getTemplatePartId, + getTemplateType, + getNavigationPanelActiveMenu, + } = select( 'core/edit-site' ); + + return { + templateId: getTemplateId(), + templatePartId: getTemplatePartId(), + templateType: getTemplateType(), + activeMenu: getNavigationPanelActiveMenu(), + }; + }, + [] + ); + + const { + setTemplate, + setTemplatePart, + setNavigationPanelActiveMenu, + } = useDispatch( 'core/edit-site' ); + + return ( + + { activeMenu === MENU_ROOT && ( + + ) } + + + + + + + + + + + + ); +} From 17eb8a6ffeae6cec246c061bb5071e4caf7c18a7 Mon Sep 17 00:00:00 2001 From: David Szabo Date: Wed, 14 Oct 2020 09:38:03 +0200 Subject: [PATCH 21/22] Only show both navigations in the root --- .../navigation-panel/content-navigation.js | 9 +++++++-- .../left-sidebar/navigation-panel/index.js | 19 +++++++++++++++++-- 2 files changed, 24 insertions(+), 4 deletions(-) diff --git a/packages/edit-site/src/components/left-sidebar/navigation-panel/content-navigation.js b/packages/edit-site/src/components/left-sidebar/navigation-panel/content-navigation.js index 6db4075da3de6c..9c27f60f027d07 100644 --- a/packages/edit-site/src/components/left-sidebar/navigation-panel/content-navigation.js +++ b/packages/edit-site/src/components/left-sidebar/navigation-panel/content-navigation.js @@ -22,7 +22,7 @@ import { MENU_CONTENT_POSTS, } from './constants'; -export default function ContentNavigation() { +export default function ContentNavigation( { onActivateMenu } ) { const [ activeMenu, setActiveMenu ] = useState( 'root' ); const page = useSelect( @@ -30,11 +30,16 @@ export default function ContentNavigation() { [] ); + const handleActivateMenu = ( menu ) => { + setActiveMenu( menu ); + onActivateMenu( menu ); + }; + return ( { + const [ contentActiveMenu, setContentActiveMenu ] = useState( MENU_ROOT ); + const templatesActiveMenu = useSelect( + ( select ) => select( 'core/edit-site' ).getNavigationPanelActiveMenu(), + [] + ); + return (
- - + { ( contentActiveMenu === MENU_ROOT || + templatesActiveMenu !== MENU_ROOT ) && } + + { ( templatesActiveMenu === MENU_ROOT || + contentActiveMenu !== MENU_ROOT ) && ( + + ) } +
); From 7bd2c5c0dbd4b4777bd2a6ac2db5e77af1ba5ac2 Mon Sep 17 00:00:00 2001 From: Copons Date: Wed, 14 Oct 2020 15:43:43 +0100 Subject: [PATCH 22/22] Prevent undefined object property lookup --- .../left-sidebar/navigation-panel/content-navigation.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/edit-site/src/components/left-sidebar/navigation-panel/content-navigation.js b/packages/edit-site/src/components/left-sidebar/navigation-panel/content-navigation.js index 9c27f60f027d07..0048a41f7e5e65 100644 --- a/packages/edit-site/src/components/left-sidebar/navigation-panel/content-navigation.js +++ b/packages/edit-site/src/components/left-sidebar/navigation-panel/content-navigation.js @@ -37,7 +37,7 @@ export default function ContentNavigation( { onActivateMenu } ) { return (