@wordpress/edit-site 6.3.0 → 6.4.0

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

@@ -0,0 +1,345 @@
+/**
+ * External dependencies
+ */
+import clsx from 'clsx';
+
+/**
+ * WordPress dependencies
+ */
+import { __, sprintf } from '@wordpress/i18n';
+import { decodeEntities } from '@wordpress/html-entities';
+import {
+	createInterpolateElement,
+	useMemo,
+	useState,
+} from '@wordpress/element';
+import { dateI18n, getDate, getSettings } from '@wordpress/date';
+import {
+	trash,
+	drafts,
+	published,
+	scheduled,
+	pending,
+	notAllowed,
+	commentAuthorAvatar as authorIcon,
+} from '@wordpress/icons';
+import { __experimentalHStack as HStack, Icon } from '@wordpress/components';
+import { useSelect } from '@wordpress/data';
+import { useEntityRecords, store as coreStore } from '@wordpress/core-data';
+
+/**
+ * Internal dependencies
+ */
+import {
+	LAYOUT_GRID,
+	LAYOUT_TABLE,
+	LAYOUT_LIST,
+	OPERATOR_IS_ANY,
+} from '../../utils/constants';
+import { default as Link, useLink } from '../routes/link';
+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: 'trash', label: __( 'Trash' ), icon: trash },
+];
+
+const getFormattedDate = ( dateToDisplay ) =>
+	dateI18n(
+		getSettings().formats.datetimeAbbreviated,
+		getDate( dateToDisplay )
+	);
+
+function FeaturedImage( { item, viewType } ) {
+	const isDisabled = item.status === 'trash';
+	const { onClick } = useLink( {
+		postId: item.id,
+		postType: item.type,
+		canvas: 'edit',
+	} );
+	const hasMedia = !! item.featured_media;
+	const size =
+		viewType === LAYOUT_GRID
+			? [ 'large', 'full', 'medium', 'thumbnail' ]
+			: [ 'thumbnail', 'medium', 'large', 'full' ];
+	const media = hasMedia ? (
+		<Media
+			className="edit-site-post-list__featured-image"
+			id={ item.featured_media }
+			size={ size }
+		/>
+	) : null;
+	const renderButton = viewType !== LAYOUT_LIST && ! isDisabled;
+	return (
+		<div
+			className={ `edit-site-post-list__featured-image-wrapper is-layout-${ viewType }` }
+		>
+			{ renderButton ? (
+				<button
+					className="edit-site-post-list__featured-image-button"
+					type="button"
+					onClick={ onClick }
+					aria-label={ item.title?.rendered || __( '(no title)' ) }
+				>
+					{ media }
+				</button>
+			) : (
+				media
+			) }
+		</div>
+	);
+}
+
+function PostStatusField( { item } ) {
+	const status = STATUSES.find( ( { value } ) => value === item.status );
+	const label = status?.label || item.status;
+	const icon = status?.icon;
+	return (
+		<HStack alignment="left" spacing={ 0 }>
+			{ icon && (
+				<div className="edit-site-post-list__status-icon">
+					<Icon icon={ icon } />
+				</div>
+			) }
+			<span>{ label }</span>
+		</HStack>
+	);
+}
+
+function PostAuthorField( { item } ) {
+	const { text, imageUrl } = useSelect(
+		( select ) => {
+			const { getUser } = select( coreStore );
+			const user = getUser( item.author );
+			return {
+				imageUrl: user?.avatar_urls?.[ 48 ],
+				text: user?.name,
+			};
+		},
+		[ item ]
+	);
+	const [ isImageLoaded, setIsImageLoaded ] = useState( false );
+	return (
+		<HStack alignment="left" spacing={ 0 }>
+			{ !! imageUrl && (
+				<div
+					className={ clsx( 'page-templates-author-field__avatar', {
+						'is-loaded': isImageLoaded,
+					} ) }
+				>
+					<img
+						onLoad={ () => setIsImageLoaded( true ) }
+						alt={ __( 'Author avatar' ) }
+						src={ imageUrl }
+					/>
+				</div>
+			) }
+			{ ! imageUrl && (
+				<div className="page-templates-author-field__icon">
+					<Icon icon={ authorIcon } />
+				</div>
+			) }
+			<span className="page-templates-author-field__name">{ text }</span>
+		</HStack>
+	);
+}
+
+function usePostFields( viewType ) {
+	const { records: authors, isResolving: isLoadingAuthors } =
+		useEntityRecords( 'root', 'user', { per_page: -1 } );
+
+	const { frontPageId, postsPageId } = useSelect( ( select ) => {
+		const { getEntityRecord } = select( coreStore );
+		const siteSettings = getEntityRecord( 'root', 'site' );
+		return {
+			frontPageId: siteSettings?.page_on_front,
+			postsPageId: siteSettings?.page_for_posts,
+		};
+	}, [] );
+
+	const fields = useMemo(
+		() => [
+			{
+				id: 'featured-image',
+				label: __( 'Featured Image' ),
+				getValue: ( { item } ) => item.featured_media,
+				render: ( { item } ) => (
+					<FeaturedImage item={ item } viewType={ viewType } />
+				),
+				enableSorting: false,
+			},
+			{
+				label: __( 'Title' ),
+				id: 'title',
+				type: 'text',
+				getValue: ( { item } ) =>
+					typeof item.title === 'string'
+						? item.title
+						: item.title?.raw,
+				render: ( { item } ) => {
+					const addLink =
+						[ LAYOUT_TABLE, LAYOUT_GRID ].includes( viewType ) &&
+						item.status !== 'trash';
+					const title = addLink ? (
+						<Link
+							params={ {
+								postId: item.id,
+								postType: item.type,
+								canvas: 'edit',
+							} }
+						>
+							{ decodeEntities( item.title?.rendered ) ||
+								__( '(no title)' ) }
+						</Link>
+					) : (
+						<span>
+							{ decodeEntities( item.title?.rendered ) ||
+								__( '(no title)' ) }
+						</span>
+					);
+
+					let suffix = '';
+					if ( item.id === frontPageId ) {
+						suffix = (
+							<span className="edit-site-post-list__title-badge">
+								{ __( 'Homepage' ) }
+							</span>
+						);
+					} else if ( item.id === postsPageId ) {
+						suffix = (
+							<span className="edit-site-post-list__title-badge">
+								{ __( 'Posts Page' ) }
+							</span>
+						);
+					}
+
+					return (
+						<HStack
+							className="edit-site-post-list__title"
+							alignment="center"
+							justify="flex-start"
+						>
+							{ title }
+							{ suffix }
+						</HStack>
+					);
+				},
+				enableHiding: false,
+			},
+			{
+				label: __( 'Author' ),
+				id: 'author',
+				getValue: ( { item } ) => item._embedded?.author[ 0 ]?.name,
+				elements:
+					authors?.map( ( { id, name } ) => ( {
+						value: id,
+						label: name,
+					} ) ) || [],
+				render: PostAuthorField,
+			},
+			{
+				label: __( 'Status' ),
+				id: 'status',
+				getValue: ( { item } ) =>
+					STATUSES.find( ( { value } ) => value === item.status )
+						?.label ?? item.status,
+				elements: STATUSES,
+				render: PostStatusField,
+				enableSorting: false,
+				filterBy: {
+					operators: [ OPERATOR_IS_ANY ],
+				},
+			},
+			{
+				label: __( 'Date' ),
+				id: 'date',
+				render: ( { item } ) => {
+					const isDraftOrPrivate = [ 'draft', 'private' ].includes(
+						item.status
+					);
+					if ( isDraftOrPrivate ) {
+						return createInterpolateElement(
+							sprintf(
+								/* translators: %s: page creation date */
+								__( '<span>Modified: <time>%s</time></span>' ),
+								getFormattedDate( item.date )
+							),
+							{
+								span: <span />,
+								time: <time />,
+							}
+						);
+					}
+
+					const isScheduled = item.status === 'future';
+					if ( isScheduled ) {
+						return createInterpolateElement(
+							sprintf(
+								/* translators: %s: page creation date */
+								__( '<span>Scheduled: <time>%s</time></span>' ),
+								getFormattedDate( item.date )
+							),
+							{
+								span: <span />,
+								time: <time />,
+							}
+						);
+					}
+
+					// 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 ) {
+						return createInterpolateElement(
+							sprintf(
+								/* translators: %s: the newest of created or modified date for the page */
+								__( '<span>Modified: <time>%s</time></span>' ),
+								getFormattedDate( dateToDisplay )
+							),
+							{
+								span: <span />,
+								time: <time />,
+							}
+						);
+					}
+
+					const isPublished = item.status === 'publish';
+					if ( isPublished ) {
+						return createInterpolateElement(
+							sprintf(
+								/* translators: %s: the newest of created or modified date for the page */
+								__( '<span>Published: <time>%s</time></span>' ),
+								getFormattedDate( dateToDisplay )
+							),
+							{
+								span: <span />,
+								time: <time />,
+							}
+						);
+					}
+
+					// Unknow status.
+					return <time>{ getFormattedDate( item.date ) }</time>;
+				},
+			},
+		],
+		[ authors, viewType, frontPageId, postsPageId ]
+	);
+
+	return {
+		isLoading: isLoadingAuthors,
+		fields,
+	};
+}
+
+export default usePostFields;

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

