WIP: Posts list

lib/experimental/posts/load.php

@@ -23,6 +23,19 @@ function gutenberg_posts_dashboard() {
 	echo '<div id="gutenberg-posts-dashboard"></div>';
 }
 
+/**
+ * Redirects to the new posts dashboard page and adds the postType query arg.
+ * TODO: there should be a better way to do this..
+ */
+function gutenberg_add_post_type_arg() {
+    global $pagenow;
+    if ( $pagenow == 'admin.php' && isset( $_GET['page'] ) && $_GET['page'] == 'gutenberg-posts-dashboard' && empty( $_GET['postType'] ) ) {
+        wp_redirect( admin_url( '/admin.php?page=gutenberg-posts-dashboard&postType=post' ) );
+        exit;
+    }
+}
+add_action( 'admin_init', 'gutenberg_add_post_type_arg' );
+
 /**
  * Replaces the default posts menu item with the new posts dashboard.
  */

packages/edit-site/src/components/add-new-page/index.js → packages/edit-site/src/components/add-new-post/index.js

@@ -16,7 +16,10 @@ import { store as noticesStore } from '@wordpress/notices';
 import { decodeEntities } from '@wordpress/html-entities';
 import { serialize, synchronizeBlocksWithTemplate } from '@wordpress/blocks';
 
