@wordpress/edit-site 6.4.0 → 6.6.0

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

@@ -42,11 +42,36 @@ import Media from '../media';
 // See https://github.com/WordPress/gutenberg/issues/55886
 // We do not support custom statutes at the moment.
 const STATUSES = [
-	{ value: 'draft', label: __( 'Draft' ), icon: drafts },
-	{ value: 'future', label: __( 'Scheduled' ), icon: scheduled },
-	{ value: 'pending', label: __( 'Pending Review' ), icon: pending },
-	{ value: 'private', label: __( 'Private' ), icon: notAllowed },
-	{ value: 'publish', label: __( 'Published' ), icon: published },
+	{
+		value: 'draft',
+		label: __( 'Draft' ),
+		icon: drafts,
+		description: __( 'Not ready to publish.' ),
+	},
+	{
+		value: 'future',
+		label: __( 'Scheduled' ),
+		icon: scheduled,
+		description: __( 'Publish automatically on a chosen date.' ),
+	},
+	{
+		value: 'pending',
+		label: __( 'Pending Review' ),
+		icon: pending,
+		description: __( 'Waiting for review before publishing.' ),
+	},
+	{
+		value: 'private',
+		label: __( 'Private' ),
+		icon: notAllowed,
+		description: __( 'Only visible to site admins and editors.' ),
+	},
+	{
+		value: 'publish',
+		label: __( 'Published' ),
+		icon: published,
+		description: __( 'Visible to everyone.' ),
+	},
 	{ value: 'trash', label: __( 'Trash' ), icon: trash },
 ];
 
