@wordpress/edit-site 5.20.1 → 5.21.1-next.f8d8eceb.0

package/src/components/page-pages/index.js

@@ -1,115 +1,156 @@
 /**
  * WordPress dependencies
  */
-import apiFetch from '@wordpress/api-fetch';
-import { addQueryArgs } from '@wordpress/url';
 import {
-	VisuallyHidden,
 	__experimentalHeading as Heading,
 	__experimentalVStack as VStack,
 } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { useEntityRecords } from '@wordpress/core-data';
 import { decodeEntities } from '@wordpress/html-entities';
-import { useState, useEffect, useMemo } from '@wordpress/element';
+import { useState, useMemo, useCallback, useEffect } from '@wordpress/element';
+import { dateI18n, getDate, getSettings } from '@wordpress/date';
+import { privateApis as routerPrivateApis } from '@wordpress/router';
 
 /**
  * Internal dependencies
  */
 import Page from '../page';
 import Link from '../routes/link';
-import PageActions from '../page-actions';
-import { DataViews, PAGE_SIZE_VALUES } from '../dataviews';
+import { DataViews } from '../dataviews';
+import { DEFAULT_STATUSES, default as DEFAULT_VIEWS } from './default-views';
+import {
+	useTrashPostAction,
+	postRevisionsAction,
+	viewPostAction,
+	useEditPostAction,
+} from '../actions';
+import Media from '../media';
+import { unlock } from '../../lock-unlock';
+const { useLocation } = unlock( routerPrivateApis );
 
 const EMPTY_ARRAY = [];
+const defaultConfigPerViewType = {
+	list: {},
+	grid: {
+		mediaField: 'featured-image',
+	},
+};
 
 export default function PagePages() {
-	const [ reset, setResetQuery ] = useState( ( v ) => ! v );
-	const [ globalFilter, setGlobalFilter ] = useState( '' );
-	const [ paginationInfo, setPaginationInfo ] = useState();
-	const [ { pageIndex, pageSize }, setPagination ] = useState( {
-		pageIndex: 0,
-		pageSize: PAGE_SIZE_VALUES[ 0 ],
-	} );
+	const {
+		params: { path, activeView = 'all' },
+	} = useLocation();
+	const initialView = DEFAULT_VIEWS.find(
+		( { slug } ) => slug === activeView
+	).view;
+	const [ view, setView ] = useState( initialView );
+	useEffect( () => {
+		setView(
+			DEFAULT_VIEWS.find( ( { slug } ) => slug === activeView ).view
+		);
+	}, [ path, activeView ] );
 	// Request post statuses to get the proper labels.
-	const [ postStatuses, setPostStatuses ] = useState( EMPTY_ARRAY );
+	const { records: statuses } = useEntityRecords( 'root', 'status' );
+	const defaultStatuses = useMemo( () => {
+		return statuses === null
+			? DEFAULT_STATUSES
+			: statuses
+					.filter( ( { slug } ) => slug !== 'trash' )
+					.map( ( { slug } ) => slug )
+					.sort()
+					.join();
+	}, [ statuses ] );
+
 	useEffect( () => {
-		apiFetch( {
-			path: '/wp/v2/statuses',
-		} ).then( setPostStatuses );
-	}, [] );
+		// Only update the view if the statuses received from the endpoint
+		// are different from the DEFAULT_STATUSES provided initially.
+		//
+		// The pages endpoint depends on the status endpoint via the status filter.
+		// Initially, this code filters the pages request by DEFAULT_STATUTES,
+		// instead of using the default (publish).
+		// https://developer.wordpress.org/rest-api/reference/pages/#list-pages
+		//
+		// By doing so, it avoids a second request to the pages endpoint
+		// upon receiving the statuses when they are the same (most common scenario).
+		if ( DEFAULT_STATUSES !== defaultStatuses ) {
+			setView( {
+				...view,
+				filters: {
+					...view.filters,
+					status: defaultStatuses,
+				},
+			} );
+		}
+	}, [ defaultStatuses ] );
 
