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 index 94dd7aa67096b..7f7e6d79b5029 100644 --- 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 index ebb38d9478fc4..6a3e02c64825f 100644 --- 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,10 +5,13 @@ 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 @@ -16,22 +19,71 @@ import { decodeEntities } from '@wordpress/html-entities'; 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 ; }; 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 ( - { isLoading && ( + { ( isLoadingPages || isLoadingTemplates ) && ( { __( 'Loading pages' ) } ) } - { ! isLoading && ( - <> - - { __( 'Recent' ) } - - - { ! pages?.length && ( - { __( 'No page found' ) } - ) } - { pages?.map( ( page ) => ( + { ! ( isLoadingPages || isLoadingTemplates ) && ( + + { ! pagesAndTemplates?.length && ( + { __( 'No page found' ) } + ) } + { isHomePageBlog && homeTemplate && ( + + + { decodeEntities( + homeTemplate.title?.rendered + ) ?? __( '(no title)' ) } + + + ) } + { reorderedPages?.map( ( item ) => { + let itemIcon; + switch ( item.id ) { + case frontPage: + itemIcon = home; + break; + case postsPage: + itemIcon = loop; + break; + default: + itemIcon = page; + } + return ( { decodeEntities( - page.title?.rendered - ) ?? __( 'Untitled' ) } + item.title?.rendered + ) ?? __( '(no title)' ) } + + + ); + } ) } + + { dynamicPageTemplates?.map( ( item ) => ( + + + { decodeEntities( + item.title?.rendered + ) ?? __( '(no title)' ) } ) ) } @@ -76,8 +169,8 @@ export default function SidebarNavigationScreenPages() { > { __( 'Manage all pages' ) } - - + + ) } } 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 deleted file mode 100644 index 7bbdd103b6bce..0000000000000 --- a/packages/edit-site/src/components/sidebar-navigation-screen-pages/style.scss +++ /dev/null @@ -1,4 +0,0 @@ -.edit-site-sidebar-navigation-screen-pages__see-all { - /* Overrides the margin that comes from the Item component */ - margin-top: $grid-unit-20 !important; -} diff --git a/packages/edit-site/src/components/sidebar-navigation-screen/style.scss b/packages/edit-site/src/components/sidebar-navigation-screen/style.scss index f4b284ec92b58..81508a7709d94 100644 --- 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 index 8eff0fe22e038..3aebc258cd510 100644 --- 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";