Site Editor: Move page switcher to navigation panel (#25620)

Move page selection dropdown from the header to the navigation sidebar.
WordPress · Oct 14, 2020 · 0bf25d7 · 0bf25d7
1 parent 2c9a7f6
commit 0bf25d7
Show file tree

Hide file tree

Showing 13 changed files with 325 additions and 282 deletions.
diff --git 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,15 @@ 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 +52,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 +93,6 @@ export default function Header( {
 							<BlockToolbar hideDragHandle />
 						</div>
 					) }
-					<div className="edit-site-header__toolbar-switchers">
-						<PageSwitcher
-							showOnFront={ showOnFront }
-							activePage={ page }
-							onActivePageChange={ setPage }
-						/>
-					</div>
 				</div>
 			</div>
 

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
@@ -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
@@ -0,0 +1,66 @@
+/**
+ * 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';
+import {
+	MENU_CONTENT_CATEGORIES,
+	MENU_CONTENT_PAGES,
+	MENU_CONTENT_POSTS,
+} from './constants';
+
+export default function ContentNavigation( { onActivateMenu } ) {
+	const [ activeMenu, setActiveMenu ] = useState( 'root' );
+
+	const page = useSelect(
+		( select ) => select( 'core/edit-site' ).getPage(),
+		[]
+	);
+
+	const handleActivateMenu = ( menu ) => {
+		setActiveMenu( menu );
+		onActivateMenu( menu );
+	};
+
+	return (
+		<Navigation
+			activeItem={ page && `content-${ page.path }` }
+			activeMenu={ activeMenu }
+			onActivateMenu={ handleActivateMenu }
+		>
+			<NavigationMenu title={ __( 'Content' ) }>
+				<NavigationItem
+					title={ __( 'Pages' ) }
+					navigateToMenu={ MENU_CONTENT_PAGES }
+				/>
+
+				<NavigationItem
+					title={ __( 'Categories' ) }
+					navigateToMenu={ MENU_CONTENT_CATEGORIES }
+				/>
+
+				<NavigationItem
+					title={ __( 'Posts' ) }
+					navigateToMenu={ MENU_CONTENT_POSTS }
+				/>
+			</NavigationMenu>
+
+			<ContentPagesMenu />
+			<ContentCategoriesMenu />
+			<ContentPostsMenu />
+		</Navigation>
+	);
+}
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
@@ -1,99 +1,38 @@
 /**
  * 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 { useState } from '@wordpress/element';
+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';
+import { useSelect } from '@wordpress/data';
+import { MENU_ROOT } from './constants';
 
 export const {
 	Fill: NavigationPanelPreviewFill,
 	Slot: NavigationPanelPreviewSlot,
 } = 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 [ contentActiveMenu, setContentActiveMenu ] = useState( MENU_ROOT );
+	const templatesActiveMenu = useSelect(
+		( select ) => select( 'core/edit-site' ).getNavigationPanelActiveMenu(),
 		[]
 	);
 
-	const {
-		setTemplate,
-		setTemplatePart,
-		setNavigationPanelActiveMenu,
-	} = useDispatch( 'core/edit-site' );
-
 	return (
 		<div className="edit-site-navigation-panel">
-			<Navigation
-				activeItem={
-					'wp_template' === templateType
-						? `${ templateType }-${ templateId }`
-						: `${ templateType }-${ templatePartId }`
-				}
-				activeMenu={ activeMenu }
-				onActivateMenu={ setNavigationPanelActiveMenu }
-			>
-				{ activeMenu === MENU_ROOT && (
-					<NavigationBackButton
-						backButtonLabel={ __( 'Dashboard' ) }
-						className="edit-site-navigation-panel__back-to-dashboard"
-						href="index.php"
-						ref={ ref }
-					/>
-				) }
-
-				<NavigationMenu title={ __( 'Theme' ) }>
-					<NavigationItem
-						title={ __( 'Templates' ) }
-						navigateToMenu={ MENU_TEMPLATES }
-					/>
-
-					<NavigationItem
-						title={ __( 'Template Parts' ) }
-						navigateToMenu={ MENU_TEMPLATE_PARTS }
-					/>
-
-					<TemplatesMenu onActivateItem={ setTemplate } />
+			{ ( contentActiveMenu === MENU_ROOT ||
+				templatesActiveMenu !== MENU_ROOT ) && <TemplatesNavigation /> }
 
-					<TemplatePartsMenu onActivateItem={ setTemplatePart } />
-				</NavigationMenu>
-			</Navigation>
+			{ ( templatesActiveMenu === MENU_ROOT ||
+				contentActiveMenu !== MENU_ROOT ) && (
+				<ContentNavigation onActivateMenu={ setContentActiveMenu } />
+			) }
 
 			<NavigationPanelPreviewSlot />
 		</div>

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
@@ -0,0 +1,23 @@
+/**
+ * WordPress dependencies
+ */
+import { __experimentalNavigationMenu as NavigationMenu } from '@wordpress/components';
+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 (
+		<NavigationMenu
+			menu={ MENU_CONTENT_CATEGORIES }
+			title={ __( 'Categories' ) }
+			parentMenu={ MENU_ROOT }
+		>
+			<NavigationEntityItems kind="taxonomy" name="category" />
+		</NavigationMenu>
+	);
+}
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
@@ -0,0 +1,23 @@
+/**
+ * WordPress dependencies
+ */
+import { __experimentalNavigationMenu as NavigationMenu } from '@wordpress/components';
+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 (
+		<NavigationMenu
+			menu={ MENU_CONTENT_PAGES }
+			title={ __( 'Pages' ) }
+			parentMenu={ MENU_ROOT }
+		>
+			<NavigationEntityItems kind="postType" name="page" />
+		</NavigationMenu>
+	);
+}
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
@@ -0,0 +1,54 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	__experimentalNavigationMenu as NavigationMenu,
+	__experimentalNavigationItem as NavigationItem,
+} from '@wordpress/components';
+import { useDispatch, useSelect } from '@wordpress/data';
+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(
+		( 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 (
+		<NavigationMenu
+			menu={ MENU_CONTENT_POSTS }
+			title={ __( 'Posts' ) }
+			parentMenu={ MENU_ROOT }
+		>
+			{ showOnFront === 'posts' && (
+				<NavigationItem
+					item={ 'content-/' }
+					title={ __( 'All Posts' ) }
+					onClick={ onActivateFrontItem }
+				/>
+			) }
+			<NavigationEntityItems kind="postType" name="post" />
+		</NavigationMenu>
+	);
+}