-	// TODO: probably memo other objects passed as state(ex:https://tanstack.com/table/v8/docs/examples/react/pagination-controlled).
-	const pagination = useMemo(
-		() => ( { pageIndex, pageSize } ),
-		[ pageIndex, pageSize ]
-	);
-	const [ sorting, setSorting ] = useState( [
-		{ order: 'desc', orderby: 'date' },
-	] );
 	const queryArgs = useMemo(
 		() => ( {
-			per_page: pageSize,
-			page: pageIndex + 1, // tanstack starts from zero.
+			per_page: view.perPage,
+			page: view.page,
 			_embed: 'author',
-			order: sorting[ 0 ]?.desc ? 'desc' : 'asc',
-			orderby: sorting[ 0 ]?.id,
-			search: globalFilter,
-			status: [ 'publish', 'draft' ],
+			order: view.sort?.direction,
+			orderby: view.sort?.field,
+			search: view.search,
+			...view.filters,
 		} ),
-		[
-			globalFilter,
-			sorting[ 0 ]?.id,
-			sorting[ 0 ]?.desc,
-			pageSize,
-			pageIndex,
-			reset,
-		]
+		[ view ]
 	);
-	const { records, isResolving: isLoading } = useEntityRecords(
-		'postType',
-		'page',
-		queryArgs
+	const {
+		records: pages,
+		isResolving: isLoadingPages,
+		totalItems,
+		totalPages,
+	} = useEntityRecords( 'postType', 'page', queryArgs );
+
+	const { records: authors } = useEntityRecords( 'root', 'user' );
+
+	const paginationInfo = useMemo(
+		() => ( {
+			totalItems,
+			totalPages,
+		} ),
+		[ totalItems, totalPages ]
 	);
-	useEffect( () => {
-		// Make extra request to handle controlled pagination.
-		apiFetch( {
-			path: addQueryArgs( '/wp/v2/pages', {
-				...queryArgs,
-				_fields: 'id',
-			} ),
-			method: 'HEAD',
-			parse: false,
-		} ).then( ( res ) => {
-			const totalPages = parseInt( res.headers.get( 'X-WP-TotalPages' ) );
-			const totalItems = parseInt( res.headers.get( 'X-WP-Total' ) );
-			setPaginationInfo( {
-				totalPages,
-				totalItems,
-			} );
-		} );
-		// Status should not make extra request if already did..
-	}, [ globalFilter, pageSize, reset ] );
 
 	const fields = useMemo(
 		() => [
+			{
+				id: 'featured-image',
+				header: __( 'Featured Image' ),
+				getValue: ( { item } ) => item.featured_media,
+				render: ( { item, view: currentView } ) =>
+					!! item.featured_media ? (
+						<Media
+							className="edit-site-page-pages__featured-image"
+							id={ item.featured_media }
+							size={
+								currentView.type === 'list'
+									? [ 'thumbnail', 'medium', 'large', 'full' ]
+									: [ 'large', 'full', 'medium', 'thumbnail' ]
+							}
+						/>
+					) : null,
+				enableSorting: false,
+			},
 			{
 				header: __( 'Title' ),
 				id: 'title',
-				accessorFn: ( page ) => page.title?.rendered || page.slug,
-				cell: ( props ) => {
-					const page = props.row.original;
+				getValue: ( { item } ) => item.title?.rendered || item.slug,
+				render: ( { item } ) => {
 					return (
 						<VStack spacing={ 1 }>
 							<Heading as="h3" level={ 5 }>
 								<Link
 									params={ {
-										postId: page.id,
-										postType: page.type,
+										postId: item.id,
+										postType: item.type,
 										canvas: 'edit',
 									} }
 								>
-									{ decodeEntities( props.getValue() ) }
+									{ decodeEntities(
+										item.title?.rendered || item.slug
+									) || __( '(no title)' ) }
 								</Link>
 							</Heading>
 						</VStack>
@@ -122,38 +163,87 @@ export default function PagePages() {
 			{
 				header: __( 'Author' ),
 				id: 'author',
-				accessorFn: ( page ) => page._embedded?.author[ 0 ]?.name,
-				cell: ( props ) => {
-					const author = props.row.original._embedded?.author[ 0 ];
+				getValue: ( { item } ) => item._embedded?.author[ 0 ]?.name,
+				render: ( { item } ) => {
+					const author = item._embedded?.author[ 0 ];
 					return (
 						<a href={ `user-edit.php?user_id=${ author.id }` }>
 							{ author.name }
 						</a>
 					);
 				},
+				filters: [ 'enumeration' ],
+				elements:
+					authors?.map( ( { id, name } ) => ( {
+						value: id,
+						label: name,
+					} ) ) || [],
 			},
 			{
-				header: 'Status',
+				header: __( 'Status' ),
 				id: 'status',
-				cell: ( props ) =>
-					postStatuses[ props.row.original.status ]?.name,
+				getValue: ( { item } ) =>
+					statuses?.find( ( { slug } ) => slug === item.status )
+						?.name ?? item.status,
+				filters: [
+					{
+						type: 'enumeration',
+						id: 'status',
+						resetValue: defaultStatuses,
+					},
+				],
+				elements:
+					statuses?.map( ( { slug, name } ) => ( {
+						value: slug,
+						label: name,
+					} ) ) || [],
+				enableSorting: false,
 			},
 			{
-				header: <VisuallyHidden>{ __( 'Actions' ) }</VisuallyHidden>,
-				id: 'actions',
-				cell: ( props ) => {
-					const page = props.row.original;
-					return (
-						<PageActions
-							postId={ page.id }
-							onRemove={ () => setResetQuery() }
-						/>
+				header: __( 'Date' ),
+				id: 'date',
+				getValue: ( { item } ) => item.date,
+				render: ( { item } ) => {
+					const formattedDate = dateI18n(
+						getSettings().formats.datetimeAbbreviated,
+						getDate( item.date )
 					);
+					return <time>{ formattedDate }</time>;
 				},
-				enableHiding: false,
 			},
 		],
-		[ postStatuses ]
+		[ defaultStatuses, statuses, authors ]
+	);
+
+	const trashPostAction = useTrashPostAction();
+	const editPostAction = useEditPostAction();
+	const actions = useMemo(
+		() => [
+			viewPostAction,
+			trashPostAction,
+			editPostAction,
+			postRevisionsAction,
+		],
+		[ trashPostAction, editPostAction ]
+	);
+	const onChangeView = useCallback(
+		( viewUpdater ) => {
+			let updatedView =
+				typeof viewUpdater === 'function'
+					? viewUpdater( view )
+					: viewUpdater;
+			if ( updatedView.type !== view.type ) {
+				updatedView = {
+					...updatedView,
+					layout: {
+						...defaultConfigPerViewType[ updatedView.type ],
+					},
+				};
+			}
+
+			setView( updatedView );
+		},
+		[ view, setView ]
 	);
 
 	// TODO: we need to handle properly `data={ data || EMPTY_ARRAY }` for when `isLoading`.
@@ -161,29 +251,12 @@ export default function PagePages() {
 		<Page title={ __( 'Pages' ) }>
 			<DataViews
 				paginationInfo={ paginationInfo }
-				data={ records || EMPTY_ARRAY }
-				isLoading={ isLoading }
 				fields={ fields }
-				options={ {
-					manualSorting: true,
-					manualFiltering: true,
-					manualPagination: true,
-					enableRowSelection: true,
-					state: {
-						sorting,
-						globalFilter,
-						pagination,
-					},
-					pageCount: paginationInfo?.totalPages,
-					onSortingChange: setSorting,
-					onGlobalFilterChange: ( value ) => {
-						setGlobalFilter( value );
-						setPagination( { pageIndex: 0, pageSize } );
-					},
-					// TODO: check these callbacks and maybe reset the query when needed...
-					onPaginationChange: setPagination,
-					meta: { resetQuery: setResetQuery },
-				} }
+				actions={ actions }
+				data={ pages || EMPTY_ARRAY }
+				isLoading={ isLoadingPages }
+				view={ view }
+				onChangeView={ onChangeView }
 			/>
 		</Page>
 	);

package/src/components/page-pages/style.scss

@@ -0,0 +1,3 @@
+.edit-site-page-pages__featured-image {
+	border-radius: $radius-block-ui;
+}

package/src/components/page-patterns/delete-category-menu-item.js

@@ -0,0 +1,104 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	MenuItem,
+	__experimentalConfirmDialog as ConfirmDialog,
+} from '@wordpress/components';
+import { store as coreStore } from '@wordpress/core-data';
+import { useDispatch } from '@wordpress/data';
+import { useState } from '@wordpress/element';
+import { decodeEntities } from '@wordpress/html-entities';
+import { __, sprintf } from '@wordpress/i18n';
+import { store as noticesStore } from '@wordpress/notices';
+import { privateApis as routerPrivateApis } from '@wordpress/router';
+
+/**
+ * Internal dependencies
+ */
+import { unlock } from '../../lock-unlock';
+import { PATTERN_TYPES, PATTERN_DEFAULT_CATEGORY } from '../../utils/constants';
+
+const { useHistory } = unlock( routerPrivateApis );
+
+export default function DeleteCategoryMenuItem( { category, onClose } ) {
+	const [ isModalOpen, setIsModalOpen ] = useState( false );
+	const history = useHistory();
+
+	const { createSuccessNotice, createErrorNotice } =
+		useDispatch( noticesStore );
+	const { deleteEntityRecord, invalidateResolution } =
+		useDispatch( coreStore );
+
+	const onDelete = async () => {
+		try {
+			await deleteEntityRecord(
+				'taxonomy',
+				'wp_pattern_category',
+				category.id,
+				{ force: true },
+				{ throwOnError: true }
+			);
+
+			// Prevent the need to refresh the page to get up-to-date categories
+			// and pattern categorization.
+			invalidateResolution( 'getUserPatternCategories' );
+			invalidateResolution( 'getEntityRecords', [
+				'postType',
+				PATTERN_TYPES.user,
+				{ per_page: -1 },
+			] );
+
+			createSuccessNotice(
+				sprintf(
+					/* translators: The pattern category's name */
+					__( '"%s" deleted.' ),
+					category.label
+				),
+				{ type: 'snackbar', id: 'pattern-category-delete' }
+			);
+
+			onClose?.();
+			history.push( {
+				path: `/patterns`,
+				categoryType: PATTERN_TYPES.theme,
+				categoryId: PATTERN_DEFAULT_CATEGORY,
+			} );
+		} catch ( error ) {
+			const errorMessage =
+				error.message && error.code !== 'unknown_error'
+					? error.message
+					: __(
+							'An error occurred while deleting the pattern category.'
+					  );
+
+			createErrorNotice( errorMessage, {
+				type: 'snackbar',
+				id: 'pattern-category-delete',
+			} );
+		}
+	};
+
+	return (
+		<>
+			<MenuItem isDestructive onClick={ () => setIsModalOpen( true ) }>
+				{ __( 'Delete' ) }
+			</MenuItem>
+			<ConfirmDialog
+				isOpen={ isModalOpen }
+				onConfirm={ onDelete }
+				onCancel={ () => setIsModalOpen( false ) }
+				confirmButtonText={ __( 'Delete' ) }
+				className="edit-site-patterns__delete-modal"
+			>
+				{ sprintf(
+					// translators: %s: The pattern category's name.
+					__(
+						'Are you sure you want to delete the category "%s"? The patterns will not be deleted.'
+					),
+					decodeEntities( category.label )
+				) }
+			</ConfirmDialog>
+		</>
+	);
+}