DataViews: Update all templates page

packages/base-styles/_z-index.scss

@@ -127,6 +127,7 @@ $z-layers: (
 	".block-editor-template-part__selection-modal": 1000001,
 	".block-editor-block-rename-modal": 1000001,
 	".edit-site-list__rename-modal": 1000001,
+	".dataviews-action-modal": 1000001,
 	".edit-site-swap-template-modal": 1000001,
 	".edit-site-template-panel__replace-template-modal": 1000001,
 

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

@@ -43,6 +43,7 @@ export default function DataViews( {
 	data,
 	isLoading = false,
 	paginationInfo,
+	supportedLayouts,
 } ) {
 	const ViewComponent = viewTypeMap[ view.type ];
 	const _fields = useMemo( () => {
@@ -74,6 +75,7 @@ export default function DataViews( {
 							fields={ fields }
 							view={ view }
 							onChangeView={ onChangeView }
+							supportedLayouts={ supportedLayouts }
 						/>
 					</HStack>
 				</HStack>

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

@@ -6,12 +6,62 @@ import {
 	MenuGroup,
 	MenuItem,
 	Button,
+	Modal,
 	__experimentalHStack as HStack,
 } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
-import { useMemo } from '@wordpress/element';
+import { useMemo, useState } from '@wordpress/element';
 import { moreVertical } from '@wordpress/icons';
 
+function PrimaryActionTrigger( { action, onClick } ) {
+	return (
+		<Button
+			label={ action.label }
+			icon={ action.icon }
+			isDestructive={ action.isDestructive }
+			size="compact"
+			onClick={ onClick }
+		/>
+	);
+}
+
+function SecondaryActionTrigger( { action, onClick } ) {
+	return (
+		<MenuItem onClick={ onClick } isDestructive={ action.isDestructive }>
+			{ action.label }
+		</MenuItem>
+	);
+}
+
+function ActionWithModal( { action, item, ActionTrigger } ) {
+	const [ isModalOpen, setIsModalOpen ] = useState( false );
+	const actionTriggerProps = {
+		action,
+		onClick: () => setIsModalOpen( true ),
+	};
+	const { RenderModal, hideModalHeader } = action;
+	return (
+		<>
+			<ActionTrigger { ...actionTriggerProps } />
+			{ isModalOpen && (
+				<Modal
+					title={ ! hideModalHeader && action.label }
+					__experimentalHideHeader={ !! hideModalHeader }
+					onRequestClose={ () => {
+						setIsModalOpen( false );
+					} }
+					overlayClassName="dataviews-action-modal"
+				>
+					<RenderModal
+						item={ item }
+						closeModal={ () => setIsModalOpen( false ) }
+					/>
+				</Modal>
+			) }
+		</>
+	);
+}
+
 export default function ItemActions( { item, actions } ) {
 	const { primaryActions, secondaryActions } = useMemo( () => {
 		return actions.reduce(
@@ -37,29 +87,52 @@ export default function ItemActions( { item, actions } ) {
 	return (
 		<HStack justify="flex-end">
 			{ !! primaryActions.length &&
-				primaryActions.map( ( action ) => (
-					<Button
-						label={ action.label }
-						key={ action.id }
-						icon={ action.icon }
-						onClick={ () => action.perform( item ) }
-						isDestructive={ action.isDestructive }
-						size="compact"
-					/>
-				) ) }
+				primaryActions.map( ( action ) => {
+					if ( !! action.RenderModal ) {
+						return (
+							<ActionWithModal
+								key={ action.id }
+								action={ action }
+								item={ item }
+								ActionTrigger={ PrimaryActionTrigger }
+							/>
+						);
+					}
+					return (
+						<PrimaryActionTrigger
+							key={ action.id }
+							action={ action }
+							item={ item }
+							onClick={ () => action.perform( item ) }
+						/>
+					);
+				} ) }
 			{ !! secondaryActions.length && (
 				<DropdownMenu icon={ moreVertical } label={ __( 'Actions' ) }>
 					{ () => (
 						<MenuGroup>
-							{ secondaryActions.map( ( action ) => (
-								<MenuItem
-									key={ action.id }
-									onClick={ () => action.perform( item ) }
-									isDestructive={ action.isDestructive }
-								>
-									{ action.label }
-								</MenuItem>
-							) ) }
+							{ secondaryActions.map( ( action ) => {
+								if ( !! action.RenderModal ) {
+									return (
+										<ActionWithModal
+											key={ action.id }
+											action={ action }
+											item={ item }
+											ActionTrigger={
+												SecondaryActionTrigger
+											}
+										/>
+									);
+								}
+								return (
+									<SecondaryActionTrigger
+										key={ action.id }
+										action={ action }
+										item={ item }
+										onClick={ () => action.perform( item ) }
+									/>
+								);
+							} ) }
 						</MenuGroup>
 					) }
 				</DropdownMenu>

packages/edit-site/src/components/dataviews/style.scss

@@ -31,7 +31,7 @@
 	td,
 	th {
 		padding: $grid-unit-15;
-		&:last-child {
+		[data-field-id="actions"] {
 			text-align: right;
 		}
 	}
@@ -49,3 +49,7 @@
 		object-fit: cover;
 	}
 }
+
+.dataviews-action-modal {
+	z-index: z-index(".dataviews-action-modal");
+}

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

@@ -44,8 +44,17 @@ const availableViews = [
 	},
 ];
 
-function ViewTypeMenu( { view, onChangeView } ) {
-	const activeView = availableViews.find( ( v ) => view.type === v.id );
+function ViewTypeMenu( { view, onChangeView, supportedLayouts } ) {
+	let _availableViews = availableViews;
+	if ( supportedLayouts ) {
+		_availableViews = _availableViews.filter( ( _view ) =>
+			supportedLayouts.includes( _view.id )
+		);
+	}
+	if ( _availableViews.length === 1 ) {
+		return null;
+	}
+	const activeView = _availableViews.find( ( v ) => view.type === v.id );
 	return (
 		<DropdownSubMenuV2
 			trigger={
@@ -61,7 +70,7 @@ function ViewTypeMenu( { view, onChangeView } ) {
 				</DropdownSubMenuTriggerV2>
 			}
 		>
-			{ availableViews.map( ( availableView ) => {
+			{ _availableViews.map( ( availableView ) => {
 				return (
 					<DropdownMenuItemV2
 						key={ availableView.id }
@@ -265,7 +274,12 @@ function SortMenu( { fields, view, onChangeView } ) {
 	);
 }
 
-export default function ViewActions( { fields, view, onChangeView } ) {
+export default function ViewActions( {
+	fields,
+	view,
+	onChangeView,
+	supportedLayouts,
+} ) {
 	return (
 		<DropdownMenuV2
 			label={ __( 'Actions' ) }
@@ -277,7 +291,11 @@ export default function ViewActions( { fields, view, onChangeView } ) {
 			}
 		>
 			<DropdownMenuGroupV2>
-				<ViewTypeMenu view={ view } onChangeView={ onChangeView } />
+				<ViewTypeMenu
+					view={ view }
+					onChangeView={ onChangeView }
+					supportedLayouts={ supportedLayouts }
+				/>
 				<SortMenu
 					fields={ fields }
 					view={ view }

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

@@ -318,7 +318,7 @@ function ViewList( {
 	 * @return {Array} The transformed TanStack column filters.
 	 */
 	const toTanStackColumnFilters = ( filters ) =>
-		filters.map( ( filter ) => ( {
+		filters?.map( ( filter ) => ( {
 			[ filter.field + ':' + filter.operator ]: filter.value,
 		} ) );
 
@@ -475,6 +475,7 @@ function ViewList( {
 												header.column.columnDef
 													.maxWidth || undefined,
 										} }
+										data-field-id={ header.id }
 									>
 										<HeaderMenu
 											dataView={ dataView }

packages/edit-site/src/components/page-main/index.js

@@ -9,6 +9,7 @@ import { privateApis as routerPrivateApis } from '@wordpress/router';
 import PagePatterns from '../page-patterns';
 import PageTemplateParts from '../page-template-parts';
 import PageTemplates from '../page-templates';
+import DataviewsTemplates from '../page-templates/dataviews-templates';
 import PagePages from '../page-pages';
 import { unlock } from '../../lock-unlock';
 
@@ -20,7 +21,11 @@ export default function PageMain() {
 	} = useLocation();
 
 	if ( path === '/wp_template/all' ) {
-		return <PageTemplates />;
+		return window?.__experimentalAdminViews ? (
+			<DataviewsTemplates />
+		) : (
+			<PageTemplates />
+		);
 	} else if ( path === '/wp_template_part/all' ) {
 		return <PageTemplateParts />;
 	} else if ( path === '/patterns' ) {