@wordpress/edit-site 6.4.0 → 6.5.0

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 }

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 {

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

package/src/components/sidebar-dataviews/default-views.js

@@ -77,105 +77,105 @@ export function useDefaultViews( { postType } ) {
 		[ postType ]
 	);
 	return useMemo( () => {
-		return {
-			[ postType ]: [
-				{
-					title: 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',
-							},
-						],
-					},
+		return [
+			{
+				title: 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',
+						},
+					],
 				},
-				{
-					title: __( 'Scheduled' ),
-					slug: 'future',
-					icon: scheduled,
-					view: {
-						...DEFAULT_POST_BASE,
-						filters: [
-							{
-								field: 'status',
-								operator: OPERATOR_IS_ANY,
-								value: 'future',
-							},
-						],
-					},
+			},
+			{
+				title: __( 'Scheduled' ),
+				slug: 'future',
+				icon: scheduled,
+				view: {
+					...DEFAULT_POST_BASE,
+					filters: [
+						{
+							field: 'status',
+							operator: OPERATOR_IS_ANY,
+							value: 'future',
+						},
+					],
 				},
-				{
-					title: __( 'Drafts' ),
-					slug: 'drafts',
-					icon: drafts,
-					view: {
-						...DEFAULT_POST_BASE,
-						filters: [
-							{
-								field: 'status',
-								operator: OPERATOR_IS_ANY,
-								value: 'draft',
-							},
-						],
-					},
+			},
+			{
+				title: __( 'Drafts' ),
+				slug: 'drafts',
+				icon: drafts,
+				view: {
+					...DEFAULT_POST_BASE,
+					filters: [
+						{
+							field: 'status',
+							operator: OPERATOR_IS_ANY,
+							value: 'draft',
+						},
+					],
 				},
-				{
-					title: __( 'Pending' ),
-					slug: 'pending',
-					icon: pending,
-					view: {
-						...DEFAULT_POST_BASE,
-						filters: [
-							{
-								field: 'status',
-								operator: OPERATOR_IS_ANY,
-								value: 'pending',
-							},
-						],
-					},
+			},
+			{
+				title: __( 'Pending' ),
+				slug: 'pending',
+				icon: pending,
+				view: {
+					...DEFAULT_POST_BASE,
+					filters: [
+						{
+							field: 'status',
+							operator: OPERATOR_IS_ANY,
+							value: 'pending',
+						},
+					],
 				},
-				{
-					title: __( 'Private' ),
-					slug: 'private',
-					icon: notAllowed,
-					view: {
-						...DEFAULT_POST_BASE,
-						filters: [
-							{
-								field: 'status',
-								operator: OPERATOR_IS_ANY,
-								value: 'private',
-							},
-						],
-					},
+			},
+			{
+				title: __( 'Private' ),
+				slug: 'private',
+				icon: notAllowed,
+				view: {
+					...DEFAULT_POST_BASE,
+					filters: [
+						{
+							field: 'status',
+							operator: OPERATOR_IS_ANY,
+							value: 'private',
+						},
+					],
 				},
-				{
-					title: __( 'Trash' ),
-					slug: 'trash',
-					icon: trash,
-					view: {
-						...DEFAULT_POST_BASE,
-						filters: [
-							{
-								field: 'status',
-								operator: OPERATOR_IS_ANY,
-								value: 'trash',
-							},
-						],
-					},
+			},
+			{
+				title: __( 'Trash' ),
+				slug: 'trash',
+				icon: trash,
+				view: {
+					...DEFAULT_POST_BASE,
+					type: LAYOUT_TABLE,
+					layout: defaultLayouts[ LAYOUT_TABLE ].layout,
+					filters: [
+						{
+							field: 'status',
+							operator: OPERATOR_IS_ANY,
+							value: 'trash',
+						},
+					],
 				},
-			],
-		};
-	}, [ labels, postType ] );
+			},
+		];
+	}, [ labels ] );
 }

package/src/components/sidebar-dataviews/index.js

@@ -3,8 +3,6 @@
  */
 import { __experimentalItemGroup as ItemGroup } from '@wordpress/components';
 import { privateApis as routerPrivateApis } from '@wordpress/router';
