diff --git a/packages/edit-site/src/components/actions/trash-post.js b/packages/edit-site/src/components/actions/trash-post.js
new file mode 100644
index 00000000000000..7977ed3d11e009
--- /dev/null
+++ b/packages/edit-site/src/components/actions/trash-post.js
@@ -0,0 +1,55 @@
+/**
+ * WordPress dependencies
+ */
+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';
+
+export default function useMoveToTrashAction() {
+ const { createSuccessNotice, createErrorNotice } =
+ useDispatch( noticesStore );
+ const { deleteEntityRecord } = useDispatch( coreStore );
+
+ return useMemo(
+ () => ( {
+ id: 'move-to-trash',
+ label: __( 'Move to 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' } );
+ }
+ },
+ isDesctructive: true,
+ } ),
+ [ createSuccessNotice, createErrorNotice, deleteEntityRecord ]
+ );
+}
diff --git a/packages/edit-site/src/components/dataviews/dataviews.js b/packages/edit-site/src/components/dataviews/dataviews.js
index 4628d850a023c2..13e27ddfacae57 100644
--- a/packages/edit-site/src/components/dataviews/dataviews.js
+++ b/packages/edit-site/src/components/dataviews/dataviews.js
@@ -15,7 +15,13 @@ import {
import {
__experimentalVStack as VStack,
__experimentalHStack as HStack,
+ VisuallyHidden,
+ DropdownMenu,
+ MenuGroup,
+ MenuItem,
} from '@wordpress/components';
+import { useMemo } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
/**
* Internal dependencies
@@ -24,8 +30,10 @@ import ListView from './list-view';
import { Pagination } from './pagination';
import ViewActions from './view-actions';
import TextFilter from './text-filter';
+import { moreVertical } from '@wordpress/icons';
export default function DataViews( {
+ actions,
data,
fields,
view,
@@ -34,9 +42,50 @@ export default function DataViews( {
paginationInfo,
options: { pageCount },
} ) {
+ const columns = useMemo( () => {
+ const _columns = [ ...fields ];
+ if ( actions && actions.length ) {
+ _columns.push( {
+ header: { __( 'Actions' ) },
+ id: 'actions',
+ cell: ( props ) => {
+ return (
+
+ { () => (
+
+ { actions.map( ( action ) => (
+
+ ) ) }
+
+ ) }
+
+ );
+ },
+ enableHiding: false,
+ } );
+ }
+
+ return _columns;
+ }, [ fields, actions ] );
+
const dataView = useReactTable( {
data,
- columns: fields,
+ columns,
manualSorting: true,
manualFiltering: true,
manualPagination: true,
diff --git a/packages/edit-site/src/components/page-actions/index.js b/packages/edit-site/src/components/page-actions/index.js
index f6f0119a164544..d42a706c36796e 100644
--- a/packages/edit-site/src/components/page-actions/index.js
+++ b/packages/edit-site/src/components/page-actions/index.js
@@ -10,17 +10,11 @@ import { moreVertical } from '@wordpress/icons';
*/
import TrashPageMenuItem from './trash-page-menu-item';
-export default function PageActions( {
- postId,
- className,
- toggleProps,
- onRemove,
-} ) {
+export default function PageActions( { postId, toggleProps, onRemove } ) {
return (
{ () => (
diff --git a/packages/edit-site/src/components/page-pages/index.js b/packages/edit-site/src/components/page-pages/index.js
index eea646c1c7326c..7725a5e9fbcad7 100644
--- a/packages/edit-site/src/components/page-pages/index.js
+++ b/packages/edit-site/src/components/page-pages/index.js
@@ -4,7 +4,6 @@
import apiFetch from '@wordpress/api-fetch';
import { addQueryArgs } from '@wordpress/url';
import {
- VisuallyHidden,
__experimentalHeading as Heading,
__experimentalVStack as VStack,
} from '@wordpress/components';
@@ -18,8 +17,8 @@ import { useState, useEffect, useMemo } from '@wordpress/element';
*/
import Page from '../page';
import Link from '../routes/link';
-import PageActions from '../page-actions';
import { DataViews } from '../dataviews';
+import useTrashPostAction from '../actions/trash-post';
const EMPTY_ARRAY = [];
const EMPTY_OBJECT = {};
@@ -134,27 +133,22 @@ export default function PagePages() {
postStatuses[ props.row.original.status ] ??
props.row.original.status,
},
- {
- header: { __( 'Actions' ) },
- id: 'actions',
- cell: ( props ) => {
- const page = props.row.original;
- return ;
- },
- enableHiding: false,
- },
],
[ postStatuses ]
);
+ const trashPostAction = useTrashPostAction();
+ const actions = useMemo( () => [ trashPostAction ], [ trashPostAction ] );
+
// TODO: we need to handle properly `data={ data || EMPTY_ARRAY }` for when `isLoading`.
return (