Dataviews: Add: Bulk actions to templates.

packages/edit-site/src/components/actions/index.js

@@ -6,7 +6,7 @@ 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 { __, sprintf, _n } from '@wordpress/i18n';
 import { store as noticesStore } from '@wordpress/notices';
 import { useMemo } from '@wordpress/element';
 import { privateApis as routerPrivateApis } from '@wordpress/router';
@@ -28,23 +28,34 @@ export const trashPostAction = {
 	id: 'move-to-trash',
 	label: __( 'Move to Trash' ),
 	isPrimary: true,
+	isBulk: true,
 	icon: trash,
 	isEligible( { status } ) {
 		return status !== 'trash';
 	},
 	hideModalHeader: true,
-	RenderModal: ( { item: post, closeModal } ) => {
+	RenderModal: ( { items: posts, closeModal } ) => {
 		const { createSuccessNotice, createErrorNotice } =
 			useDispatch( noticesStore );
 		const { deleteEntityRecord } = useDispatch( coreStore );
 		return (
 			<VStack spacing="5">
 				<Text>
-					{ sprintf(
-						// translators: %s: The page's title.
-						__( 'Are you sure you want to delete "%s"?' ),
-						decodeEntities( post.title.rendered )
-					) }
+					{ posts.length > 1
+						? sprintf(
+								// translators: %s: The number of posts (always plural).
+								__(
+									'Are you sure you want to delete %s posts?'
+								),
+								decodeEntities( posts.length )
+						  )
+						: sprintf(
+								// translators: %s: The page's title.
+								__( 'Are you sure you want to delete "%s"?' ),
+								decodeEntities(
+									posts && posts[ 0 ]?.title?.rendered
+								)
+						  ) }
 				</Text>
 				<HStack justify="right">
 					<Button variant="tertiary" onClick={ closeModal }>
@@ -54,19 +65,31 @@ export const trashPostAction = {
 						variant="primary"
 						onClick={ async () => {
 							try {
-								await deleteEntityRecord(
-									'postType',
-									post.type,
-									post.id,
-									{},
-									{ throwOnError: true }
+								await Promise.all(
+									posts.map( async ( post ) => {
+										deleteEntityRecord(
+											'postType',
+											post.type,
+											post.id,
+											{},
+											{ throwOnError: true }
+										);
+									} )
 								);
 								createSuccessNotice(
-									sprintf(
-										/* translators: The page's title. */
-										__( '"%s" moved to the Trash.' ),
-										decodeEntities( post.title.rendered )
-									),
+									posts.length > 1
+										? __(
+												'The selected posts were moved to the trash.'
+										  )
+										: sprintf(
+												/* translators: The page's title. */
+												__(
+													'"%s" moved to the Trash.'
+												),
+												decodeEntities(
+													posts[ 0 ].title.rendered
+												)
+										  ),
 									{
 										type: 'snackbar',
 										id: 'edit-site-page-trashed',
@@ -77,8 +100,10 @@ export const trashPostAction = {
 									error.message &&
 									error.code !== 'unknown_error'
 										? error.message
-										: __(
-												'An error occurred while moving the page to the trash.'
+										: _n(
+												'An error occurred while moving the page to the trash.',
+												'An error occurred while moving the pages to the trash.',
+												posts.length
 										  );
 
 								createErrorNotice( errorMessage, {

packages/edit-site/src/components/dataviews/bulk-actions.js

@@ -0,0 +1,117 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	ToolbarButton,
+	Toolbar,
+	ToolbarGroup,
+	Popover,
+} from '@wordpress/components';
+import { useMemo } from '@wordpress/element';
+import { __, _n, sprintf } from '@wordpress/i18n';
+/**
+ * Internal dependencies
+ */
+import { ActionWithModal } from './item-actions';
+
+function PrimaryActionTrigger( { action, onClick } ) {
+	return (
+		<ToolbarButton
+			label={ action.label }
+			icon={ action.icon }
+			isDestructive={ action.isDestructive }
+			size="compact"
+			onClick={ onClick }
+		/>
+	);
+}
+
+const EMPTY_ARRAY = [];
+
+export default function BulkActions( {
+	data,
+	selection,
+	actions = EMPTY_ARRAY,
+	setSelection,
+} ) {
+	const items = useMemo(
+		() =>
+			data?.filter( ( item ) => selection?.includes( item.id ) ) ??
+			EMPTY_ARRAY,
+		[ data, selection ]
+	);
+	const primaryActions = useMemo(
+		() =>
+			actions.filter( ( action ) => {
+				return (
+					action.isBulk &&
+					action.isPrimary &&
+					items.every( ( item ) => action.isEligible( item ) )
+				);
+			} ),
+		[ actions, items ]
+	);
+
+	if (
+		( selection && selection.length === 0 ) ||
+		primaryActions.length === 0
+	) {
+		return null;
+	}
+
+	return (
+		<Popover
+			placement="top-middle"
+			className="dataviews-bulk-actions-popover"
+		>
+			<Toolbar label="Bulk actions">
+				<div className="dataviews-bulk-actions-toolbar-wrapper">
+					<ToolbarGroup>
+						<ToolbarButton onClick={ () => {} } disabled={ true }>
+							{
+								// translators: %s: Total number of selected items.
+								sprintf(
+									// translators: %s: Total number of selected items.
+									_n(
+										'%s item selected',
+										'%s items selected',
+										selection.length
+									),
+									selection.length
+								)
+							}
+						</ToolbarButton>
+						<ToolbarButton
+							onClick={ () => {
+								setSelection( EMPTY_ARRAY );
+							} }
+						>
+							{ __( 'Deselect' ) }
+						</ToolbarButton>
+					</ToolbarGroup>
+					<ToolbarGroup>
+						{ primaryActions.map( ( action ) => {
+							if ( !! action.RenderModal ) {
+								return (
+									<ActionWithModal
+										key={ action.id }
+										action={ action }
+										items={ items }
+										ActionTrigger={ PrimaryActionTrigger }
+									/>
+								);
+							}
+							return (
+								<PrimaryActionTrigger
+									key={ action.id }
+									action={ action }
+									onClick={ () => action.callback( items ) }
+								/>
+							);
+						} ) }
+					</ToolbarGroup>
+				</div>
+			</Toolbar>
+		</Popover>
+	);
+}

packages/edit-site/src/components/dataviews/dataviews.js

@@ -17,6 +17,7 @@ import Filters from './filters';
 import Search from './search';
 import { ViewGrid } from './view-grid';
 import { ViewSideBySide } from './view-side-by-side';
+import BulkActions from './bulk-actions';
 
 // To do: convert to view type registry.
 export const viewTypeSupportsMap = {
@@ -45,6 +46,8 @@ export default function DataViews( {
 	isLoading = false,
 	paginationInfo,
 	supportedLayouts,
+	selection,
+	setSelection,
 } ) {
 	const ViewComponent = viewTypeMap[ view.type ];
 	const _fields = useMemo( () => {
@@ -89,12 +92,23 @@ export default function DataViews( {
 					data={ data }
 					getItemId={ getItemId }
 					isLoading={ isLoading }
+					selection={ selection }
+					setSelection={ setSelection }
 				/>
-				<Pagination
-					view={ view }
-					onChangeView={ onChangeView }
-					paginationInfo={ paginationInfo }
-				/>
+
+				<div>
+					<Pagination
+						view={ view }
+						onChangeView={ onChangeView }
+						paginationInfo={ paginationInfo }
+					/>
+					<BulkActions
+						data={ data }
+						actions={ actions }
+						selection={ selection }
+						setSelection={ setSelection }
+					/>
+				</div>
 			</VStack>
 		</div>
 	);