-import { useRef, useEffect } from '@wordpress/element';
-import { usePrevious } from '@wordpress/compose';
 
 /**
  * Internal dependencies
@@ -14,45 +12,13 @@ import { unlock } from '../../lock-unlock';
 import DataViewItem from './dataview-item';
 import CustomDataViewsList from './custom-dataviews-list';
 
-const { useLocation, useHistory } = unlock( routerPrivateApis );
-
-/**
- * Hook to switch to table layout when switching to the trash view.
- * When going out of the trash view, it switches back to the previous layout if
- * there was an automatic switch to table layout.
- */
-function useSwitchToTableOnTrash() {
-	const {
-		params: { activeView, layout, ...restParams },
-	} = useLocation();
-	const history = useHistory();
-	const viewToSwitchOutOfTrash = useRef( undefined );
-	const previousActiveView = usePrevious( activeView );
-	useEffect( () => {
-		if ( activeView === 'trash' && previousActiveView !== 'trash' ) {
-			viewToSwitchOutOfTrash.current = layout || 'list';
-			history.push( { ...restParams, layout: 'table', activeView } );
-		} else if (
-			previousActiveView === 'trash' &&
-			activeView !== 'trash' &&
-			viewToSwitchOutOfTrash.current
-		) {
-			history.push( {
-				...restParams,
-				layout: viewToSwitchOutOfTrash.current,
-				activeView,
-			} );
-			viewToSwitchOutOfTrash.current = undefined;
-		}
-	}, [ previousActiveView, activeView, layout, history, restParams ] );
-}
+const { useLocation } = unlock( routerPrivateApis );
 
 export default function DataViewsSidebarContent() {
 	const {
 		params: { postType, activeView = 'all', isCustom = 'false' },
 	} = useLocation();
-	useSwitchToTableOnTrash();
-	const DEFAULT_VIEWS = useDefaultViews( { postType } );
+	const defaultViews = useDefaultViews( { postType } );
 	if ( ! postType ) {
 		return null;
 	}
@@ -61,7 +27,7 @@ export default function DataViewsSidebarContent() {
 	return (
 		<>
 			<ItemGroup>
-				{ DEFAULT_VIEWS[ postType ].map( ( dataview ) => {
+				{ defaultViews.map( ( dataview ) => {
 					return (
 						<DataViewItem
 							key={ dataview.slug }

package/src/components/site-hub/index.js

@@ -7,7 +7,11 @@ import clsx from 'clsx';
  * WordPress dependencies
  */
 import { useSelect, useDispatch } from '@wordpress/data';
-import { Button, __experimentalHStack as HStack } from '@wordpress/components';
+import {
+	Button,
+	__experimentalHStack as HStack,
+	VisuallyHidden,
+} from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { store as coreStore } from '@wordpress/core-data';
 import { decodeEntities } from '@wordpress/html-entities';
@@ -80,9 +84,14 @@ const SiteHub = memo(
 								variant="link"
 								href={ homeUrl }
 								target="_blank"
-								label={ __( 'View site (opens in a new tab)' ) }
 							>
 								{ decodeEntities( siteTitle ) }
+								<VisuallyHidden as="span">
+									{
+										/* translators: accessibility text */
+										__( '(opens in a new tab)' )
+									}
+								</VisuallyHidden>
 							</Button>
 						</div>
 						<HStack

package/src/components/site-icon/style.scss

@@ -1,9 +1,11 @@
 .edit-site-site-icon__icon {
 	fill: currentColor;
+	width: 100%;
+	height: 100%;
 
 	.edit-site-layout.is-full-canvas & {
 		// Make the WordPress icon not so big in full canvas.
-		padding: $grid-unit-15 * 0.5; // 6px.
+		padding: $grid-unit-15;
 	}
 }
 
@@ -12,6 +14,7 @@
 	height: 100%;
 	object-fit: cover;
 	background: #333;
+	aspect-ratio: 1 / 1;
 
 	.edit-site-layout.is-full-canvas & {
 		border-radius: 0;