-export default function AddNewPageModal( { onSave, onClose } ) {
+// TODO: check how/if to reuse this and make it work for other post types.
+// Currently this creates drafts, so we should look into that..
+// Also lot's of labels need to be updated properly..
+export default function AddNewPostModal( { postType, onSave, onClose } ) {
 	const [ isCreatingPage, setIsCreatingPage ] = useState( false );
 	const [ title, setTitle ] = useState( '' );
 
@@ -33,11 +36,12 @@ export default function AddNewPageModal( { onSave, onClose } ) {
 		}
 		setIsCreatingPage( true );
 		try {
+			// TODO: also check this change.. It was merged(https://github.com/WordPress/gutenberg/pull/62488/) as I was coding this..
 			const pagePostType =
-				await resolveSelect( coreStore ).getPostType( 'page' );
+				await resolveSelect( coreStore ).getPostType( postType );
 			const newPage = await saveEntityRecord(
 				'postType',
-				'page',
+				postType,
 				{
 					status: 'draft',
 					title,
@@ -71,7 +75,7 @@ export default function AddNewPageModal( { onSave, onClose } ) {
 			const errorMessage =
 				error.message && error.code !== 'unknown_error'
 					? error.message
-					: __( 'An error occurred while creating the page.' );
+					: __( 'An error occurred while creating the item.' );
 
 			createErrorNotice( errorMessage, {
 				type: 'snackbar',

packages/edit-site/src/components/layout/router.js

@@ -10,7 +10,7 @@ import { useEffect } from '@wordpress/element';
 import { unlock } from '../../lock-unlock';
 import { useIsSiteEditorLoading } from './hooks';
 import Editor from '../editor';
-import PagePages from '../page-pages';
+import PostsList from '../posts-app/posts-list';
 import PagePatterns from '../page-patterns';
 import PageTemplates from '../page-templates';
 import SidebarNavigationScreen from '../sidebar-navigation-screen';
@@ -92,15 +92,15 @@ export default function useLayoutAreas() {
 						content={ <DataViewsSidebarContent /> }
 					/>
 				),
-				content: <PagePages />,
+				content: <PostsList postType={ postType } />,
 				preview: ( isListLayout || canvas === 'edit' ) && (
 					<Editor isLoading={ isSiteEditorLoading } />
 				),
 				mobile:
 					canvas === 'edit' ? (
 						<Editor isLoading={ isSiteEditorLoading } />
 					) : (
-						<PagePages />
+						<PostsList postType={ postType } />
 					),
 			},
 			widths: {

packages/edit-site/src/components/page-pages/style.scss

@@ -1,3 +1,6 @@
+// TODO: we need to examine if these styles could be the default styles
+// for every post type and/or how to have different styles for different post types.
+// Example is `posts` and `pages`.
 .edit-site-page-pages__featured-image {
 	height: 100%;
 	object-fit: cover;

packages/edit-site/src/components/posts-app/index.js

@@ -10,29 +10,27 @@ import { privateApis as routerPrivateApis } from '@wordpress/router';
 /**
  * Internal dependencies
  */
+import useInitEditedEntityFromURL from '../sync-state-with-url/use-init-edited-entity-from-url';
 import Layout from '../layout';
-import Page from '../page';
+import useLayoutAreas from './router';
 import { unlock } from '../../lock-unlock';
 
 const { RouterProvider } = unlock( routerPrivateApis );
 const { GlobalStylesProvider } = unlock( editorPrivateApis );
 
-const defaultRoute = {
-	key: 'index',
-	areas: {
-		sidebar: 'Empty Sidebar',
-		content: <Page>Welcome to Posts</Page>,
-		preview: undefined,
-		mobile: <Page>Welcome to Posts</Page>,
-	},
-};
+function PostsLayout() {
+	// This ensures the edited entity id and type are initialized properly.
+	useInitEditedEntityFromURL();
+	const route = useLayoutAreas();
+	return <Layout route={ route } />;
+}
 
 export default function PostsApp() {
 	return (
 		<GlobalStylesProvider>
 			<UnsavedChangesWarning />
 			<RouterProvider>
-				<Layout route={ defaultRoute } />
+				<PostsLayout />
 			</RouterProvider>
 		</GlobalStylesProvider>
 	);

packages/edit-site/src/components/page-pages/index.js → packages/edit-site/src/components/posts-app/posts-list.js

@@ -24,7 +24,7 @@ import { privateApis as editorPrivateApis } from '@wordpress/editor';
 import Page from '../page';
 import { default as Link, useLink } from '../routes/link';
 import {
-	DEFAULT_VIEWS,
+	useDefaultViews,
 	DEFAULT_CONFIG_PER_VIEW_TYPE,
 } from '../sidebar-dataviews/default-views';
 import {
@@ -35,7 +35,7 @@ import {
 	OPERATOR_IS_NONE,
 } from '../../utils/constants';
 
-import AddNewPageModal from '../add-new-page';
+import AddNewPostModal from '../add-new-post';
 import Media from '../media';
 import { unlock } from '../../lock-unlock';
 import { useEditPostAction } from '../dataviews-actions';
@@ -56,6 +56,7 @@ function useView( postType ) {
 		params: { activeView = 'all', isCustom = 'false', layout },
 	} = useLocation();
 	const history = useHistory();
+	const DEFAULT_VIEWS = useDefaultViews( { postType } );
 	const selectedDefaultView = useMemo( () => {
 		const defaultView =
 			isCustom === 'false' &&
@@ -72,7 +73,7 @@ function useView( postType ) {
 			};
 		}
 		return defaultView;
-	}, [ isCustom, activeView, layout, postType ] );
+	}, [ isCustom, activeView, layout, postType, DEFAULT_VIEWS ] );
 	const [ view, setView ] = useState( selectedDefaultView );
 
 	useEffect( () => {
@@ -206,15 +207,13 @@ function getItemId( item ) {
 	return item.id.toString();
 }
 
-export default function PagePages() {
-	const postType = 'page';
+export default function PostsList( { postType } ) {
 	const [ view, setView ] = useView( postType );
 	const history = useHistory();
 	const {
 		params: { postId },
 	} = useLocation();
 	const [ selection, setSelection ] = useState( [ postId ] );
-
 	const onSelectionChange = useCallback(
 		( items ) => {
 			const { params } = history.getLocationWithParams();
@@ -269,13 +268,13 @@ export default function PagePages() {
 		};
 	}, [ view ] );
 	const {
-		records: pages,
-		isResolving: isLoadingPages,
+		records,
+		isResolving: isLoadingMainEntities,
 		totalItems,
 		totalPages,
 	} = useEntityRecords( 'postType', postType, queryArgs );
 
-	const ids = pages?.map( ( page ) => getItemId( page ) ) ?? [];
+	const ids = records?.map( ( record ) => getItemId( record ) ) ?? [];
 	const prevIds = usePrevious( ids ) ?? [];
 	const deletedIds = prevIds.filter( ( id ) => ! ids.includes( id ) );
 	const postIdWasDeleted = deletedIds.includes( postId );
@@ -300,20 +299,26 @@ export default function PagePages() {
 		[ totalItems, totalPages ]
 	);
 
-	const { frontPageId, postsPageId, addNewLabel, canCreatePage } = useSelect(
+	const { frontPageId, postsPageId, labels, canCreateRecord } = useSelect(
 		( select ) => {
 			const { getEntityRecord, getPostType, canUser } =
 				select( coreStore );
 			const siteSettings = getEntityRecord( 'root', 'site' );
 			return {
 				frontPageId: siteSettings?.page_on_front,
 				postsPageId: siteSettings?.page_for_posts,
-				addNewLabel: getPostType( 'page' )?.labels?.add_new_item,
-				canCreatePage: canUser( 'create', 'pages' ),
+				labels: getPostType( postType )?.labels,
+				// TODO: check what is the proper way to make this work for any post type..
+				canCreateRecord: canUser(
+					'create',
+					postType === 'page' ? 'pages' : 'posts'
+				),
 			};
-		}
+		},
+		[ postType ]
 	);
 
+	// TODO: this should be abstracted into a hook similar to `usePostActions`.
 	const fields = useMemo(
 		() => [
 			{
@@ -484,7 +489,7 @@ export default function PagePages() {
 	);
 
 	const postTypeActions = usePostActions( {
-		postType: 'page',
+		postType,
 		context: 'list',
 	} );
 	const editAction = useEditPostAction();
@@ -509,10 +514,10 @@ export default function PagePages() {
 		[ view.type, setView ]
 	);
 
-	const [ showAddPageModal, setShowAddPageModal ] = useState( false );
+	const [ showAddPostModal, setShowAddPostModal ] = useState( false );
 
-	const openModal = () => setShowAddPageModal( true );
-	const closeModal = () => setShowAddPageModal( false );
+	const openModal = () => setShowAddPostModal( true );
+	const closeModal = () => setShowAddPostModal( false );
 	const handleNewPage = ( { type, id } ) => {
 		history.push( {
 			postId: id,
@@ -524,20 +529,21 @@ export default function PagePages() {
 
 	return (
 		<Page
-			title={ __( 'Pages' ) }
+			title={ labels?.name }
 			actions={
-				addNewLabel &&
-				canCreatePage && (
+				labels?.add_new_item &&
+				canCreateRecord && (
 					<>
 						<Button
 							variant="primary"
 							onClick={ openModal }
 							__next40pxDefaultSize
 						>
-							{ addNewLabel }
+							{ labels.add_new_item }
 						</Button>
-						{ showAddPageModal && (
-							<AddNewPageModal
+						{ showAddPostModal && (
+							<AddNewPostModal
+								postType={ postType }
 								onSave={ handleNewPage }
 								onClose={ closeModal }
 							/>
@@ -550,8 +556,8 @@ export default function PagePages() {
 				paginationInfo={ paginationInfo }
 				fields={ fields }
 				actions={ actions }
-				data={ pages || EMPTY_ARRAY }
-				isLoading={ isLoadingPages || isLoadingAuthors }
+				data={ records || EMPTY_ARRAY }
+				isLoading={ isLoadingMainEntities || isLoadingAuthors }
 				view={ view }
 				onChangeView={ onChangeView }
 				selection={ selection }

packages/edit-site/src/components/posts-app/router.js

@@ -0,0 +1,82 @@
+/**
+ * WordPress dependencies
+ */
+import { privateApis as routerPrivateApis } from '@wordpress/router';
+import { useSelect } from '@wordpress/data';
+import { store as coreStore } from '@wordpress/core-data';
+
+/**
+ * Internal dependencies
+ */
+import { unlock } from '../../lock-unlock';
+import { useIsSiteEditorLoading } from '../layout/hooks';
+import Editor from '../editor';
+import SidebarNavigationScreen from '../sidebar-navigation-screen';
+import SidebarNavigationScreenMain from '../sidebar-navigation-screen-main';
+import DataViewsSidebarContent from '../sidebar-dataviews';
+import PostsList from '../posts-app/posts-list';
+
+const { useLocation } = unlock( routerPrivateApis );
+
+export default function useLayoutAreas() {
+	const isSiteEditorLoading = useIsSiteEditorLoading();
+	const { params = {} } = useLocation();
+	const { postType, layout, canvas } = params;
+	const labels = useSelect(
+		( select ) => {
+			return select( coreStore ).getPostType( postType )?.labels;
+		},
+		[ postType ]
+	);
+
+	// Posts list.
+	if ( [ 'page', 'post' ].includes( postType ) ) {
+		const isListLayout = layout === 'list' || ! layout;
+		return {
+			key: 'pages',
+			areas: {
+				sidebar: (
+					<SidebarNavigationScreen
+						title={ labels?.name }
+						backPath={ {} }
+						content={ <DataViewsSidebarContent /> }
+					/>
+				),
+				content: <PostsList postType={ postType } />,
+				preview: ( isListLayout || canvas === 'edit' ) && (
+					<Editor isLoading={ isSiteEditorLoading } />
+				),
+				mobile:
+					canvas === 'edit' ? (
+						<Editor isLoading={ isSiteEditorLoading } />
+					) : (
+						<PostsList postType={ postType } />
+					),
+			},
+			widths: {
+				content: isListLayout ? 380 : undefined,
+			},
+		};
+	}
+
+	// const defaultRoute = {
+	// 	key: 'index',
+	// 	areas: {
+	// 		sidebar: 'Empty Sidebar',
+	// 		content: <PostsList />,
+	// 		preview: undefined,
+	// 		mobile: <Page>Welcome to Posts</Page>,
+	// 	},
+	// };
+	// Fallback shows the home page preview
+	return {
+		key: 'default',
+		areas: {
+			sidebar: <SidebarNavigationScreenMain />,
+			preview: <Editor isLoading={ isSiteEditorLoading } />,
+			mobile: canvas === 'edit' && (
+				<Editor isLoading={ isSiteEditorLoading } />
+			),
+		},
+	};
+}

packages/edit-site/src/components/sidebar-dataviews/add-new-view.js

@@ -19,7 +19,7 @@ import { privateApis as routerPrivateApis } from '@wordpress/router';
  * Internal dependencies
  */
 import SidebarNavigationItem from '../sidebar-navigation-item';
-import { DEFAULT_VIEWS } from './default-views';
+import { useDefaultViews } from './default-views';
 import { unlock } from '../../lock-unlock';
 
 const { useHistory } = unlock( routerPrivateApis );
@@ -29,6 +29,7 @@ function AddNewItemModalContent( { type, setIsAdding } ) {
 	const { saveEntityRecord } = useDispatch( coreStore );
 	const [ title, setTitle ] = useState( '' );
 	const [ isSaving, setIsSaving ] = useState( false );
+	const DEFAULT_VIEWS = useDefaultViews( { postType: type } );
 	return (
 		<form
 			onSubmit={ async ( event ) => {