Add the pages menu to the site editor

packages/edit-site/src/components/sidebar-navigation-screen-main/index.js

@@ -6,7 +6,7 @@ import {
 	__experimentalNavigatorButton as NavigatorButton,
 } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
-import { layout, symbol, navigation, styles } from '@wordpress/icons';
+import { layout, symbol, navigation, styles, page } from '@wordpress/icons';
 import { useSelect } from '@wordpress/data';
 import { store as coreStore } from '@wordpress/core-data';
 
@@ -76,6 +76,15 @@ export default function SidebarNavigationScreenMain() {
 							{ __( 'Styles' ) }
 						</NavigatorButton>
 					) }
+
+					<NavigatorButton
+						as={ SidebarNavigationItem }
+						path="/page"
+						withChevron
+						icon={ page }
+					>
+						{ __( 'Pages' ) }
+					</NavigatorButton>
 					<NavigatorButton
 						as={ SidebarNavigationItem }
 						path="/wp_template"

packages/edit-site/src/components/sidebar-navigation-screen-navigation-item/index.js

@@ -36,15 +36,9 @@ export default function SidebarNavigationScreenNavigationItem() {
 					icon={ pencil }
 				/>
 			}
-			description={
-				postType === 'page'
-					? __(
-							'Pages are static and are not listed by date. Pages do not use tags or categories.'
-					  )
-					: __(
-							'Posts are entries listed in reverse chronological order on the site homepage or on the posts page.'
-					  )
-			}
+			description={ __(
+				'Posts are entries listed in reverse chronological order on the site homepage or on the posts page.'
+			) }
 			content={
 				<>
 					{ record?.link ? (

packages/edit-site/src/components/sidebar-navigation-screen-page/index.js

@@ -0,0 +1,59 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { useDispatch } from '@wordpress/data';
+import {
+	__experimentalUseNavigator as useNavigator,
+	ExternalLink,
+} from '@wordpress/components';
+import { useEntityRecord } from '@wordpress/core-data';
+import { decodeEntities } from '@wordpress/html-entities';
+import { pencil } from '@wordpress/icons';
+
+/**
+ * Internal dependencies
+ */
+import SidebarNavigationScreen from '../sidebar-navigation-screen';
+import { unlock } from '../../private-apis';
+import { store as editSiteStore } from '../../store';
+import SidebarButton from '../sidebar-button';
+
+export default function SidebarNavigationScreenPage() {
+	const { setCanvasMode } = unlock( useDispatch( editSiteStore ) );
+	const {
+		params: { postId },
+	} = useNavigator();
+	const { record } = useEntityRecord( 'postType', 'page', postId );
+
+	return (
+		<SidebarNavigationScreen
+			title={ record ? decodeEntities( record?.title?.rendered ) : null }
+			actions={
+				<SidebarButton
+					onClick={ () => setCanvasMode( 'edit' ) }
+					label={ __( 'Edit' ) }
+					icon={ pencil }
+				/>
+			}
+			description={ __(
+				'Pages are static and are not listed by date. Pages do not use tags or categories.'
+			) }
+			content={
+				<>
+					{ record?.link ? (
+						<ExternalLink
+							className="edit-site-sidebar-navigation-screen__page-link"
+							href={ record.link }
+						>
+							{ record.link }
+						</ExternalLink>
+					) : null }
+					{ record
+						? decodeEntities( record?.description?.rendered )
+						: null }
+				</>
+			}
+		/>
+	);
+}

packages/edit-site/src/components/sidebar-navigation-screen-pages/index.js

@@ -0,0 +1,85 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	__experimentalItemGroup as ItemGroup,
+	__experimentalItem as Item,
+} from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+import { useEntityRecords } from '@wordpress/core-data';
+import { decodeEntities } from '@wordpress/html-entities';
+
+/**
+ * Internal dependencies
+ */
+import SidebarNavigationScreen from '../sidebar-navigation-screen';
+import { useLink } from '../routes/link';
+import SidebarNavigationItem from '../sidebar-navigation-item';
+import SidebarNavigationSubtitle from '../sidebar-navigation-subtitle';
+
+const PageItem = ( { postId, ...props } ) => {
+	const linkInfo = useLink( {
+		postType: 'page',
+		postId,
+	} );
+	return <SidebarNavigationItem { ...linkInfo } { ...props } />;
+};
+
+export default function SidebarNavigationScreenPages() {
+	const { records: pages, isResolving: isLoading } = useEntityRecords(
+		'postType',
+		'page',
+		{
+			orderby: 'date',
+		}
+	);
+
+	return (
+		<SidebarNavigationScreen
+			title={ __( 'Pages' ) }
+			description={ __( 'Browse and edit pages on your site' ) }
+			content={
+				<>
+					{ isLoading && (
+						<ItemGroup>
+							<Item>{ __( 'Loading pages' ) }</Item>
+						</ItemGroup>
+					) }
+					{ ! isLoading && (
+						<>
+							<SidebarNavigationSubtitle>
+								{ __( 'Recent' ) }
+							</SidebarNavigationSubtitle>
+							<ItemGroup>
+								{ ! pages?.length && (
+									<Item>{ __( 'No page found' ) }</Item>
+								) }
+								{ pages?.map( ( page ) => (
+									<PageItem
+										postId={ page.id }
+										key={ page.id }
+										withChevron
+									>
+										{ decodeEntities(
+											page.title?.rendered
+										) ?? __( '(no title)' ) }
+									</PageItem>
+								) ) }
+								<SidebarNavigationItem
+									className="edit-site-sidebar-navigation-screen-templates__see-all"
+									href="edit.php?post_type=page"
+									onClick={ () => {
+										document.location =
+											'edit.php?post_type=page';
+									} }
+								>
+									{ __( 'Manage all pages' ) }
+								</SidebarNavigationItem>
+							</ItemGroup>
+						</>
+					) }
+				</>
+			}
+		/>
+	);
+}

packages/edit-site/src/components/sidebar-navigation-subtitle/index.js

@@ -0,0 +1,5 @@
+export default function SidebarNavigationSubtitle( { children } ) {
+	return (
+		<h3 className="edit-site-sidebar-navigation-subtitle">{ children }</h3>
+	);
+}

packages/edit-site/src/components/sidebar-navigation-subtitle/style.scss

@@ -0,0 +1,7 @@
+.edit-site-sidebar-navigation-subtitle {
+	color: $gray-100;
+	text-transform: uppercase;
+	font-weight: 500;
+	font-size: 11px;
+	padding: $grid-unit-20 0 0 $grid-unit-20;
+}

packages/edit-site/src/components/sidebar/index.js

@@ -23,6 +23,8 @@ import SidebarNavigationScreenTemplatesBrowse from '../sidebar-navigation-screen
 import SaveHub from '../save-hub';
 import SidebarNavigationScreenNavigationItem from '../sidebar-navigation-screen-navigation-item';
 import { unlock } from '../../private-apis';
+import SidebarNavigationScreenPages from '../sidebar-navigation-screen-pages';
+import SidebarNavigationScreenPage from '../sidebar-navigation-screen-page';
 
 const { useLocation } = unlock( routerPrivateApis );
 
@@ -43,6 +45,12 @@ function SidebarScreens() {
 			<NavigatorScreen path="/navigation/:postType/:postId">
 				<SidebarNavigationScreenNavigationItem />
 			</NavigatorScreen>
+			<NavigatorScreen path="/page">
+				<SidebarNavigationScreenPages />
+			</NavigatorScreen>
+			<NavigatorScreen path="/page/:postId">
+				<SidebarNavigationScreenPage />
+			</NavigatorScreen>
 			<NavigatorScreen path="/:postType(wp_template|wp_template_part)">
 				<SidebarNavigationScreenTemplates />
 			</NavigatorScreen>

packages/edit-site/src/components/sync-state-with-url/use-sync-path-with-url.js

@@ -20,6 +20,7 @@ export function getPathFromURL( urlParams ) {
 		switch ( urlParams.postType ) {
 			case 'wp_template':
 			case 'wp_template_part':
+			case 'page':
 				path = `/${ encodeURIComponent(
 					urlParams.postType
 				) }/${ encodeURIComponent( urlParams.postId ) }`;
@@ -76,6 +77,15 @@ export default function useSyncPathWithURL() {
 				postId: navigatorParams?.postId,
 				path: undefined,
 			} );
+		} else if (
+			navigatorLocation.path.startsWith( '/page/' ) &&
+			navigatorParams?.postId
+		) {
+			updateUrlParams( {
+				postType: 'page',
+				postId: navigatorParams?.postId,
+				path: undefined,
+			} );
 		} else {
 			updateUrlParams( {
 				postType: undefined,

packages/edit-site/src/style.scss

@@ -28,6 +28,7 @@
 @import "./components/sidebar-navigation-screen/style.scss";
 @import "./components/sidebar-navigation-screen-template/style.scss";
 @import "./components/sidebar-navigation-screen-templates/style.scss";
+@import "./components/sidebar-navigation-subtitle/style.scss";
 @import "./components/site-hub/style.scss";
 @import "./components/sidebar-navigation-screen-navigation-menus/style.scss";
 @import "./components/site-icon/style.scss";