@wordpress/edit-site 6.3.0 → 6.5.0

package/src/components/post-list/index.js

@@ -0,0 +1,386 @@
+/**
+ * WordPress dependencies
+ */
+import { Button } from '@wordpress/components';
+import {
+	store as coreStore,
+	privateApis as coreDataPrivateApis,
+} from '@wordpress/core-data';
+import { useState, useMemo, useCallback, useEffect } from '@wordpress/element';
+import { privateApis as routerPrivateApis } from '@wordpress/router';
+import { useSelect, useDispatch } from '@wordpress/data';
+import { DataViews, filterSortAndPaginate } from '@wordpress/dataviews';
+import { privateApis as editorPrivateApis } from '@wordpress/editor';
+import { __ } from '@wordpress/i18n';
+import { drawerRight } from '@wordpress/icons';
+
+/**
+ * Internal dependencies
+ */
+import Page from '../page';
+import {
+	useDefaultViews,
+	defaultLayouts,
+} from '../sidebar-dataviews/default-views';
+import {
+	OPERATOR_IS_ANY,
+	OPERATOR_IS_NONE,
+	LAYOUT_LIST,
+} from '../../utils/constants';
+
+import AddNewPostModal from '../add-new-post';
+import { unlock } from '../../lock-unlock';
+import { useEditPostAction } from '../dataviews-actions';
+import { usePrevious } from '@wordpress/compose';
+import usePostFields from '../post-fields';
+
+const { usePostActions } = unlock( editorPrivateApis );
+const { useLocation, useHistory } = unlock( routerPrivateApis );
+const { useEntityRecordsWithPermissions } = unlock( coreDataPrivateApis );
+const EMPTY_ARRAY = [];
+
+const getDefaultView = ( defaultViews, activeView ) => {
+	return defaultViews.find( ( { slug } ) => slug === activeView )?.view;
+};
+
+const getCustomView = ( editedEntityRecord ) => {
+	if ( ! editedEntityRecord?.content ) {
+		return undefined;
+	}
+
+	const content = JSON.parse( editedEntityRecord.content );
+	if ( ! content ) {
+		return undefined;
+	}
+
+	return {
+		...content,
+		layout: defaultLayouts[ content.type ]?.layout,
+	};
+};
+
+/**
+ * This function abstracts working with default & custom views by
+ * providing a [ state, setState ] tuple based on the URL parameters.
+ *
+ * Consumers use the provided tuple to work with state
+ * and don't have to deal with the specifics of default & custom views.
+ *
+ * @param {string} postType Post type to retrieve default views for.
+ * @return {Array} The [ state, setState ] tuple.
+ */
+function useView( postType ) {
+	const {
+		params: { activeView = 'all', isCustom = 'false', layout },
+	} = useLocation();
+	const history = useHistory();
+
+	const defaultViews = useDefaultViews( { postType } );
+	const { editEntityRecord } = useDispatch( coreStore );
+	const editedEntityRecord = useSelect(
+		( select ) => {
+			if ( isCustom !== 'true' ) {
+				return undefined;
+			}
+
+			const { getEditedEntityRecord } = select( coreStore );
+			return getEditedEntityRecord(
+				'postType',
+				'wp_dataviews',
+				Number( activeView )
+			);
+		},
+		[ activeView, isCustom ]
+	);
+	const [ view, setView ] = useState( () => {
+		let initialView;
+		if ( isCustom === 'true' ) {
+			initialView = getCustomView( editedEntityRecord ) ?? {
+				type: layout ?? LAYOUT_LIST,
+			};
+		} else {
+			initialView = getDefaultView( defaultViews, activeView ) ?? {
+				type: layout ?? LAYOUT_LIST,
+			};
+		}
+
+		const type = layout ?? initialView.type;
+		return {
+			...initialView,
+			type,
+		};
+	} );
+
+	const setViewWithUrlUpdate = useCallback(
+		( newView ) => {
+			const { params } = history.getLocationWithParams();
+
+			if ( newView.type === LAYOUT_LIST && ! params?.layout ) {
+				// Skip updating the layout URL param if
+				// it is not present and the newView.type is LAYOUT_LIST.
+			} else if ( newView.type !== params?.layout ) {
+				history.push( {
+					...params,
+					layout: newView.type,
+				} );
+			}
+
+			setView( newView );
+
+			if ( isCustom === 'true' && editedEntityRecord?.id ) {
+				editEntityRecord(
+					'postType',
+					'wp_dataviews',
+					editedEntityRecord?.id,
+					{
+						content: JSON.stringify( newView ),
+					}
+				);
+			}
+		},
+		[ history, isCustom, editEntityRecord, editedEntityRecord?.id ]
+	);
+
+	// When layout URL param changes, update the view type
+	// without affecting any other config.
+	useEffect( () => {
+		setView( ( prevView ) => ( {
+			...prevView,
+			type: layout ?? LAYOUT_LIST,
+		} ) );
+	}, [ layout ] );
+
+	// When activeView or isCustom URL parameters change, reset the view.
+	useEffect( () => {
+		let newView;
+		if ( isCustom === 'true' ) {
+			newView = getCustomView( editedEntityRecord );
+		} else {
+			newView = getDefaultView( defaultViews, activeView );
+		}
+
+		if ( newView ) {
+			const type = layout ?? newView.type;
+			setView( {
+				...newView,
+				type,
+			} );
+		}
+	}, [ activeView, isCustom, layout, defaultViews, editedEntityRecord ] );
+
+	return [ view, setViewWithUrlUpdate, setViewWithUrlUpdate ];
+}
+
+const DEFAULT_STATUSES = 'draft,future,pending,private,publish'; // All but 'trash'.
+
+function getItemId( item ) {
+	return item.id.toString();
+}
+
+export default function PostList( { postType } ) {
+	const [ view, setView ] = useView( postType );
+	const history = useHistory();
+	const location = useLocation();
+	const {
+		postId,
+		quickEdit = false,
+		isCustom,
+		activeView = 'all',
+	} = location.params;
+	const [ selection, setSelection ] = useState( postId?.split( ',' ) ?? [] );
+	const onChangeSelection = useCallback(
+		( items ) => {
+			setSelection( items );
+			const { params } = history.getLocationWithParams();
+			if ( ( params.isCustom ?? 'false' ) === 'false' ) {
+				history.push( {
+					...params,
+					postId: items.join( ',' ),
+				} );
+			}
+		},
+		[ history ]
+	);
+
+	const { isLoading: isLoadingFields, fields } = usePostFields( view.type );
+
+	const queryArgs = useMemo( () => {
+		const filters = {};
+		view.filters?.forEach( ( filter ) => {
+			if (
+				filter.field === 'status' &&
+				filter.operator === OPERATOR_IS_ANY
+			) {
+				filters.status = filter.value;
+			}
+			if (
+				filter.field === 'author' &&
+				filter.operator === OPERATOR_IS_ANY
+			) {
+				filters.author = filter.value;
+			} else if (
+				filter.field === 'author' &&
+				filter.operator === OPERATOR_IS_NONE
+			) {
+				filters.author_exclude = filter.value;
+			}
+		} );
+		// We want to provide a different default item for the status filter
+		// than the REST API provides.
+		if ( ! filters.status || filters.status === '' ) {
+			filters.status = DEFAULT_STATUSES;
+		}
+
+		return {
+			per_page: view.perPage,
+			page: view.page,
+			_embed: 'author',
+			order: view.sort?.direction,
+			orderby: view.sort?.field,
+			search: view.search,
+			...filters,
+		};
+	}, [ view ] );
+	const {
+		records,
+		isResolving: isLoadingData,
+		totalItems,
+		totalPages,
+	} = useEntityRecordsWithPermissions( 'postType', postType, queryArgs );
+
+	// The REST API sort the authors by ID, but we want to sort them by name.
+	const data = useMemo( () => {
+		if ( ! isLoadingFields && view?.sort?.field === 'author' ) {
+			return filterSortAndPaginate(
+				records,
+				{ sort: { ...view.sort } },
+				fields
+			).data;
+		}
+
+		return records;
+	}, [ records, fields, isLoadingFields, view?.sort ] );
+
+	const ids = data?.map( ( record ) => getItemId( record ) ) ?? [];
+	const prevIds = usePrevious( ids ) ?? [];
+	const deletedIds = prevIds.filter( ( id ) => ! ids.includes( id ) );
+	const postIdWasDeleted = deletedIds.includes( postId );
+
+	useEffect( () => {
+		if ( postIdWasDeleted ) {
+			history.push( {
+				...history.getLocationWithParams().params,
+				postId: undefined,
+			} );
+		}
+	}, [ postIdWasDeleted, history ] );
+
+	const paginationInfo = useMemo(
+		() => ( {
+			totalItems,
+			totalPages,
+		} ),
+		[ totalItems, totalPages ]
+	);
+
+	const { labels, canCreateRecord } = useSelect(
+		( select ) => {
+			const { getPostType, canUser } = select( coreStore );
+			return {
+				labels: getPostType( postType )?.labels,
+				canCreateRecord: canUser( 'create', {
+					kind: 'postType',
+					name: postType,
+				} ),
+			};
+		},
+		[ postType ]
+	);
+
+	const postTypeActions = usePostActions( {
+		postType,
+		context: 'list',
+	} );
+	const editAction = useEditPostAction();
+	const actions = useMemo(
+		() => [ editAction, ...postTypeActions ],
+		[ postTypeActions, editAction ]
+	);
+
+	const [ showAddPostModal, setShowAddPostModal ] = useState( false );
+
+	const openModal = () => setShowAddPostModal( true );
+	const closeModal = () => setShowAddPostModal( false );
+	const handleNewPage = ( { type, id } ) => {
+		history.push( {
+			postId: id,
+			postType: type,
+			canvas: 'edit',
+		} );
+		closeModal();
+	};
+
+	return (
+		<Page
+			title={ labels?.name }
+			actions={
+				labels?.add_new_item &&
+				canCreateRecord && (
+					<>
+						<Button
+							variant="primary"
+							onClick={ openModal }
+							__next40pxDefaultSize
+						>
+							{ labels.add_new_item }
+						</Button>
+						{ showAddPostModal && (
+							<AddNewPostModal
+								postType={ postType }
+								onSave={ handleNewPage }
+								onClose={ closeModal }
+							/>
+						) }
+					</>
+				)
+			}
+		>
+			<DataViews
+				key={ activeView + isCustom }
+				paginationInfo={ paginationInfo }
+				fields={ fields }
+				actions={ actions }
+				data={ data || EMPTY_ARRAY }
+				isLoading={ isLoadingData || isLoadingFields }
+				view={ view }
+				onChangeView={ setView }
+				selection={ selection }
+				onChangeSelection={ onChangeSelection }
+				getItemId={ getItemId }
+				defaultLayouts={ defaultLayouts }
+				header={
+					window.__experimentalQuickEditDataViews &&
+					view.type !== LAYOUT_LIST &&
+					postType === 'page' && (
+						<Button
+							size="compact"
+							isPressed={ quickEdit }
+							icon={ drawerRight }
+							label={
+								! quickEdit
+									? __( 'Show quick edit sidebar' )
+									: __( 'Close quick edit sidebar' )
+							}
+							onClick={ () => {
+								history.push( {
+									...location.params,
+									quickEdit: quickEdit ? undefined : true,
+								} );
+							} }
+						/>
+					)
+				}
+			/>
+		</Page>
+	);
+}

