Try adding dynamic page templates to pages section (WordPress#50630)

* Try adding dynamic page templates to pages section * remove recent heading in pages * Static homepage case * Back button should go back to Pages * Fix order of home and blog pages * Try fetching all the pages * Stick templates to bottom * Stick item positioning * Revert custom back button behaviour * Move manage link to dynamic pages group * Remove home/posts page suffixes * Address feedback * Add back truncation * Copy array for reorder * Consolidate sticky styles --------- Co-authored-by: Saxon Fletcher <[email protected]> Co-authored-by: James Koster <[email protected]>
pewresearch · Jul 13, 2023 · d336bfb · d336bfb
1 parent bbf2bc0
commit d336bfb
Show file tree

Hide file tree

Showing 5 changed files with 119 additions and 36 deletions.
diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-page/style.scss b/packages/edit-site/src/components/sidebar-navigation-screen-page/style.scss
@@ -1,8 +1,3 @@
-.edit-site-sidebar-navigation-screen__sticky-section {
-	padding: $grid-unit-40 0;
-	margin: $grid-unit-40 $grid-unit-20;
-}
-
 .edit-site-sidebar-navigation-screen-page__featured-image-wrapper {
 	background-color: $gray-800;
 	margin-bottom: $grid-unit-20;

diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-pages/index.js b/packages/edit-site/src/components/sidebar-navigation-screen-pages/index.js
@@ -5,64 +5,157 @@ import {
 	__experimentalItemGroup as ItemGroup,
 	__experimentalItem as Item,
 	__experimentalTruncate as Truncate,
+	__experimentalVStack as VStack,
 } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
-import { useEntityRecords } from '@wordpress/core-data';
+import { useEntityRecords, store as coreStore } from '@wordpress/core-data';
 import { decodeEntities } from '@wordpress/html-entities';
+import { layout, page, home, loop } from '@wordpress/icons';
+import { useSelect } from '@wordpress/data';
 
 /**
  * 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 PageItem = ( { postType = 'page', postId, ...props } ) => {
 	const linkInfo = useLink( {
-		postType: 'page',
+		postType,
 		postId,
 	} );
 	return <SidebarNavigationItem { ...linkInfo } { ...props } />;
 };
 
 export default function SidebarNavigationScreenPages() {
-	const { records: pages, isResolving: isLoading } = useEntityRecords(
+	const { records: pages, isResolving: isLoadingPages } = useEntityRecords(
 		'postType',
 		'page',
-		{ status: 'any' }
+		{
+			status: 'any',
+			per_page: -1,
+		}
 	);
+	const { records: templates, isResolving: isLoadingTemplates } =
+		useEntityRecords( 'postType', 'wp_template', {
+			per_page: -1,
+		} );
+
+	const dynamicPageTemplates = templates?.filter( ( { slug } ) =>
+		[ '404', 'search' ].includes( slug )
+	);
+
+	const homeTemplate =
+		templates?.find( ( template ) => template.slug === 'front-page' ) ||
+		templates?.find( ( template ) => template.slug === 'home' ) ||
+		templates?.find( ( template ) => template.slug === 'index' );
+
+	const pagesAndTemplates = pages?.concat( dynamicPageTemplates, [
+		homeTemplate,
+	] );
+
+	const { frontPage, postsPage } = useSelect( ( select ) => {
+		const { getEntityRecord } = select( coreStore );
+
+		const siteSettings = getEntityRecord( 'root', 'site' );
+		return {
+			frontPage: siteSettings?.page_on_front,
+			postsPage: siteSettings?.page_for_posts,
+		};
+	}, [] );
+
+	const isHomePageBlog = frontPage === postsPage;
+
+	const reorderedPages = pages && [ ...pages ];
+
+	if ( ! isHomePageBlog && reorderedPages?.length ) {
+		const homePageIndex = reorderedPages.findIndex(
+			( item ) => item.id === frontPage
+		);
+		const homePage = reorderedPages.splice( homePageIndex, 1 );
+		reorderedPages?.splice( 0, 0, ...homePage );
+
+		const postsPageIndex = reorderedPages.findIndex(
+			( item ) => item.id === postsPage
+		);
+
+		const blogPage = reorderedPages.splice( postsPageIndex, 1 );
+
+		reorderedPages.splice( 1, 0, ...blogPage );
+	}
 
 	return (
 		<SidebarNavigationScreen
 			title={ __( 'Pages' ) }
 			description={ __( 'Browse and edit pages on your site.' ) }
 			content={
 				<>
-					{ isLoading && (
+					{ ( isLoadingPages || isLoadingTemplates ) && (
 						<ItemGroup>
 							<Item>{ __( 'Loading pages' ) }</Item>
 						</ItemGroup>
 					) }
-					{ ! isLoading && (
-						<>
-							<SidebarNavigationSubtitle>
-								{ __( 'Recent' ) }
-							</SidebarNavigationSubtitle>
-							<ItemGroup>
-								{ ! pages?.length && (
-									<Item>{ __( 'No page found' ) }</Item>
-								) }
-								{ pages?.map( ( page ) => (
+					{ ! ( isLoadingPages || isLoadingTemplates ) && (
+						<ItemGroup>
+							{ ! pagesAndTemplates?.length && (
+								<Item>{ __( 'No page found' ) }</Item>
+							) }
+							{ isHomePageBlog && homeTemplate && (
+								<PageItem
+									postType="wp_template"
+									postId={ homeTemplate.id }
+									key={ homeTemplate.id }
+									icon={ home }
+									withChevron
+								>
+									<Truncate numberOfLines={ 1 }>
+										{ decodeEntities(
+											homeTemplate.title?.rendered
+										) ?? __( '(no title)' ) }
+									</Truncate>
+								</PageItem>
+							) }
+							{ reorderedPages?.map( ( item ) => {
+								let itemIcon;
+								switch ( item.id ) {
+									case frontPage:
+										itemIcon = home;
+										break;
+									case postsPage:
+										itemIcon = loop;
+										break;
+									default:
+										itemIcon = page;
+								}
+								return (
 									<PageItem
-										postId={ page.id }
-										key={ page.id }
+										postId={ item.id }
+										key={ item.id }
+										icon={ itemIcon }
 										withChevron
 									>
 										<Truncate numberOfLines={ 1 }>
 											{ decodeEntities(
-												page.title?.rendered
-											) ?? __( 'Untitled' ) }
+												item.title?.rendered
+											) ?? __( '(no title)' ) }
+										</Truncate>
+									</PageItem>
+								);
+							} ) }
+							<VStack className="edit-site-sidebar-navigation-screen__sticky-section">
+								{ dynamicPageTemplates?.map( ( item ) => (
+									<PageItem
+										postType="wp_template"
+										postId={ item.id }
+										key={ item.id }
+										icon={ layout }
+										withChevron
+									>
+										<Truncate numberOfLines={ 1 }>
+											{ decodeEntities(
+												item.title?.rendered
+											) ?? __( '(no title)' ) }
 										</Truncate>
 									</PageItem>
 								) ) }
@@ -76,8 +169,8 @@ export default function SidebarNavigationScreenPages() {
 								>
 									{ __( 'Manage all pages' ) }
 								</SidebarNavigationItem>
-							</ItemGroup>
-						</>
+							</VStack>
+						</ItemGroup>
 					) }
 				</>
 			}

diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-pages/style.scss b/packages/edit-site/src/components/sidebar-navigation-screen-pages/style.scss
diff --git a/packages/edit-site/src/components/sidebar-navigation-screen/style.scss b/packages/edit-site/src/components/sidebar-navigation-screen/style.scss
@@ -73,12 +73,12 @@
 	}
 }
 
-.edit-site-sidebar-navigation-screen__sticky-section {
+.edit-site-sidebar-navigation-screen__sticky-section.edit-site-sidebar-navigation-screen__sticky-section {
 	position: sticky;
 	bottom: 0;
 	background-color: $gray-900;
 	gap: 0;
-	padding: $grid-unit-20 0;
-	margin: $grid-unit-20 0 #{- $grid-unit-20} 0;
+	padding: $grid-unit-40 0;
+	margin: $grid-unit-40 $grid-unit-20;
 	border-top: 1px solid $gray-800;
 }
diff --git a/packages/edit-site/src/style.scss b/packages/edit-site/src/style.scss
@@ -25,7 +25,6 @@
 @import "./components/sidebar-button/style.scss";
 @import "./components/sidebar-navigation-item/style.scss";
 @import "./components/sidebar-navigation-screen/style.scss";
-@import "./components/sidebar-navigation-screen-pages/style.scss";
 @import "./components/sidebar-navigation-screen-page/style.scss";
 @import "./components/sidebar-navigation-screen-template/style.scss";
 @import "./components/sidebar-navigation-screen-templates/style.scss";