@wordpress/edit-site 5.22.0 → 5.24.0

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

@@ -6,27 +6,32 @@ import {
 	__experimentalVStack as VStack,
 } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
-import { useEntityRecords } from '@wordpress/core-data';
+import { useEntityRecords, store as coreStore } from '@wordpress/core-data';
 import { decodeEntities } from '@wordpress/html-entities';
 import { useState, useMemo, useCallback, useEffect } from '@wordpress/element';
 import { dateI18n, getDate, getSettings } from '@wordpress/date';
 import { privateApis as routerPrivateApis } from '@wordpress/router';
+import { useSelect, useDispatch } from '@wordpress/data';
 
 /**
  * Internal dependencies
  */
 import Page from '../page';
 import Link from '../routes/link';
-import { DataViews } from '../dataviews';
-import { DEFAULT_STATUSES, default as DEFAULT_VIEWS } from './default-views';
+import { DataViews, viewTypeSupportsMap } from '../dataviews';
+import { default as DEFAULT_VIEWS } from '../sidebar-dataviews/default-views';
 import {
-	useTrashPostAction,
+	trashPostAction,
+	usePermanentlyDeletePostAction,
+	useRestorePostAction,
 	postRevisionsAction,
 	viewPostAction,
 	useEditPostAction,
 } from '../actions';
+import SideEditor from './side-editor';
 import Media from '../media';
 import { unlock } from '../../lock-unlock';
+import { ENUMERATION_TYPE, OPERATOR_IN } from '../dataviews/constants';
 const { useLocation } = unlock( routerPrivateApis );
 
 const EMPTY_ARRAY = [];
@@ -34,76 +39,127 @@ const defaultConfigPerViewType = {
 	list: {},
 	grid: {
 		mediaField: 'featured-image',
+		primaryField: 'title',
 	},
 };
 
-export default function PagePages() {
+function useView( type ) {
 	const {
-		params: { path, activeView = 'all' },
+		params: { activeView = 'all', isCustom = 'false' },
 	} = useLocation();
-	const initialView = DEFAULT_VIEWS.find(
-		( { slug } ) => slug === activeView
-	).view;
-	const [ view, setView ] = useState( initialView );
+	const selectedDefaultView =
+		isCustom === 'false' &&
+		DEFAULT_VIEWS[ type ].find( ( { slug } ) => slug === activeView )?.view;
+	const [ view, setView ] = useState( selectedDefaultView );
+
 	useEffect( () => {
-		setView(
-			DEFAULT_VIEWS.find( ( { slug } ) => slug === activeView ).view
+		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( () => {
+		return (
+			editedViewRecord?.content && JSON.parse( editedViewRecord?.content )
 		);
-	}, [ path, activeView ] );
-	// Request post statuses to get the proper labels.
-	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 ] );
+	}, [ editedViewRecord?.content ] );
+	const setCustomView = useCallback(
+		( viewToSet ) => {
+			editEntityRecord(
+				'postType',
+				'wp_dataviews',
+				editedViewRecord?.id,
+				{
+					content: JSON.stringify( viewToSet ),
+				}
+			);
+		},
+		[ editEntityRecord, editedViewRecord?.id ]
+	);
 
-	useEffect( () => {
-		// 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,
-				},
-			} );
+	if ( isCustom === 'false' ) {
+		return [ view, setView ];
+	} 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[ type ][ 0 ].view, setView ];
+}
+
+// See https://github.com/WordPress/gutenberg/issues/55886
+// We do not support custom statutes at the moment.
+const STATUSES = [
+	{ value: 'draft', label: __( 'Draft' ) },
+	{ value: 'future', label: __( 'Scheduled' ) },
+	{ value: 'pending', label: __( 'Pending Review' ) },
+	{ value: 'private', label: __( 'Private' ) },
+	{ value: 'publish', label: __( 'Published' ) },
+	{ value: 'trash', label: __( 'Trash' ) },
+];
+const DEFAULT_STATUSES = 'draft,future,pending,private,publish'; // All but 'trash'.
+
+export default function PagePages() {
+	const postType = 'page';
+	const [ view, setView ] = useView( postType );
+	const [ selection, setSelection ] = useState( [] );
+
+	const queryArgs = useMemo( () => {
+		const filters = {};
+		view.filters.forEach( ( filter ) => {
+			if (
+				filter.field === 'status' &&
+				filter.operator === OPERATOR_IN
+			) {
+				filters.status = filter.value;
+			}
+			if (
+				filter.field === 'author' &&
+				filter.operator === OPERATOR_IN
+			) {
+				filters.author = 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;
 		}
-	}, [ defaultStatuses ] );
 
-	const queryArgs = useMemo(
-		() => ( {
+		return {
 			per_page: view.perPage,
 			page: view.page,
 			_embed: 'author',
 			order: view.sort?.direction,
 			orderby: view.sort?.field,
 			search: view.search,
-			...view.filters,
-		} ),
-		[ view ]
-	);
+			...filters,
+		};
+	}, [ view ] );
 	const {
 		records: pages,
 		isResolving: isLoadingPages,
 		totalItems,
 		totalPages,
-	} = useEntityRecords( 'postType', 'page', queryArgs );
+	} = useEntityRecords( 'postType', postType, queryArgs );
 