package/src/components/{posts-app → post-list}/style.scss

@@ -1,16 +1,16 @@
-.posts-list-page__featured-image {
+.edit-site-post-list__featured-image {
 	height: 100%;
 	object-fit: cover;
 	width: 100%;
 }
 
-.posts-list-page__featured-image-wrapper {
+.edit-site-post-list__featured-image-wrapper {
 	height: 100%;
 	width: 100%;
 	border-radius: $grid-unit-05;
 
-	&.is-layout-table:not(:has(.posts-list-page-preview-field__button)),
-	&.is-layout-table .posts-list-page-preview-field__button {
+	&.is-layout-table:not(:has(.edit-site-post-list__featured-image-button)),
+	&.is-layout-table .edit-site-post-list__featured-image-button {
 		width: $grid-unit-40;
 		height: $grid-unit-40;
 		display: block;
@@ -33,7 +33,7 @@
 	}
 }
 
-.posts-list-page-preview-field__button {
+.edit-site-post-list__featured-image-button {
 	box-shadow: none;
 	border: none;
 	padding: 0;
@@ -53,18 +53,18 @@
 }
 
 .dataviews-view-grid__card.is-selected {
-	.posts-list-page-preview-field__button::after {
+	.edit-site-post-list__featured-image-button::after {
 		box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
 		background: rgba(var(--wp-admin-theme-color--rgb), 0.04);
 	}
 }
 
-.posts-list-page-title span {
+.edit-site-post-list__title span {
 	text-overflow: ellipsis;
 	overflow: hidden;
 }
 
-.posts-list-page-title-badge {
+.edit-site-post-list__title-badge {
 	background: $gray-100;
 	color: $gray-700;
 	padding: 0 $grid-unit-05;
@@ -72,11 +72,14 @@
 	font-size: 12px;
 	font-weight: 400;
 	flex-shrink: 0;
+	line-height: $grid-unit-05 * 5;
 }
 
-.posts-list-page-post-author-field__icon-container {
+.edit-site-post-list__status-icon {
 	height: $grid-unit-30;
+	width: $grid-unit-30;
 	svg {
 		fill: currentColor;
+		margin-left: -$grid-unit-05;
 	}
 }

package/src/components/posts-app/router.js

@@ -13,7 +13,7 @@ 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';
+import PostList from '../post-list';
 
 const { useLocation } = unlock( routerPrivateApis );
 
@@ -40,7 +40,7 @@ export default function useLayoutAreas() {
 						content={ <DataViewsSidebarContent /> }
 					/>
 				),
-				content: <PostsList postType={ postType } />,
+				content: <PostList postType={ postType } />,
 				preview: ( isListLayout || canvas === 'edit' ) && (
 					<Editor isPostsList />
 				),
@@ -48,7 +48,7 @@ export default function useLayoutAreas() {
 					canvas === 'edit' ? (
 						<Editor isPostsList />
 					) : (
-						<PostsList postType={ postType } />
+						<PostList postType={ postType } />
 					),
 			},
 			widths: {

package/src/components/sidebar-dataviews/add-new-view.js

@@ -29,7 +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 } );
+	const defaultViews = useDefaultViews( { postType: type } );
 	return (
 		<form
 			onSubmit={ async ( event ) => {
@@ -61,9 +61,7 @@ function AddNewItemModalContent( { type, setIsAdding } ) {
 						title,
 						status: 'publish',
 						wp_dataviews_type: dataViewTaxonomyId,
-						content: JSON.stringify(
-							DEFAULT_VIEWS[ type ][ 0 ].view
-						),
+						content: JSON.stringify( defaultViews[ 0 ].view ),
 					}
 				);
 				const {

package/src/components/sidebar-dataviews/dataview-item.js

@@ -29,7 +29,7 @@ export default function DataViewItem( {
 	suffix,
 } ) {
 	const {
-		params: { postType, layout },
+		params: { postType },
 	} = useLocation();
 
 	const iconToUse =
@@ -41,7 +41,7 @@ export default function DataViewItem( {
 	}
 	const linkInfo = useLink( {
 		postType,
-		layout,
+		layout: type,
 		activeView,
 		isCustom: isCustom ? 'true' : undefined,
 	} );