@wordpress/edit-site 6.32.0 → 6.32.1-next.b8c8708f3.0

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

@@ -1,6 +1,7 @@
 /**
  * WordPress dependencies
  */
+import { Page } from '@wordpress/admin-ui';
 import { Button } from '@wordpress/components';
 import {
 	store as coreStore,
@@ -8,22 +9,18 @@ import {
 } 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 { useSelect } 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';
 import { useEvent, usePrevious } from '@wordpress/compose';
 import { addQueryArgs } from '@wordpress/url';
+import { useView } from '@wordpress/views';
 
 /**
  * Internal dependencies
  */
-import Page from '../page';
-import {
-	useDefaultViews,
-	defaultLayouts,
-} from '../sidebar-dataviews/default-views';
 import {
 	OPERATOR_IS_ANY,
 	OPERATOR_IS_NONE,
@@ -33,194 +30,73 @@ import {
 import AddNewPostModal from '../add-new-post';
 import { unlock } from '../../lock-unlock';
 import { useEditPostAction } from '../dataviews-actions';
+import { defaultLayouts, getDefaultView } from './view-utils';
 
 const { usePostActions, usePostFields } = 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 DEFAULT_STATUSES = 'draft,future,pending,private,publish'; // All but 'trash'.
 
-	const content = JSON.parse( editedEntityRecord.content );
-	if ( ! content ) {
-		return undefined;
-	}
+function getItemId( item ) {
+	return item.id.toString();
+}
 
-	return {
-		...content,
-		...defaultLayouts[ content.type ],
-	};
-};
+function getItemLevel( item ) {
+	return item.level;
+}
 
-/**
- * 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 {
-		path,
-		query: { activeView = 'all', isCustom = 'false', layout },
-	} = useLocation();
+export default function PostList( { postType } ) {
+	const { path, query } = useLocation();
+	const { activeView = 'all', postId, quickEdit = false } = query;
 	const history = useHistory();
-
-	const defaultViews = useDefaultViews( { postType } );
-	const { editEntityRecord } = useDispatch( coreStore );
-	const editedEntityRecord = useSelect(
+	const postTypeObject = useSelect(
 		( select ) => {
-			if ( isCustom !== 'true' ) {
-				return undefined;
-			}
-
-			const { getEditedEntityRecord } = select( coreStore );
-			return getEditedEntityRecord(
-				'postType',
-				'wp_dataviews',
-				Number( activeView )
-			);
+			const { getPostType } = select( coreStore );
+			return getPostType( postType );
 		},
-		[ activeView, isCustom ]
+		[ postType ]
 	);
-	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,
-			...defaultLayouts[ type ],
-		};
-	} );
-
-	const setViewWithUrlUpdate = useEvent( ( newView ) => {
-		setView( newView );
-
-		if ( isCustom === 'true' && editedEntityRecord?.id ) {
-			editEntityRecord(
-				'postType',
-				'wp_dataviews',
-				editedEntityRecord?.id,
-				{
-					content: JSON.stringify( newView ),
-				}
-			);
-		}
-
-		const currentUrlLayout = layout ?? LAYOUT_LIST;
-		if ( newView.type !== currentUrlLayout ) {
+	const { view, updateView, isModified, resetToDefault } = useView( {
+		kind: 'postType',
+		name: postType,
+		slug: activeView,
+		queryParams: {
+			page: query.pageNumber,
+			search: query.search,
+		},
+		onChangeQueryParams: ( newQueryParams ) => {
 			history.navigate(
 				addQueryArgs( path, {
-					layout: newView.type,
+					...query,
+					pageNumber: newQueryParams.page,
+					search: newQueryParams.search || undefined,
 				} )
 			);
-		}
-	} );
-
-	// When layout URL param changes, update the view type
-	// without affecting any other config.
-	const onUrlLayoutChange = useEvent( () => {
-		setView( ( prevView ) => {
-			const newType = layout ?? LAYOUT_LIST;
-			if ( newType === prevView.type ) {
-				return prevView;
-			}
-
-			return {
-				...prevView,
-				type: newType,
-				...defaultLayouts[ newType ],
-			};
-		} );
+		},
+		defaultView: getDefaultView( postTypeObject, activeView ),
 	} );
-	useEffect( () => {
-		onUrlLayoutChange();
-	}, [ onUrlLayoutChange, layout ] );
 
-	// When activeView or isCustom URL parameters change, reset the view.
-	const onUrlActiveViewChange = useEvent( () => {
-		let newView;
-		if ( isCustom === 'true' ) {
-			newView = getCustomView( editedEntityRecord );
-		} else {
-			newView = getDefaultView( defaultViews, activeView );
-		}
-
-		if ( newView ) {
-			const type = layout ?? newView.type;
-			setView( {
-				...newView,
-				type,
-				...defaultLayouts[ type ],
-			} );
+	const onChangeView = useEvent( ( newView ) => {
+		if ( newView.type !== view.type ) {
+			// Retrigger the routing areas resolution.
+			history.invalidate();
 		}
+		updateView( newView );
 	} );
-	useEffect( () => {
-		onUrlActiveViewChange();
-	}, [
-		onUrlActiveViewChange,
-		activeView,
-		isCustom,
-		defaultViews,
-		editedEntityRecord,
-	] );
-
-	return [ view, setViewWithUrlUpdate ];
-}
-
-const DEFAULT_STATUSES = 'draft,future,pending,private,publish'; // All but 'trash'.
-
-function getItemId( item ) {
-	return item.id.toString();
-}
 
-function getItemLevel( item ) {
-	return item.level;
-}
-
-export default function PostList( { postType } ) {
-	const [ view, setView ] = useView( postType );
-	const history = useHistory();
-	const location = useLocation();
-	const {
-		postId,
-		quickEdit = false,
-		isCustom,
-		activeView = 'all',
-	} = location.query;
 	const [ selection, setSelection ] = useState( postId?.split( ',' ) ?? [] );
 	const onChangeSelection = useCallback(
 		( items ) => {
 			setSelection( items );
-			if ( ( location.query.isCustom ?? 'false' ) === 'false' ) {
-				history.navigate(
-					addQueryArgs( location.path, {
-						postId: items.join( ',' ),
-					} )
-				);
-			}
+			history.navigate(
+				addQueryArgs( path, {
+					postId: items.join( ',' ),
+				} )
+			);
 		},
-		[ location.path, location.query.isCustom, history ]
+		[ path, history ]
 	);
 
 	const { isLoading: isLoadingFields, fields: fields } = usePostFields( {
@@ -258,7 +134,7 @@ export default function PostList( { postType } ) {
 		return {
 			per_page: view.perPage,
 			page: view.page,
-			_embed: 'author',
+			_embed: 'author,wp:featuredmedia',
 			order: view.sort?.direction,
 			orderby: view.sort?.field,
 			orderby_hierarchy: !! view.showLevels,
@@ -294,12 +170,12 @@ export default function PostList( { postType } ) {
 	useEffect( () => {
 		if ( postIdWasDeleted ) {
 			history.navigate(
-				addQueryArgs( location.path, {
+				addQueryArgs( path, {
 					postId: undefined,
 				} )
 			);
 		}
-	}, [ history, postIdWasDeleted, location.path ] );
+	}, [ history, postIdWasDeleted, path ] );
 
 	const paginationInfo = useMemo(
 		() => ( {
@@ -346,36 +222,48 @@ export default function PostList( { postType } ) {
 		<Page
 			title={ labels?.name }
 			actions={
-				labels?.add_new_item &&
-				canCreateRecord && (
-					<>
+				<>
+					{ isModified && (
 						<Button
-							variant="primary"
-							onClick={ openModal }
 							__next40pxDefaultSize
+							onClick={ () => {
+								resetToDefault();
+								history.invalidate();
+							} }
 						>
-							{ labels.add_new_item }
+							{ __( 'Reset view' ) }
 						</Button>
-						{ showAddPostModal && (
-							<AddNewPostModal
-								postType={ postType }
-								onSave={ handleNewPage }
-								onClose={ closeModal }
-							/>
-						) }
-					</>
-				)
+					) }
+					{ 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 }
+				key={ activeView }
 				paginationInfo={ paginationInfo }
 				fields={ fields }
 				actions={ actions }
 				data={ data || EMPTY_ARRAY }
 				isLoading={ isLoadingData || isLoadingFields }
 				view={ view }
-				onChangeView={ setView }
+				onChangeView={ onChangeView }
 				selection={ selection }
 				onChangeSelection={ onChangeSelection }
 				isItemClickable={ ( item ) => item.status !== 'trash' }
@@ -396,7 +284,7 @@ export default function PostList( { postType } ) {
 							label={ __( 'Details' ) }
 							onClick={ () => {
 								history.navigate(
-									addQueryArgs( location.path, {
+									addQueryArgs( path, {
 										quickEdit: quickEdit ? undefined : true,
 									} )
 								);

package/src/components/post-list/style.scss

@@ -1,3 +1,6 @@
+@use "@wordpress/base-styles/colors" as *;
+@use "@wordpress/base-styles/variables" as *;
+
 .edit-site-post-list__featured-image {
 	height: 100%;
 	object-fit: cover;

package/src/components/post-list/view-utils.js

@@ -0,0 +1,155 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+
+import {
+	trash,
+	pages,
+	drafts,
+	published,
+	scheduled,
+	pending,
+	notAllowed,
+} from '@wordpress/icons';
+
+/**
+ * Internal dependencies
+ */
+import { OPERATOR_IS_ANY } from '../../utils/constants';
+
+export const defaultLayouts = {
+	table: {},
+	grid: {},
+	list: {},
+};
+
+const DEFAULT_POST_BASE = {
+	type: 'list',
+	filters: [],
+	perPage: 20,
+	sort: {
+		field: 'title',
+		direction: 'asc',
+	},
+	showLevels: true,
+	titleField: 'title',
+	mediaField: 'featured_media',
+	fields: [ 'author', 'status' ],
+	...defaultLayouts.list,
+};
+
+export function getDefaultViews( postType ) {
+	return [
+		{
+			title: postType?.labels?.all_items || __( 'All items' ),
+			slug: 'all',
+			icon: pages,
+			view: DEFAULT_POST_BASE,
+		},
+		{
+			title: __( 'Published' ),
+			slug: 'published',
+			icon: published,
+			view: {
+				...DEFAULT_POST_BASE,
+				filters: [
+					{
+						field: 'status',
+						operator: OPERATOR_IS_ANY,
+						value: 'publish',
+						isLocked: true,
+					},
+				],
+			},
+		},
+		{
+			title: __( 'Scheduled' ),
+			slug: 'future',
+			icon: scheduled,
+			view: {
+				...DEFAULT_POST_BASE,
+				filters: [
+					{
+						field: 'status',
+						operator: OPERATOR_IS_ANY,
+						value: 'future',
+						isLocked: true,
+					},
+				],
+			},
+		},
+		{
+			title: __( 'Drafts' ),
+			slug: 'drafts',
+			icon: drafts,
+			view: {
+				...DEFAULT_POST_BASE,
+				filters: [
+					{
+						field: 'status',
+						operator: OPERATOR_IS_ANY,
+						value: 'draft',
+						isLocked: true,
+					},
+				],
+			},
+		},
+		{
+			title: __( 'Pending' ),
+			slug: 'pending',
+			icon: pending,
+			view: {
+				...DEFAULT_POST_BASE,
+				filters: [
+					{
+						field: 'status',
+						operator: OPERATOR_IS_ANY,
+						value: 'pending',
+						isLocked: true,
+					},
+				],
+			},
+		},
+		{
+			title: __( 'Private' ),
+			slug: 'private',
+			icon: notAllowed,
+			view: {
+				...DEFAULT_POST_BASE,
+				filters: [
+					{
+						field: 'status',
+						operator: OPERATOR_IS_ANY,
+						value: 'private',
+						isLocked: true,
+					},
+				],
+			},
+		},
+		{
+			title: __( 'Trash' ),
+			slug: 'trash',
+			icon: trash,
+			view: {
+				...DEFAULT_POST_BASE,
+				type: 'table',
+				layout: defaultLayouts.table.layout,
+				filters: [
+					{
+						field: 'status',
+						operator: OPERATOR_IS_ANY,
+						value: 'trash',
+						isLocked: true,
+					},
+				],
+			},
+		},
+	];
+}
+
+export const getDefaultView = ( postType, activeView ) => {
+	return getDefaultViews( postType ).find(
+		( { slug } ) => slug === activeView
+	)?.view;
+};

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

@@ -3,6 +3,9 @@
  */
 import { privateApis as routerPrivateApis } from '@wordpress/router';
 import { __ } from '@wordpress/i18n';
+import { loadView } from '@wordpress/views';
+import { resolveSelect } from '@wordpress/data';
+import { store as coreStore } from '@wordpress/core-data';
 
 /**
  * Internal dependencies
@@ -13,9 +16,23 @@ import DataViewsSidebarContent from '../sidebar-dataviews';
 import PostList from '../post-list';
 import { unlock } from '../../lock-unlock';
 import { PostEdit } from '../post-edit';
+import { getDefaultView } from '../post-list/view-utils';
 
 const { useLocation } = unlock( routerPrivateApis );
 
+async function isListView( query ) {
+	const { activeView = 'all' } = query;
+	const postTypeObject =
+		await resolveSelect( coreStore ).getPostType( 'post' );
+	const view = await loadView( {
+		kind: 'postType',
+		name: 'post',
+		slug: activeView,
+		defaultView: getDefaultView( postTypeObject, activeView ),
+	} );
+	return view.type === 'list';
+}
+
 function MobilePostsView() {
 	const { query = {} } = useLocation();
 	const { canvas = 'view' } = query;
@@ -35,31 +52,27 @@ export const postsRoute = {
 			/>
 		),
 		content: <PostList postType="post" />,
-		preview( { query } ) {
-			const isListView =
-				( query.layout === 'list' || ! query.layout ) &&
-				query.isCustom !== 'true';
-			return isListView ? <Editor isPostsList /> : undefined;
+		async preview( { query } ) {
+			const isList = await isListView( query );
+			return isList ? <Editor isPostsList /> : undefined;
 		},
 		mobile: <MobilePostsView />,
-		edit( { query } ) {
-			const hasQuickEdit =
-				( query.layout ?? 'list' ) === 'list' && !! query.quickEdit;
+		async edit( { query } ) {
+			const isList = await isListView( query );
+			const hasQuickEdit = ! isList && !! query.quickEdit;
 			return hasQuickEdit ? (
 				<PostEdit postType="post" postId={ query.postId } />
 			) : undefined;
 		},
 	},
 	widths: {
-		content( { query } ) {
-			const isListView =
-				( query.layout === 'list' || ! query.layout ) &&
-				query.isCustom !== 'true';
-			return isListView ? 380 : undefined;
+		async content( { query } ) {
+			const isList = await isListView( query );
+			return isList ? 380 : undefined;
 		},
-		edit( { query } ) {
-			const hasQuickEdit =
-				( query.layout ?? 'list' ) === 'list' && !! query.quickEdit;
+		async edit( { query } ) {
+			const isList = await isListView( query );
+			const hasQuickEdit = ! isList && !! query.quickEdit;
 			return hasQuickEdit ? 380 : undefined;
 		},
 	},

package/src/components/resizable-frame/style.scss

@@ -1,3 +1,6 @@
+@use "@wordpress/base-styles/colors" as *;
+@use "@wordpress/base-styles/variables" as *;
+
 .edit-site-resizable-frame__inner {
 	position: relative;
 

package/src/components/save-hub/style.scss

@@ -1,3 +1,6 @@
+@use "@wordpress/base-styles/colors" as *;
+@use "@wordpress/base-styles/variables" as *;
+
 .edit-site-save-hub {
 	color: $gray-600;
 	border-top: 1px solid $gray-800;

package/src/components/save-panel/index.js

@@ -6,6 +6,7 @@ import clsx from 'clsx';
 /**
  * WordPress dependencies
  */
+import { NavigableRegion } from '@wordpress/admin-ui';
 import { Button, Modal } from '@wordpress/components';
 import {
 	EntitiesSavedStates,
@@ -27,8 +28,7 @@ import { useActivateTheme } from '../../utils/use-activate-theme';
 import { useActualCurrentTheme } from '../../utils/use-actual-current-theme';
 import { isPreviewingTheme } from '../../utils/is-previewing-theme';
 
-const { EntitiesSavedStatesExtensible, NavigableRegion } =
-	unlock( privateApis );
+const { EntitiesSavedStatesExtensible } = unlock( privateApis );
 const { useLocation } = unlock( routerPrivateApis );
 
 const EntitiesSavedStatesForPreview = ( {

package/src/components/save-panel/style.scss

@@ -1,3 +1,5 @@
+@use "@wordpress/base-styles/mixins" as *;
+
 .edit-site-save-panel__modal {
 	@include break-small() {
 		width: 600px;

package/src/components/sidebar/style.scss

@@ -1,3 +1,7 @@
+@use "@wordpress/base-styles/colors" as *;
+@use "@wordpress/base-styles/mixins" as *;
+@use "@wordpress/base-styles/variables" as *;
+
 .edit-site-sidebar__content {
 	flex-grow: 1;
 	overflow-y: auto;

package/src/components/sidebar-button/style.scss

@@ -1,3 +1,5 @@
+@use "@wordpress/base-styles/colors" as *;
+
 .edit-site-sidebar-button {
 	color: $gray-200;
 	flex-shrink: 0;