-	const { records: authors } = useEntityRecords( 'root', 'user' );
+	const { records: authors, isResolving: isLoadingAuthors } =
+		useEntityRecords( 'root', 'user' );
 
 	const paginationInfo = useMemo(
 		() => ( {
@@ -137,7 +193,7 @@ export default function PagePages() {
 				header: __( 'Title' ),
 				id: 'title',
 				getValue: ( { item } ) => item.title?.rendered || item.slug,
-				render: ( { item } ) => {
+				render: ( { item, view: { type } } ) => {
 					return (
 						<VStack spacing={ 1 }>
 							<Heading as="h3" level={ 5 }>
@@ -147,6 +203,14 @@ export default function PagePages() {
 										postType: item.type,
 										canvas: 'edit',
 									} }
+									onClick={ ( event ) => {
+										if (
+											viewTypeSupportsMap[ type ].preview
+										) {
+											event.preventDefault();
+											setSelection( [ item.id ] );
+										}
+									} }
 								>
 									{ decodeEntities(
 										item.title?.rendered || item.slug
@@ -157,22 +221,13 @@ export default function PagePages() {
 					);
 				},
 				maxWidth: 400,
-				sortingFn: 'alphanumeric',
 				enableHiding: false,
 			},
 			{
 				header: __( 'Author' ),
 				id: 'author',
 				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' ],
+				type: ENUMERATION_TYPE,
 				elements:
 					authors?.map( ( { id, name } ) => ( {
 						value: id,
@@ -183,20 +238,10 @@ export default function PagePages() {
 				header: __( 'Status' ),
 				id: 'status',
 				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,
-					} ) ) || [],
+					STATUSES.find( ( { value } ) => value === item.status )
+						?.label ?? item.status,
+				type: ENUMERATION_TYPE,
+				elements: STATUSES,
 				enableSorting: false,
 			},
 			{
@@ -212,19 +257,22 @@ export default function PagePages() {
 				},
 			},
 		],
-		[ defaultStatuses, statuses, authors ]
+		[ authors ]
 	);
 
-	const trashPostAction = useTrashPostAction();
+	const permanentlyDeletePostAction = usePermanentlyDeletePostAction();
+	const restorePostAction = useRestorePostAction();
 	const editPostAction = useEditPostAction();
 	const actions = useMemo(
 		() => [
 			viewPostAction,
 			trashPostAction,
+			restorePostAction,
+			permanentlyDeletePostAction,
 			editPostAction,
 			postRevisionsAction,
 		],
-		[ trashPostAction, editPostAction ]
+		[ permanentlyDeletePostAction, restorePostAction, editPostAction ]
 	);
 	const onChangeView = useCallback(
 		( viewUpdater ) => {
@@ -248,16 +296,44 @@ export default function PagePages() {
 
 	// TODO: we need to handle properly `data={ data || EMPTY_ARRAY }` for when `isLoading`.
 	return (
-		<Page title={ __( 'Pages' ) }>
-			<DataViews
-				paginationInfo={ paginationInfo }
-				fields={ fields }
-				actions={ actions }
-				data={ pages || EMPTY_ARRAY }
-				isLoading={ isLoadingPages }
-				view={ view }
-				onChangeView={ onChangeView }
-			/>
-		</Page>
+		<>
+			<Page title={ __( 'Pages' ) }>
+				<DataViews
+					paginationInfo={ paginationInfo }
+					fields={ fields }
+					actions={ actions }
+					data={ pages || EMPTY_ARRAY }
+					getItemId={ ( item ) => item.id }
+					isLoading={ isLoadingPages || isLoadingAuthors }
+					view={ view }
+					onChangeView={ onChangeView }
+				/>
+			</Page>
+			{ viewTypeSupportsMap[ view.type ].preview && (
+				<Page>
+					<div className="edit-site-page-pages-preview">
+						{ selection.length === 1 && (
+							<SideEditor
+								postId={ selection[ 0 ] }
+								postType={ postType }
+							/>
+						) }
+						{ selection.length !== 1 && (
+							<div
+								style={ {
+									display: 'flex',
+									flexDirection: 'column',
+									justifyContent: 'center',
+									textAlign: 'center',
+									height: '100%',
+								} }
+							>
+								<p>{ __( 'Select a page to preview' ) }</p>
+							</div>
+						) }
+					</div>
+				</Page>
+			) }
+		</>
 	);
 }

package/src/components/page-pages/side-editor.js

@@ -0,0 +1,14 @@
+/**
+ * Internal dependencies
+ */
+import Editor from '../editor';
+import { useInitEditedEntity } from '../sync-state-with-url/use-init-edited-entity-from-url';
+
+export default function SideEditor( { postType, postId } ) {
+	useInitEditedEntity( {
+		postId,
+		postType,
+	} );
+
+	return <Editor />;
+}

package/src/components/page-patterns/grid-item.js

@@ -2,7 +2,6 @@
  * External dependencies
  */
 import classnames from 'classnames';
-import downloadjs from 'downloadjs';
 import { paramCase as kebabCase } from 'change-case';
 
 /**
@@ -37,6 +36,7 @@ import {
 } from '@wordpress/icons';
 import { store as noticesStore } from '@wordpress/notices';
 import { store as reusableBlocksStore } from '@wordpress/reusable-blocks';
+import { downloadBlob } from '@wordpress/blob';
 
 /**
  * Internal dependencies
@@ -118,9 +118,9 @@ function GridItem( { categoryId, item, ...props } ) {
 			syncStatus: item.patternBlock.wp_pattern_sync_status,
 		};
 
-		return downloadjs(
-			JSON.stringify( json, null, 2 ),
+		return downloadBlob(
 			`${ kebabCase( item.title || item.name ) }.json`,
+			JSON.stringify( json, null, 2 ),
 			'application/json'
 		);
 	};

package/src/components/page-patterns/patterns-list.js

@@ -12,7 +12,7 @@ import {
 	__experimentalHeading as Heading,
 	__experimentalText as Text,
 } from '@wordpress/components';
-import { __, isRTL } from '@wordpress/i18n';
+import { __, _x, isRTL } from '@wordpress/i18n';
 import { chevronLeft, chevronRight } from '@wordpress/icons';
 import { privateApis as routerPrivateApis } from '@wordpress/router';
 import { useAsyncList, useViewportMatch } from '@wordpress/compose';
@@ -33,9 +33,15 @@ import Pagination from './pagination';
 const { useLocation, useHistory } = unlock( routerPrivateApis );
 
 const SYNC_FILTERS = {
-	all: __( 'All' ),
-	[ PATTERN_SYNC_TYPES.full ]: __( 'Synced' ),
-	[ PATTERN_SYNC_TYPES.unsynced ]: __( 'Not synced' ),
+	all: _x( 'All', 'Option that shows all patterns' ),
+	[ PATTERN_SYNC_TYPES.full ]: _x(
+		'Synced',
+		'Option that shows all synchronized patterns'
+	),
+	[ PATTERN_SYNC_TYPES.unsynced ]: _x(
+		'Not synced',
+		'Option that shows all patterns that are not synchronized'
+	),
 };
 
 const SYNC_DESCRIPTIONS = {

package/src/components/page-patterns/use-patterns.js

@@ -17,7 +17,7 @@ import { decodeEntities } from '@wordpress/html-entities';
  */
 import { filterOutDuplicatesByName } from './utils';
 import {
-	PATTERN_CORE_SOURCES,
+	EXCLUDED_PATTERN_SOURCES,
 	PATTERN_TYPES,
 	PATTERN_SYNC_TYPES,
 	TEMPLATE_PART_POST_TYPE,
@@ -123,7 +123,8 @@ const selectThemePatterns = createSelector(
 			...( restBlockPatterns || [] ),
 		]
 			.filter(
-				( pattern ) => ! PATTERN_CORE_SOURCES.includes( pattern.source )
+				( pattern ) =>
+					! EXCLUDED_PATTERN_SOURCES.includes( pattern.source )
 			)
 			.filter( filterOutDuplicatesByName )
 			.filter( ( pattern ) => pattern.inserter !== false )
@@ -158,7 +159,7 @@ const selectPatterns = createSelector(
 			// User patterns can have their sync statuses checked directly
 			// Non-user patterns are all unsynced for the time being.
 			patterns = patterns.filter( ( pattern ) => {
-				return pattern.id
+				return pattern.type === PATTERN_TYPES.user
 					? pattern.syncStatus === syncStatus
 					: syncStatus === PATTERN_SYNC_TYPES.unsynced;
 			} );