@wordpress/edit-site 5.21.0 → 5.22.0

package/build-style/style-rtl.css

@@ -1130,8 +1130,17 @@ textarea.edit-site-code-editor-text-area.edit-site-code-editor-text-area:-ms-inp
 
 .dataviews-wrapper {
   width: 100%;
+  height: 100%;
+  overflow: auto;
   padding: 32px;
 }
+.dataviews-wrapper > div {
+  min-height: 100%;
+}
+
+.dataviews-pagination {
+  margin-top: auto;
+}
 
 .dataviews-list-view {
   width: 100%;
@@ -1161,11 +1170,6 @@ textarea.edit-site-code-editor-text-area.edit-site-code-editor-text-area:-ms-inp
   border-bottom: 1px solid #f0f0f0;
 }
 
-.dataviews__select-control-prefix {
-  color: #757575;
-  text-wrap: nowrap;
-}
-
 .dataviews-view-grid__media {
   width: 100%;
   min-height: 200px;

package/build-style/style.css

@@ -1130,8 +1130,17 @@ textarea.edit-site-code-editor-text-area.edit-site-code-editor-text-area:-ms-inp
 
 .dataviews-wrapper {
   width: 100%;
+  height: 100%;
+  overflow: auto;
   padding: 32px;
 }
+.dataviews-wrapper > div {
+  min-height: 100%;
+}
+
+.dataviews-pagination {
+  margin-top: auto;
+}
 
 .dataviews-list-view {
   width: 100%;
@@ -1161,11 +1170,6 @@ textarea.edit-site-code-editor-text-area.edit-site-code-editor-text-area:-ms-inp
   border-bottom: 1px solid #f0f0f0;
 }
 
-.dataviews__select-control-prefix {
-  color: #757575;
-  text-wrap: nowrap;
-}
-
 .dataviews-view-grid__media {
   width: 100%;
   min-height: 200px;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/edit-site",
-	"version": "5.21.0",
+	"version": "5.22.0",
 	"description": "Edit Site Page module for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -28,44 +28,44 @@
 	"dependencies": {
 		"@babel/runtime": "^7.16.0",
 		"@tanstack/react-table": "^8.10.3",
-		"@wordpress/a11y": "^3.44.0",
-		"@wordpress/api-fetch": "^6.41.0",
-		"@wordpress/block-editor": "^12.12.0",
-		"@wordpress/block-library": "^8.21.0",
-		"@wordpress/blocks": "^12.21.0",
-		"@wordpress/commands": "^0.15.0",
-		"@wordpress/components": "^25.10.0",
-		"@wordpress/compose": "^6.21.0",
-		"@wordpress/core-commands": "^0.13.0",
-		"@wordpress/core-data": "^6.21.0",
-		"@wordpress/data": "^9.14.0",
-		"@wordpress/date": "^4.44.0",
-		"@wordpress/deprecated": "^3.44.0",
-		"@wordpress/dom": "^3.44.0",
-		"@wordpress/editor": "^13.21.0",
-		"@wordpress/element": "^5.21.0",
-		"@wordpress/escape-html": "^2.44.0",
-		"@wordpress/hooks": "^3.44.0",
-		"@wordpress/html-entities": "^3.44.0",
-		"@wordpress/i18n": "^4.44.0",
-		"@wordpress/icons": "^9.35.0",
-		"@wordpress/interface": "^5.21.0",
-		"@wordpress/keyboard-shortcuts": "^4.21.0",
-		"@wordpress/keycodes": "^3.44.0",
-		"@wordpress/media-utils": "^4.35.0",
-		"@wordpress/notices": "^4.12.0",
-		"@wordpress/patterns": "^1.5.0",
-		"@wordpress/plugins": "^6.12.0",
-		"@wordpress/preferences": "^3.21.0",
-		"@wordpress/primitives": "^3.42.0",
-		"@wordpress/private-apis": "^0.26.0",
-		"@wordpress/reusable-blocks": "^4.21.0",
-		"@wordpress/router": "^0.13.0",
-		"@wordpress/style-engine": "^1.27.0",
-		"@wordpress/url": "^3.45.0",
-		"@wordpress/viewport": "^5.21.0",
-		"@wordpress/widgets": "^3.21.0",
-		"@wordpress/wordcount": "^3.44.0",
+		"@wordpress/a11y": "^3.45.0",
+		"@wordpress/api-fetch": "^6.42.0",
+		"@wordpress/block-editor": "^12.13.0",
+		"@wordpress/block-library": "^8.22.0",
+		"@wordpress/blocks": "^12.22.0",
+		"@wordpress/commands": "^0.16.0",
+		"@wordpress/components": "^25.11.0",
+		"@wordpress/compose": "^6.22.0",
+		"@wordpress/core-commands": "^0.14.0",
+		"@wordpress/core-data": "^6.22.0",
+		"@wordpress/data": "^9.15.0",
+		"@wordpress/date": "^4.45.0",
+		"@wordpress/deprecated": "^3.45.0",
+		"@wordpress/dom": "^3.45.0",
+		"@wordpress/editor": "^13.22.0",
+		"@wordpress/element": "^5.22.0",
+		"@wordpress/escape-html": "^2.45.0",
+		"@wordpress/hooks": "^3.45.0",
+		"@wordpress/html-entities": "^3.45.0",
+		"@wordpress/i18n": "^4.45.0",
+		"@wordpress/icons": "^9.36.0",
+		"@wordpress/interface": "^5.22.0",
+		"@wordpress/keyboard-shortcuts": "^4.22.0",
+		"@wordpress/keycodes": "^3.45.0",
+		"@wordpress/media-utils": "^4.36.0",
+		"@wordpress/notices": "^4.13.0",
+		"@wordpress/patterns": "^1.6.0",
+		"@wordpress/plugins": "^6.13.0",
+		"@wordpress/preferences": "^3.22.0",
+		"@wordpress/primitives": "^3.43.0",
+		"@wordpress/private-apis": "^0.27.0",
+		"@wordpress/reusable-blocks": "^4.22.0",
+		"@wordpress/router": "^0.14.0",
+		"@wordpress/style-engine": "^1.28.0",
+		"@wordpress/url": "^3.46.0",
+		"@wordpress/viewport": "^5.22.0",
+		"@wordpress/widgets": "^3.22.0",
+		"@wordpress/wordcount": "^3.45.0",
 		"change-case": "^4.1.2",
 		"classnames": "^2.3.1",
 		"colord": "^2.9.2",
@@ -85,5 +85,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "f83bb1a71e8fa416131b81a9f282a72a1dc6c694"
+	"gitHead": "2a00e87b57b9c27ed2b9b0fd8d423ef3cada72c1"
 }

package/src/components/actions/index.js

@@ -0,0 +1,123 @@
+/**
+ * WordPress dependencies
+ */
+import { external, trash } from '@wordpress/icons';
+import { addQueryArgs } from '@wordpress/url';
+import { useDispatch } from '@wordpress/data';
+import { decodeEntities } from '@wordpress/html-entities';
+import { store as coreStore } from '@wordpress/core-data';
+import { __, sprintf } from '@wordpress/i18n';
+import { store as noticesStore } from '@wordpress/notices';
+import { useMemo } from '@wordpress/element';
+import { privateApis as routerPrivateApis } from '@wordpress/router';
+/**
+ * Internal dependencies
+ */
+import { unlock } from '../../lock-unlock';
+
+const { useHistory } = unlock( routerPrivateApis );
+
+export function useTrashPostAction() {
+	const { createSuccessNotice, createErrorNotice } =
+		useDispatch( noticesStore );
+	const { deleteEntityRecord } = useDispatch( coreStore );
+
+	return useMemo(
+		() => ( {
+			id: 'move-to-trash',
+			label: __( 'Move to Trash' ),
+			isPrimary: true,
+			icon: trash,
+			isEligible( { status } ) {
+				return status !== 'trash';
+			},
+			async perform( post ) {
+				try {
+					await deleteEntityRecord(
+						'postType',
+						post.type,
+						post.id,
+						{},
+						{ throwOnError: true }
+					);
+					createSuccessNotice(
+						sprintf(
+							/* translators: The page's title. */
+							__( '"%s" moved to the Trash.' ),
+							decodeEntities( post.title.rendered )
+						),
+						{
+							type: 'snackbar',
+							id: 'edit-site-page-trashed',
+						}
+					);
+				} catch ( error ) {
+					const errorMessage =
+						error.message && error.code !== 'unknown_error'
+							? error.message
+							: __(
+									'An error occurred while moving the page to the trash.'
+							  );
+
+					createErrorNotice( errorMessage, { type: 'snackbar' } );
+				}
+			},
+		} ),
+		[ createSuccessNotice, createErrorNotice, deleteEntityRecord ]
+	);
+}
+
+export const viewPostAction = {
+	id: 'view-post',
+	label: __( 'View' ),
+	isPrimary: true,
+	icon: external,
+	isEligible( post ) {
+		return post.status !== 'trash';
+	},
+	perform( post ) {
+		document.location.href = post.link;
+	},
+};
+
+export function useEditPostAction() {
+	const history = useHistory();
+	return useMemo(
+		() => ( {
+			id: 'edit-post',
+			label: __( 'Edit' ),
+			isEligible( { status } ) {
+				return status !== 'trash';
+			},
+			perform( post ) {
+				history.push( {
+					postId: post.id,
+					postType: post.type,
+					canvas: 'edit',
+				} );
+			},
+		} ),
+		[ history ]
+	);
+}
+export const postRevisionsAction = {
+	id: 'view-post-revisions',
+	label: __( 'View revisions' ),
+	isPrimary: false,
+	isEligible: ( post ) => {
+		if ( post.status === 'trash' ) {
+			return false;
+		}
+		const lastRevisionId =
+			post?._links?.[ 'predecessor-version' ]?.[ 0 ]?.id ?? null;
+		const revisionsCount =
+			post?._links?.[ 'version-history' ]?.[ 0 ]?.count ?? 0;
+		return lastRevisionId && revisionsCount > 1;
+	},
+	perform( post ) {
+		const href = addQueryArgs( 'revision.php', {
+			revision: post?._links?.[ 'predecessor-version' ]?.[ 0 ]?.id,
+		} );
+		document.location.href = href;
+	},
+};

package/src/components/block-editor/use-site-editor-settings.js

@@ -85,19 +85,23 @@ function useArchiveLabel( templateSlug ) {
 
 export default function useSiteEditorSettings() {
 	const { setIsInserterOpened } = useDispatch( editSiteStore );
-	const { storedSettings, canvasMode, templateType } = useSelect(
-		( select ) => {
-			const { getSettings, getCanvasMode, getEditedPostType } = unlock(
-				select( editSiteStore )
-			);
-			return {
-				storedSettings: getSettings( setIsInserterOpened ),
-				canvasMode: getCanvasMode(),
-				templateType: getEditedPostType(),
-			};
-		},
-		[ setIsInserterOpened ]
-	);
+	const { storedSettings, canvasMode, templateType, siteSettings } =
+		useSelect(
+			( select ) => {
+				const { canUser, getEntityRecord } = select( coreStore );
+				const { getSettings, getCanvasMode, getEditedPostType } =
+					unlock( select( editSiteStore ) );
+				return {
+					storedSettings: getSettings( setIsInserterOpened ),
+					canvasMode: getCanvasMode(),
+					templateType: getEditedPostType(),
+					siteSettings: canUser( 'read', 'settings' )
+						? getEntityRecord( 'root', 'site' )
+						: undefined,
+				};
+			},
+			[ setIsInserterOpened ]
+		);
 
 	const settingsBlockPatterns =
 		storedSettings.__experimentalAdditionalBlockPatterns ?? // WP 6.0
@@ -180,6 +184,8 @@ export default function useSiteEditorSettings() {
 			focusMode: canvasMode === 'view' && focusMode ? false : focusMode,
 			__experimentalArchiveTitleTypeLabel: archiveLabels.archiveTypeLabel,
 			__experimentalArchiveTitleNameLabel: archiveLabels.archiveNameLabel,
+			pageOnFront: siteSettings?.page_on_front,
+			pageForPosts: siteSettings?.page_for_posts,
 		};
 	}, [
 		storedSettings,
@@ -189,5 +195,7 @@ export default function useSiteEditorSettings() {
 		canvasMode,
 		archiveLabels.archiveTypeLabel,
 		archiveLabels.archiveNameLabel,
+		siteSettings?.page_on_front,
+		siteSettings?.page_for_posts,
 	] );
 }

package/src/components/dataviews/README.md

@@ -1,107 +1,194 @@
 # DataView
 
-This file aims to document the main APIs related to the DataView component.
+This file documents the DataViews UI component, which provides an API to render datasets using different view types (table, grid, etc.).
+
+```js
+<DataViews
+	data={ pages }
+	isLoading= { isLoadingPages }
+	view={ view }
+	onChangeView={ onChangeView }
+	fields={ fields }
+	actions={ [ trashPostAction ] }
+	paginationInfo={ { totalItems, totalPages } }
+/>
+```
+
+## Data
+
+The dataset to work with, represented as a one-dimensional array. 
+
+Example:
+
+```js
+[
+	{ id: 1, title: "Title", ... },
+	{ ... }
+]
+```
 
 ## View
 
-The view is responsible for configuring how the dataset is visible to the user. For example:
+The view object configures how the dataset is visible to the user.
+
+Example:
 
 ```js
 {
 	type: 'list',
-	page: 1,
 	perPage: 5,
+	page: 1,
 	sort: {
 		field: 'date',
 		direction: 'desc',
 	},
+	search: '',
 	filters: {
-		search: '',
 		author: 2,
 		status: 'publish, draft'
 	},
-	visibleFilters: [ 'search', 'author', 'status' ],
+	visibleFilters: [ 'author', 'status' ],
 	hiddenFields: [ 'date', 'featured-image' ],
 	layout: {},
 }
 ```
 
-- `type`: one of `list` or `grid`.
-- `page`: the current page.
-- `perPage`: number of records per page.
-- `sort.field`: field used for sorting.
-- `sort.direction`: one of `asc` or `desc`.
-- `filters`: the filters applied to the dataset.
+- `type`: view type, one of `list` or `grid`.
+- `perPage`: number of records to show per page.
+- `page`: the page that is visible.
+- `sort.field`: field used for sorting the dataset.
+- `sort.direction`: the direction to use for sorting, one of `asc` or `desc`.
+- `search`: the text search applied to the dataset.
+- `filters`: the filters applied to the dataset. See filters section.
 - `visibleFilters`: the `id` of the filters that are visible in the UI.
 - `hiddenFields`: the `id` of the fields that are hidden in the UI.
 - `layout`: ...
 
-The view configuration is used to retrieve the corresponding entity that holds the dataset:
+Note that it's the consumer's responsibility to provide the data and make sure the dataset corresponds to the view's config (sort, pagination, filters, etc.).
+
+Example:
 
 ```js
-const {
-	records: pages,
-	isLoading: isLoadingPages,
-	totalItems,
-	totalPages
-} = useEntityRecords( 'postType', 'page', {
-	per_page: view.perPage,
-	page: view.page,
-	order: view.sort?.direction,
-	orderby: view.sort?.field
-	...view.filters
-} );
+function MyCustomPageList() { 
+	const [ view, setView ] = useState( {
+		type: 'list',
+		page: 1,
+		"...": "..."
+	} );
+
+	const queryArgs = useMemo(
+		() => ( {
+			per_page: view.perPage,
+			page: view.page,
+			order: view.sort?.direction,
+			orderby: view.sort?.field
+			search: view.search,
+			...view.filters
+		} ),
+		[ view ]
+	);
+
+	const {
+		records
+	} = useEntityRecords( 'postType', 'page', queryArgs );
+
+	return (
+		<DataViews
+			data={ records }
+			view={ view }
+			onChangeView={ setView }
+			"..."
+		/>
+	);
+}
 ```
 
 ## Fields
 
-The fields describe the dataset. For example:
+The fields describe the visible items for each record in the dataset.
+
+Example:
 
 ```js
 [
+	{
+		id: 'date',
+		header: __( 'Date' ),
+		getValue: ( { item } ) => item.date,
+		render: ( { item } ) => {
+			return (
+				<time>{ getFormattedDate( item.date ) }</time>
+			);
+		}
+	},
 	{
 		id: 'author',
 		header: __( 'Author' ),
 		getValue: ( { item } ) => item.author,
-		render: ( {item} ) => {
+		render: ( { item } ) => {
 			return (
 				<a href="...">{ item.author }</a>
 			);
 		},
 		elements: [
-			{ value: 1, label: 'admin' }
-			{ value: 2, label: 'user' }
+			{ value: 1, label: 'Admin' }
+			{ value: 2, label: 'User' }
 		]
-		filters: [
-			{ id: 'author', type: 'enumeration' },
-			{ id: 'author_search', type: 'search' }
-		],
-	},
+		filters: [ 'enumeration' ],
+	}
 ]
 ```
 
 - `id`: identifier for the field. Unique.
-- `header`: the field name for the UI.
+- `header`: the field's name to be shown in the UI.
 - `getValue`: function that returns the value of the field.
 - `render`: function that renders the field.
-- `elements`: a set of valid values for the field.
-- `filters`: what filters are available. A filter is an object with `id` and `type` as properties:
-	- `id`: unique identifier for the filter. Matches the entity query param.
-	- `type`: the type of filter. One of `search` or `enumeration`.
-
+- `elements`: the set of valid values for the field's value.
+- `filters`: what filters are available for the user to use. See filters section.
 
-## DataViews
+## Filters
 
-The UI component responsible for rendering the dataset.
+Filters describe the conditions a record should match to be listed as part of the dataset. Filters are provided per field.
 
 ```js
+const field = [
+	{
+		id: 'author',
+		filters: [ 'enumeration' ],
+	}
+];
+
 <DataViews
-	data={ pages }
-	isLoading= { isLoadingPages }
 	fields={ fields }
-	view={ view }
-	onChangeView={ onChangeView }
-	actions={ [ trashPostAction ] }
-	paginationInfo={ { totalItems, totalPages } }
 />
 ```
+
+A filter is an object that may contain the following properties:
+
+- `id`: unique identifier for the filter. Matches the entity query param. Field filters may omit it, in which case the field's `id` will be used.
+- `name`: nice looking name for the filter. Field filters may omit it, in which case the field's `header` will be used.
+- `type`: the type of filter. Only `enumeration` is supported at the moment.
+- `elements`: for filters of type `enumeration`, the list of options to show. A one-dimensional array of object with value/label keys, as in `[ { value: 1, label: "Value name" } ]`.
+	- `value`: what's serialized into the view's filters.
+	- `label`: nice-looking name for users.
+- `resetValue`: for filters of type `enumeration`, this is the value for the reset option. If none is provided, `''` will be used.
+- `resetLabel`: for filters of type `enumeration`, this is the label for the reset option. If none is provided, `All` will be used.
+
+As a convenience, field's filter can provide abbreviated versions for the filter. All of following examples result in the same filter:
+
+```js
+const field = [
+	{
+		id: 'author',
+		header: __( 'Author' ),
+		elements: authors,
+		filters: [
+			'enumeration',
+			{ type: 'enumeration' },
+			{ id: 'author', type: 'enumeration' },
+			{ id: 'author', type: 'enumeration', name: __( 'Author' ) },
+			{ id: 'author', type: 'enumeration', name: __( 'Author' ), elements: authors },
+		],
+	}
+];
+```

package/src/components/dataviews/dataviews.js

@@ -14,12 +14,15 @@ import ViewList from './view-list';
 import Pagination from './pagination';
 import ViewActions from './view-actions';
 import Filters from './filters';
+import Search from './search';
 import { ViewGrid } from './view-grid';
 
 export default function DataViews( {
 	view,
 	onChangeView,
 	fields,
+	search = true,
+	searchLabel = undefined,
 	actions,
 	data,
 	isLoading = false,
@@ -34,9 +37,16 @@ export default function DataViews( {
 	}, [ fields ] );
 	return (
 		<div className="dataviews-wrapper">
-			<VStack spacing={ 4 }>
+			<VStack spacing={ 4 } justify="flex-start">
 				<HStack>
 					<HStack justify="start">
+						{ search && (
+							<Search
+								label={ searchLabel }
+								view={ view }
+								onChangeView={ onChangeView }
+							/>
+						) }
 						<Filters
 							fields={ fields }
 							view={ view }