diff --git a/packages/base-styles/_z-index.scss b/packages/base-styles/_z-index.scss
index cbe495d3787cd9..536d07ec4da34b 100644
--- a/packages/base-styles/_z-index.scss
+++ b/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,
diff --git a/packages/edit-site/src/components/dataviews/dataviews.js b/packages/edit-site/src/components/dataviews/dataviews.js
index cc983f25e9e719..40bc87bed200c4 100644
--- a/packages/edit-site/src/components/dataviews/dataviews.js
+++ b/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 }
/>
diff --git a/packages/edit-site/src/components/dataviews/item-actions.js b/packages/edit-site/src/components/dataviews/item-actions.js
index 2b7837ae4a3829..e406de286d4b04 100644
--- a/packages/edit-site/src/components/dataviews/item-actions.js
+++ b/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 (
+
+ );
+}
+
+function SecondaryActionTrigger( { action, onClick } ) {
+ return (
+
+ );
+}
+
+function ActionWithModal( { action, item, ActionTrigger } ) {
+ const [ isModalOpen, setIsModalOpen ] = useState( false );
+ const actionTriggerProps = {
+ action,
+ onClick: () => setIsModalOpen( true ),
+ };
+ const { RenderModal, hideModalHeader } = action;
+ return (
+ <>
+
+ { isModalOpen && (
+ {
+ setIsModalOpen( false );
+ } }
+ overlayClassName="dataviews-action-modal"
+ >
+ setIsModalOpen( false ) }
+ />
+
+ ) }
+ >
+ );
+}
+
export default function ItemActions( { item, actions } ) {
const { primaryActions, secondaryActions } = useMemo( () => {
return actions.reduce(
@@ -37,29 +87,52 @@ export default function ItemActions( { item, actions } ) {
return (
{ !! primaryActions.length &&
- primaryActions.map( ( action ) => (
-