Skip to content

Commit

Permalink
Try adding dynamic page templates to pages section (#50630)
Browse files Browse the repository at this point in the history 
* 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]>
  • Loading branch information
@tellthemachines @SaxonF @jameskoster
3 people authored May 30, 2023
1 parent f80ed06 commit 0fa988f
Show file tree
Hide file tree
Showing 5 changed files with 119 additions and 36 deletions.
5 changes: 0 additions & 5 deletions packages/edit-site/src/components/sidebar-navigation-screen-page/style.scss
View file
Original file line number Diff line number Diff line change
@@ -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;
Expand Down
139 changes: 116 additions & 23 deletions packages/edit-site/src/components/sidebar-navigation-screen-pages/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
) ) }
Expand All @@ -76,8 +169,8 @@ export default function SidebarNavigationScreenPages() {
>
{ __( 'Manage all pages' ) }
</SidebarNavigationItem>
</ItemGroup>
</>
</VStack>
</ItemGroup>
) }
</>
}
Expand Down
4 changes: 0 additions & 4 deletions packages/edit-site/src/components/sidebar-navigation-screen-pages/style.scss
View file

This file was deleted.

6 changes: 3 additions & 3 deletions packages/edit-site/src/components/sidebar-navigation-screen/style.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
1 change: 0 additions & 1 deletion packages/edit-site/src/style.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand Down

1 comment on commit 0fa988f

@github-actions
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Flaky tests detected in 0fa988f.
Some tests passed with failed attempts. The failures may not be related to this commit but are still reported for visibility. See the documentation for more information.

🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/5116266479
📝 Reported issues:

Please sign in to comment.