Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Try adding dynamic page templates to pages section #50630

Merged
merged 15 commits into from
May 30, 2023
Merged

Try adding dynamic page templates to pages section #50630

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
15 commits
Select commit Hold shift + click to select a range
bf2ec56
Try adding dynamic page templates to pages section
tellthemachines May 15, 2023
46e813e
remove recent heading in pages
SaxonF May 15, 2023
02ebcbe
Static homepage case
tellthemachines May 16, 2023
9c0099b
Back button should go back to Pages
tellthemachines May 16, 2023
1add381
Fix order of home and blog pages
tellthemachines May 16, 2023
75e287f
Try fetching all the pages
tellthemachines May 17, 2023
e8c6695
Stick templates to bottom
tellthemachines May 17, 2023
1631b32
Stick item positioning
jameskoster May 17, 2023
a107162
Revert custom back button behaviour
tellthemachines May 24, 2023
92ee8ab
Move manage link to dynamic pages group
jameskoster May 24, 2023
db06915
Remove home/posts page suffixes
jameskoster May 24, 2023
bb94a22
Address feedback
tellthemachines May 26, 2023
2ba722b
Add back truncation
tellthemachines May 29, 2023
a151d40
Copy array for reorder
tellthemachines May 29, 2023
9c218f6
Consolidate sticky styles
tellthemachines May 29, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 0 additions & 5 deletions packages/edit-site/src/components/sidebar-navigation-screen-page/style.scss
View file
Open in desktop
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
Open in desktop
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 =
ntsekouras marked this conversation as resolved.
Show resolved Hide resolved
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 ) => {
Copy link
Member

@ramonjd ramonjd May 29, 2023 •
edited
Loading

Choose a reason for hiding this comment

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

Optional, but perhaps this could be simplified with destructuring, and a function to grab the icon.

	const getIcon = ( id ) => { // I don't think we need useCallback here since `frontPage` and `postsPage` won't change after defined.
		if ( id === frontPage ) {
			return home;
		}
		if ( id === postsPage ) {
			return loop;
		}
		return page;
	};

....

{ reorderedPages?.map( ( { id, title } ) => (
	<PageItem
		postId={ id }
		key={ id }
		icon={ getIcon( id ) }
		withChevron
	>
		<Truncate numberOfLines={ 1 }>
			{ decodeEntities( title?.rendered ) ??
				__( '(no title)' ) }
		</Truncate>
	</PageItem>
) ) }

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)' ) }
Copy link
Member

Choose a reason for hiding this comment

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

#50767 uses 'Untitled' as fallback.

I have no preference either way, but we should make them the same.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

"no title" is what the pages were already using, this PR only adds a couple more instances. Was changing it to "Untitled" a design requirement? I'm happy with either, but would prefer to address that as a follow-up.

Copy link
Member

Choose a reason for hiding this comment

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

Was changing it to "Untitled" a design requirement?

Not at all, just asking so that I can update the individual page view to match this copy 👍

Copy link
Member

@ramonjd ramonjd May 30, 2023 •
edited
Loading

Choose a reason for hiding this comment

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

PR here: #51074

</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
Open in desktop

This file was deleted.

6 changes: 3 additions & 3 deletions packages/edit-site/src/components/sidebar-navigation-screen/style.scss
View file
Open in desktop
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
Open in desktop
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