@@ -0,0 +1,326 @@
+/**
+ * WordPress dependencies
+ */
+import { Button } from '@wordpress/components';
+import { useEntityRecords, store as coreStore } 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 { 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 EMPTY_ARRAY = [];
+
+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(
+		( select ) => {
+			if ( isCustom !== 'true' ) {
+				return;
+			}
+			const { getEditedEntityRecord } = select( coreStore );
+			const dataviewRecord = 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;
+		}
+
+		return {
+			...storedView,
+			layout: defaultLayouts[ storedView?.type ]?.layout,
+		};
+	}, [ editedViewRecord?.content ] );
+
+	const setCustomView = useCallback(
+		( viewToSet ) => {
+			editEntityRecord(
+				'postType',
+				'wp_dataviews',
+				editedViewRecord?.id,
+				{
+					content: JSON.stringify( viewToSet ),
+				}
+			);
+		},
+		[ editEntityRecord, editedViewRecord?.id ]
+	);
+
+	const setDefaultViewAndUpdateUrl = useCallback(
+		( viewToSet ) => {
+			if ( viewToSet.type !== view?.type ) {
+				const { params } = history.getLocationWithParams();
+				history.push( {
+					...params,
+					layout: viewToSet.type,
+				} );
+			}
+			setView( viewToSet );
+		},
+		[ history, view?.type ]
+	);
+
+	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 ];
+}
+
+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 } = 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 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: isLoadingMainEntities,
+		totalItems,
+		totalPages,
+	} = useEntityRecords( 'postType', postType, queryArgs );
+
+	const ids = records?.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();
+	};
+	const { isLoading: isLoadingFields, fields } = usePostFields( view.type );
+
+	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
+				paginationInfo={ paginationInfo }
+				fields={ fields }
+				actions={ actions }
+				data={ records || EMPTY_ARRAY }
+				isLoading={ isLoadingMainEntities || 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>
+	);
+}