@@ -186,6 +211,10 @@ function usePostFields( viewType ) {
 					const addLink =
 						[ LAYOUT_TABLE, LAYOUT_GRID ].includes( viewType ) &&
 						item.status !== 'trash';
+					const renderedTitle =
+						typeof item.title === 'string'
+							? item.title
+							: item.title?.rendered;
 					const title = addLink ? (
 						<Link
 							params={ {
@@ -194,12 +223,12 @@ function usePostFields( viewType ) {
 								canvas: 'edit',
 							} }
 						>
-							{ decodeEntities( item.title?.rendered ) ||
+							{ decodeEntities( renderedTitle ) ||
 								__( '(no title)' ) }
 						</Link>
 					) : (
 						<span>
-							{ decodeEntities( item.title?.rendered ) ||
+							{ decodeEntities( renderedTitle ) ||
 								__( '(no title)' ) }
 						</span>
 					);
@@ -235,22 +264,29 @@ function usePostFields( viewType ) {
 			{
 				label: __( 'Author' ),
 				id: 'author',
-				getValue: ( { item } ) => item._embedded?.author[ 0 ]?.name,
+				type: 'integer',
 				elements:
 					authors?.map( ( { id, name } ) => ( {
 						value: id,
 						label: name,
 					} ) ) || [],
 				render: PostAuthorField,
+				sort: ( a, b, direction ) => {
+					const nameA = a._embedded?.author?.[ 0 ]?.name || '';
+					const nameB = b._embedded?.author?.[ 0 ]?.name || '';
+
+					return direction === 'asc'
+						? nameA.localeCompare( nameB )
+						: nameB.localeCompare( nameA );
+				},
 			},
 			{
 				label: __( 'Status' ),
 				id: 'status',
-				getValue: ( { item } ) =>
-					STATUSES.find( ( { value } ) => value === item.status )
-						?.label ?? item.status,
+				type: 'text',
 				elements: STATUSES,
 				render: PostStatusField,
+				Edit: 'radio',
 				enableSorting: false,
 				filterBy: {
 					operators: [ OPERATOR_IS_ANY ],
@@ -259,6 +295,7 @@ function usePostFields( viewType ) {
 			{
 				label: __( 'Date' ),
 				id: 'date',
+				type: 'datetime',
 				render: ( { item } ) => {
 					const isDraftOrPrivate = [ 'draft', 'private' ].includes(
 						item.status
@@ -292,19 +329,13 @@ function usePostFields( viewType ) {
 						);
 					}
 
-					// Pending & Published posts show the modified date if it's newer.
-					const dateToDisplay =
-						getDate( item.modified ) > getDate( item.date )
-							? item.modified
-							: item.date;
-
-					const isPending = item.status === 'pending';
-					if ( isPending ) {
+					const isPublished = item.status === 'publish';
+					if ( isPublished ) {
 						return createInterpolateElement(
 							sprintf(
-								/* translators: %s: the newest of created or modified date for the page */
-								__( '<span>Modified: <time>%s</time></span>' ),
-								getFormattedDate( dateToDisplay )
+								/* translators: %s: page creation time */
+								__( '<span>Published: <time>%s</time></span>' ),
+								getFormattedDate( item.date )
 							),
 							{
 								span: <span />,
@@ -313,12 +344,18 @@ function usePostFields( viewType ) {
 						);
 					}
 
-					const isPublished = item.status === 'publish';
-					if ( isPublished ) {
+					// Pending posts show the modified date if it's newer.
+					const dateToDisplay =
+						getDate( item.modified ) > getDate( item.date )
+							? item.modified
+							: item.date;
+
+					const isPending = item.status === 'pending';
+					if ( isPending ) {
 						return createInterpolateElement(
 							sprintf(
 								/* translators: %s: the newest of created or modified date for the page */
-								__( '<span>Published: <time>%s</time></span>' ),
+								__( '<span>Modified: <time>%s</time></span>' ),
 								getFormattedDate( dateToDisplay )
 							),
 							{
@@ -332,6 +369,32 @@ function usePostFields( viewType ) {
 					return <time>{ getFormattedDate( item.date ) }</time>;
 				},
 			},
+			{
+				id: 'comment_status',
+				label: __( 'Discussion' ),
+				type: 'text',
+				Edit: 'radio',
+				enableSorting: false,
+				filterBy: {
+					operators: [],
+				},
+				elements: [
+					{
+						value: 'open',
+						label: __( 'Open' ),
+						description: __(
+							'Visitors can add new comments and replies.'
+						),
+					},
+					{
+						value: 'closed',
+						label: __( 'Closed' ),
+						description: __(
+							'Visitors cannot add new comments or replies. Existing comments remain visible.'
+						),
+					},
+				],
+			},
 		],
 		[ authors, viewType, frontPageId, postsPageId ]
 	);

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

@@ -2,11 +2,14 @@
  * WordPress dependencies
  */
 import { Button } from '@wordpress/components';
-import { useEntityRecords, store as coreStore } from '@wordpress/core-data';
+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 } from '@wordpress/dataviews';
+import { DataViews, filterSortAndPaginate } from '@wordpress/dataviews';
 import { privateApis as editorPrivateApis } from '@wordpress/editor';
 import { __ } from '@wordpress/i18n';
 import { drawerRight } from '@wordpress/icons';
@@ -33,102 +36,139 @@ 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 DEFAULT_VIEWS = useDefaultViews( { postType } );
-	const selectedDefaultView = useMemo( () => {
-		const defaultView =
-			isCustom === 'false' &&
-			DEFAULT_VIEWS[ postType ].find(
-				( { slug } ) => slug === activeView
-			)?.view;
-		if ( isCustom === 'false' && layout ) {
-			return {
-				...defaultView,
-				type: layout,
-				layout: defaultLayouts[ layout ]?.layout,
-			};
-		}
-		return defaultView;
-	}, [ isCustom, activeView, layout, postType, DEFAULT_VIEWS ] );
-	const [ view, setView ] = useState( selectedDefaultView );
 
-	useEffect( () => {
-		if ( selectedDefaultView ) {
-			setView( selectedDefaultView );
-		}
-	}, [ selectedDefaultView ] );
-	const editedViewRecord = useSelect(
+	const defaultViews = useDefaultViews( { postType } );
+	const { editEntityRecord } = useDispatch( coreStore );
+	const editedEntityRecord = useSelect(
 		( select ) => {
 			if ( isCustom !== 'true' ) {
-				return;
+				return undefined;
 			}
+
 			const { getEditedEntityRecord } = select( coreStore );
-			const dataviewRecord = getEditedEntityRecord(
+			return getEditedEntityRecord(
 				'postType',
 				'wp_dataviews',
 				Number( activeView )
 			);
-			return dataviewRecord;
 		},
 		[ activeView, isCustom ]
 	);
-	const { editEntityRecord } = useDispatch( coreStore );
-
-	const customView = useMemo( () => {
-		const storedView =
-			editedViewRecord?.content &&
-			JSON.parse( editedViewRecord?.content );
-		if ( ! storedView ) {
-			return storedView;
+	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 {
-			...storedView,
-			layout: defaultLayouts[ storedView?.type ]?.layout,
+			...initialView,
+			type,
 		};
-	}, [ editedViewRecord?.content ] );
+	} );
 
-	const setCustomView = useCallback(
-		( viewToSet ) => {
-			editEntityRecord(
-				'postType',
-				'wp_dataviews',
-				editedViewRecord?.id,
-				{
-					content: JSON.stringify( viewToSet ),
-				}
-			);
-		},
-		[ editEntityRecord, editedViewRecord?.id ]
-	);
+	const setViewWithUrlUpdate = useCallback(
+		( newView ) => {
+			const { params } = history.getLocationWithParams();
 
-	const setDefaultViewAndUpdateUrl = useCallback(
-		( viewToSet ) => {
-			if ( viewToSet.type !== view?.type ) {
-				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: viewToSet.type,
+					layout: newView.type,
 				} );
 			}
-			setView( viewToSet );
+
+			setView( newView );
+
+			if ( isCustom === 'true' && editedEntityRecord?.id ) {
+				editEntityRecord(
+					'postType',
+					'wp_dataviews',
+					editedEntityRecord?.id,
+					{
+						content: JSON.stringify( newView ),
+					}
+				);
+			}
 		},
-		[ history, view?.type ]
+		[ history, isCustom, editEntityRecord, editedEntityRecord?.id ]
 	);
 
-	if ( isCustom === 'false' ) {
-		return [ view, setDefaultViewAndUpdateUrl ];
-	} else if ( isCustom === 'true' && customView ) {
-		return [ customView, setCustomView ];
-	}
-	// Loading state where no the view was not found on custom views or default views.
-	return [ DEFAULT_VIEWS[ postType ][ 0 ].view, setDefaultViewAndUpdateUrl ];
+	// 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'.
@@ -141,7 +181,12 @@ export default function PostList( { postType } ) {
 	const [ view, setView ] = useView( postType );
 	const history = useHistory();
 	const location = useLocation();
-	const { postId, quickEdit = false } = location.params;
+	const {
+		postId,
+		quickEdit = false,
+		isCustom,
+		activeView = 'all',
+	} = location.params;
 	const [ selection, setSelection ] = useState( postId?.split( ',' ) ?? [] );
 	const onChangeSelection = useCallback(
 		( items ) => {
@@ -157,9 +202,11 @@ export default function PostList( { postType } ) {
 		[ history ]
 	);
 
+	const { isLoading: isLoadingFields, fields } = usePostFields( view.type );
+
 	const queryArgs = useMemo( () => {
 		const filters = {};
-		view.filters.forEach( ( filter ) => {
+		view.filters?.forEach( ( filter ) => {
 			if (
 				filter.field === 'status' &&
 				filter.operator === OPERATOR_IS_ANY
@@ -196,12 +243,25 @@ export default function PostList( { postType } ) {
 	}, [ view ] );
 	const {
 		records,
-		isResolving: isLoadingMainEntities,
+		isResolving: isLoadingData,
 		totalItems,
 		totalPages,
-	} = useEntityRecords( 'postType', postType, queryArgs );
+	} = 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 = records?.map( ( record ) => getItemId( record ) ) ?? [];
+	const ids = data?.map( ( record ) => getItemId( record ) ) ?? [];
 	const prevIds = usePrevious( ids ) ?? [];
 	const deletedIds = prevIds.filter( ( id ) => ! ids.includes( id ) );
 	const postIdWasDeleted = deletedIds.includes( postId );
@@ -259,7 +319,6 @@ export default function PostList( { postType } ) {
 		} );
 		closeModal();
 	};
-	const { isLoading: isLoadingFields, fields } = usePostFields( view.type );
 
 	return (
 		<Page
@@ -287,11 +346,12 @@ export default function PostList( { postType } ) {
 			}
 		>
 			<DataViews
+				key={ activeView + isCustom }
 				paginationInfo={ paginationInfo }
 				fields={ fields }
 				actions={ actions }
-				data={ records || EMPTY_ARRAY }
-				isLoading={ isLoadingMainEntities || isLoadingFields }
+				data={ data || EMPTY_ARRAY }
+				isLoading={ isLoadingData || isLoadingFields }
 				view={ view }
 				onChangeView={ setView }
 				selection={ selection }
@@ -306,11 +366,7 @@ export default function PostList( { postType } ) {
 							size="compact"
 							isPressed={ quickEdit }
 							icon={ drawerRight }
-							label={
-								! quickEdit
-									? __( 'Show quick edit sidebar' )
-									: __( 'Close quick edit sidebar' )
-							}
+							label={ __( 'Toggle details panel' ) }
 							onClick={ () => {
 								history.push( {
 									...location.params,

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 {
@@ -80,6 +78,7 @@ function AddNewItemModalContent( { type, setIsAdding } ) {
 		>
 			<VStack spacing="5">
 				<TextControl
+					__next40pxDefaultSize
 					__nextHasNoMarginBottom
 					label={ __( 'Name' ) }
 					value={ title }

package/src/components/sidebar-dataviews/custom-dataviews-list.js

@@ -51,6 +51,7 @@ function RenameItemModalContent( { dataviewId, currentTitle, setIsRenaming } ) {
 		>
 			<VStack spacing="5">
 				<TextControl
+					__next40pxDefaultSize
 					__nextHasNoMarginBottom
 					label={ __( 'Name' ) }
 					value={ title }

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,
 	} );