@elementor/editor-site-navigation 0.19.11 → 0.21.0

package/dist/index.mjs

@@ -135,6 +135,7 @@ function PostListItem({ post, closePopup, ...props }) {
   return /* @__PURE__ */ React3.createElement(
     MenuItem,
     {
+      disabled: !post.user_can.edit,
       onClick: async () => {
         closePopup();
         await navigateToDocument(post.id);
@@ -190,12 +191,41 @@ async function addNewPage() {
 import { PlusIcon } from "@elementor/icons";
 import { __ } from "@wordpress/i18n";
 import { __useNavigateToDocument as useNavigateToDocument2 } from "@elementor/editor-documents";
+
+// src/hooks/use-user.ts
+import { useQuery as useQuery2 } from "@elementor/query";
+
+// src/api/user.ts
+import apiFetch3 from "@wordpress/api-fetch";
+var getUser = () => {
+  const baseUri = "/wp/v2/users/me";
+  const keys = ["capabilities"];
+  const queryParams = new URLSearchParams({
+    _fields: keys.join(","),
+    context: "edit"
+  });
+  const uri = baseUri + "?" + queryParams.toString();
+  return apiFetch3({ path: uri });
+};
+
+// src/hooks/use-user.ts
+var userQueryKey = () => ["site-navigation", "user"];
+function useUser() {
+  return useQuery2({
+    queryKey: userQueryKey(),
+    queryFn: () => getUser()
+  });
+}
+
+// src/components/top-bar/create-post-list-item.tsx
 function CreatePostListItem({ closePopup, ...props }) {
   const { create, isLoading } = useCreatePage();
   const navigateToDocument = useNavigateToDocument2();
+  const { data: user } = useUser();
   return /* @__PURE__ */ React4.createElement(
     MenuItem2,
     {
+      disabled: isLoading || !user?.capabilities?.edit_pages,
       onClick: async () => {
         const { id } = await create();
         closePopup();
@@ -293,13 +323,13 @@ import { __ as __15 } from "@wordpress/i18n";
 // src/components/panel/posts-list/posts-collapsible-list.tsx
 import * as React23 from "react";
 import { PageTypeIcon as PageTypeIcon2 } from "@elementor/icons";
-import { Skeleton, Box as Box4, List as List2 } from "@elementor/ui";
+import { Skeleton, Box as Box4, List as List2, Button as Button4, CircularProgress as CircularProgress5 } from "@elementor/ui";
 
 // src/hooks/use-posts.ts
-import { useQuery as useQuery2 } from "@elementor/query";
+import { useInfiniteQuery } from "@elementor/query";
 
 // src/api/post.ts
-import apiFetch3 from "@wordpress/api-fetch";
+import apiFetch4 from "@wordpress/api-fetch";
 import { __ as __3 } from "@wordpress/i18n";
 var postTypesMap = {
   page: {
@@ -310,21 +340,32 @@ var postTypesMap = {
     rest_base: "pages"
   }
 };
-var getRequest2 = (postTypeSlug) => {
+var POST_PER_PAGE = 10;
+var getRequest2 = async (postTypeSlug, page) => {
   const baseUri = `/wp/v2/${postTypesMap[postTypeSlug].rest_base}`;
-  const keys = ["id", "type", "title", "link", "status"];
+  const keys = ["id", "type", "title", "link", "status", "user_can"];
   const queryParams = new URLSearchParams({
     status: "any",
-    per_page: "-1",
     order: "asc",
+    page: page.toString(),
+    per_page: POST_PER_PAGE.toString(),
     _fields: keys.join(",")
   });
   const uri = baseUri + "?" + queryParams.toString();
-  return apiFetch3({ path: uri });
+  const result = await apiFetch4({ path: uri, parse: false });
+  const data = await result.json();
+  const totalPages = Number(result.headers.get("x-wp-totalpages"));
+  const totalPosts = Number(result.headers.get("x-wp-total"));
+  return {
+    data,
+    totalPages,
+    totalPosts,
+    currentPage: page
+  };
 };
 var createRequest = (postTypeSlug, newPost) => {
   const path = `/wp/v2/${postTypesMap[postTypeSlug].rest_base}`;
-  return apiFetch3({
+  return apiFetch4({
     path,
     method: "POST",
     data: newPost
@@ -333,7 +374,7 @@ var createRequest = (postTypeSlug, newPost) => {
 var updateRequest = (postTypeSlug, updatedPost) => {
   const path = `/wp/v2/${postTypesMap[postTypeSlug].rest_base}`;
   const { id, ...data } = updatedPost;
-  return apiFetch3({
+  return apiFetch4({
     path: `${path}/${id}`,
     method: "POST",
     data
@@ -341,14 +382,14 @@ var updateRequest = (postTypeSlug, updatedPost) => {
 };
 var deleteRequest = (postTypeSlug, postId) => {
   const path = `/wp/v2/${postTypesMap[postTypeSlug].rest_base}`;
-  return apiFetch3({
+  return apiFetch4({
     path: `${path}/${postId}`,
     method: "DELETE"
   });
 };
 var duplicateRequest = (originalPost) => {
   const path = `/elementor/v1/site-navigation/duplicate-post`;
-  return apiFetch3({
+  return apiFetch4({
     path,
     method: "POST",
     data: {
@@ -360,11 +401,26 @@ var duplicateRequest = (originalPost) => {
 
 // src/hooks/use-posts.ts
 var postsQueryKey = (postTypeSlug) => ["site-navigation", "posts", postTypeSlug];
+var flattenData = (data) => {
+  if (!data) {
+    return data;
+  }
+  const flattened = [];
+  data.pages.forEach((page) => {
+    flattened.push(...page.data);
+  });
+  return flattened;
+};
 function usePosts(postTypeSlug) {
-  return useQuery2({
+  const query = useInfiniteQuery({
     queryKey: postsQueryKey(postTypeSlug),
-    queryFn: () => getRequest2(postTypeSlug)
+    queryFn: ({ pageParam = 1 }) => getRequest2(postTypeSlug, pageParam),
+    initialPageParam: 1,
+    getNextPageParam: (lastPage) => {
+      return lastPage.currentPage < lastPage.totalPages ? lastPage.currentPage + 1 : void 0;
+    }
   });
+  return { ...query, data: { posts: flattenData(query.data), total: query.data?.pages[0]?.totalPosts ?? 0 } };
 }
 
 // src/contexts/post-list-context.tsx
@@ -455,7 +511,7 @@ function CollapsibleList({
       unmountOnExit: true
     },
     /* @__PURE__ */ React7.createElement(List, { dense: true }, children)
-  ), /* @__PURE__ */ React7.createElement(Divider2, { sx: { my: 3 } }));
+  ), /* @__PURE__ */ React7.createElement(Divider2, { sx: { mt: 1 } }));
 }
 
 // src/components/panel/posts-list/post-list-item.tsx
@@ -705,6 +761,8 @@ import {
   ListItemButton,
   ListItemText as ListItemText7,
   Menu as Menu2,
+  Tooltip as Tooltip2,
+  Typography as Typography3,
   usePopupState as usePopupState2
 } from "@elementor/ui";
 import { DotsVerticalIcon, HomeIcon as HomeIcon2 } from "@elementor/icons";
@@ -782,6 +840,7 @@ function Rename({ post }) {
       title: __7("Rename", "elementor"),
       icon: EraseIcon,
       MenuItemProps: {
+        disabled: !post.user_can.edit,
         onClick: () => {
           setEditMode({
             mode: "rename",
@@ -801,6 +860,7 @@ import { CopyIcon } from "@elementor/icons";
 import { __ as __8 } from "@wordpress/i18n";
 function Duplicate({ post, popupState }) {
   const { setEditMode } = usePostListContext();
+  const { data: user } = useUser();
   const onClick = () => {
     popupState.close();
     setEditMode({
@@ -811,12 +871,14 @@ function Duplicate({ post, popupState }) {
       }
     });
   };
+  const isDisabled = !user?.capabilities?.edit_pages;
   return /* @__PURE__ */ React15.createElement(
     ActionMenuItem,
     {
       title: __8("Duplicate", "elementor"),
       icon: CopyIcon,
       MenuItemProps: {
+        disabled: isDisabled,
         onClick
       }
     }
@@ -843,13 +905,15 @@ function Delete({ post }) {
   const [isDialogOpen, setIsDialogOpen] = useState5(false);
   const activeDocument = useActiveDocument3();
   const isPostActive = activeDocument?.id === post.id;
+  const userCanDelete = post.user_can.delete;
+  const isDisabled = !userCanDelete || post.isHome || isPostActive;
   return /* @__PURE__ */ React16.createElement(React16.Fragment, null, /* @__PURE__ */ React16.createElement(
     ActionMenuItem,
     {
       title: __9("Delete", "elementor"),
       icon: TrashIcon,
       MenuItemProps: {
-        disabled: post.isHome || isPostActive,
+        disabled: isDisabled,
         onClick: () => setIsDialogOpen(true),
         sx: { "&:hover": { color: "error.main" } }
       }
@@ -917,18 +981,14 @@ import { __ as __11 } from "@wordpress/i18n";
 import { useMutation as useMutation2, useQueryClient as useQueryClient2 } from "@elementor/query";
 
 // src/api/settings.ts
-import apiFetch4 from "@wordpress/api-fetch";
+import apiFetch5 from "@wordpress/api-fetch";
 var getSettings = () => {
-  const baseUri = "/wp/v2/settings";
-  const keys = ["show_on_front", "page_on_front"];
-  const queryParams = new URLSearchParams({
-    _fields: keys.join(",")
-  });
-  const uri = baseUri + "?" + queryParams.toString();
-  return apiFetch4({ path: uri });
+  const baseUri = "/elementor/v1/site-navigation/homepage";
+  const uri = baseUri;
+  return apiFetch5({ path: uri });
 };
 var updateSettings = (settings) => {
-  return apiFetch4({
+  return apiFetch5({
     path: "/wp/v2/settings",
     method: "POST",
     data: settings
@@ -968,6 +1028,7 @@ import { CircularProgress as CircularProgress4 } from "@elementor/ui";
 function SetHome({ post, closeMenu }) {
   const { updateSettingsMutation } = useHomepageActions();
   const { setError } = usePostListContext();
+  const { data: user } = useUser();
   const handleClick = async () => {
     try {
       await updateSettingsMutation.mutateAsync({ show_on_front: "page", page_on_front: post.id });
@@ -977,13 +1038,17 @@ function SetHome({ post, closeMenu }) {
       closeMenu();
     }
   };
+  const canManageOptions = !!user?.capabilities?.manage_options;
+  const isPostPublished = post.status === "publish";
+  const isPostHomepage = !!post.isHome;
+  const isDisabled = !canManageOptions || isPostHomepage || !isPostPublished || updateSettingsMutation.isPending;
   return /* @__PURE__ */ React18.createElement(
     ActionMenuItem,
     {
       title: __11("Set as homepage", "elementor"),
       icon: !updateSettingsMutation.isPending ? HomeIcon : CircularProgress4,
       MenuItemProps: {
-        disabled: !!post.isHome || post.status !== "publish" || updateSettingsMutation.isPending,
+        disabled: isDisabled,
         onClick: handleClick
       }
     }
@@ -992,6 +1057,21 @@ function SetHome({ post, closeMenu }) {
 
 // src/components/panel/posts-list/list-items/list-item-view.tsx
 import { __ as __12 } from "@wordpress/i18n";
+var DisabledPostTooltip = ({ children, isDisabled }) => {
+  if (isDisabled) {
+    const title = /* @__PURE__ */ React19.createElement(Typography3, { variant: "caption" }, "You cannot edit this page.", /* @__PURE__ */ React19.createElement("br", null), "To edit it directly, contact the site owner");
+    return /* @__PURE__ */ React19.createElement(
+      Tooltip2,
+      {
+        title,
+        placement: "bottom",
+        arrow: false
+      },
+      children
+    );
+  }
+  return /* @__PURE__ */ React19.createElement(React19.Fragment, null, children);
+};
 function ListItemView({ post }) {
   const activeDocument = useActiveDocument4();
   const navigateToDocument = useNavigateToDocument5();
@@ -1003,7 +1083,8 @@ function ListItemView({ post }) {
   const isActive = activeDocument?.id === post.id;
   const status = isActive ? activeDocument?.status.value : post.status;
   const title = isActive ? activeDocument?.title : post.title.rendered;
-  return /* @__PURE__ */ React19.createElement(React19.Fragment, null, /* @__PURE__ */ React19.createElement(
+  const isDisabled = !post.user_can.edit;
+  return /* @__PURE__ */ React19.createElement(React19.Fragment, null, /* @__PURE__ */ React19.createElement(DisabledPostTooltip, { isDisabled }, /* @__PURE__ */ React19.createElement(
     ListItem3,
     {
       disablePadding: true,
@@ -1021,6 +1102,7 @@ function ListItemView({ post }) {
       ListItemButton,
       {
         selected: isActive,
+        disabled: isDisabled,
         onClick: () => {
           if (!isActive) {
             navigateToDocument(post.id);
@@ -1028,16 +1110,10 @@ function ListItemView({ post }) {
         },
         dense: true
       },
-      /* @__PURE__ */ React19.createElement(
-        ListItemText7,
-        {
-          disableTypography: true
-        },
-        /* @__PURE__ */ React19.createElement(PageTitleAndStatus, { title, status })
-      ),
+      /* @__PURE__ */ React19.createElement(ListItemText7, { disableTypography: true }, /* @__PURE__ */ React19.createElement(PageTitleAndStatus, { title, status })),
       post.isHome && /* @__PURE__ */ React19.createElement(HomeIcon2, { titleAccess: __12("Homepage", "elementor"), color: "disabled" })
     )
-  ), /* @__PURE__ */ React19.createElement(
+  )), /* @__PURE__ */ React19.createElement(
     Menu2,
     {
       PaperProps: { sx: { mt: 2, width: 200 } },
@@ -1078,11 +1154,13 @@ import { PlusIcon as PlusIcon2 } from "@elementor/icons";
 import { __ as __13 } from "@wordpress/i18n";
 function AddNewButton() {
   const { setEditMode } = usePostListContext();
+  const { data: user } = useUser();
   return /* @__PURE__ */ React21.createElement(
     Button3,
     {
       size: "small",
       startIcon: /* @__PURE__ */ React21.createElement(PlusIcon2, null),
+      disabled: !user?.capabilities?.edit_pages,
       onClick: () => {
         setEditMode({ mode: "create", details: {} });
       },
@@ -1096,7 +1174,7 @@ function AddNewButton() {
 
 // src/components/panel/posts-list/error-state.tsx
 import { Error404TemplateIcon } from "@elementor/icons";
-import { Box as Box3, Link, Typography as Typography3 } from "@elementor/ui";
+import { Box as Box3, Link, Typography as Typography4 } from "@elementor/ui";
 import { __ as __14 } from "@wordpress/i18n";
 import * as React22 from "react";
 function ErrorState() {
@@ -1113,14 +1191,14 @@ function ErrorState() {
     justifyContent: "center",
     alignItems: "center",
     gap: "8px"
-  } }, /* @__PURE__ */ React22.createElement(Typography3, { variant: "body1", color: "text.primary" }, __14("We couldn\u2019t display your pages.", "elementor")), /* @__PURE__ */ React22.createElement(Box3, null, /* @__PURE__ */ React22.createElement(Typography3, { variant: "body2", color: "text.primary", sx: { textAlign: "center" } }, __14("It\u2019s probably a temporary issue.", "elementor")), /* @__PURE__ */ React22.createElement(Typography3, { variant: "body2", color: "text.primary", sx: { textAlign: "center" } }, __14("If the problem persists,", "elementor"), " ", /* @__PURE__ */ React22.createElement(Link, { target: "_blank", href: "https://go.elementor.com/wp-editor-support-open-ticket/" }, "Notify support")))));
+  } }, /* @__PURE__ */ React22.createElement(Typography4, { variant: "body1", color: "text.primary" }, __14("We couldn\u2019t display your pages.", "elementor")), /* @__PURE__ */ React22.createElement(Box3, null, /* @__PURE__ */ React22.createElement(Typography4, { variant: "body2", color: "text.primary", sx: { textAlign: "center" } }, __14("It\u2019s probably a temporary issue.", "elementor")), /* @__PURE__ */ React22.createElement(Typography4, { variant: "body2", color: "text.primary", sx: { textAlign: "center" } }, __14("If the problem persists,", "elementor"), " ", /* @__PURE__ */ React22.createElement(Link, { target: "_blank", href: "https://go.elementor.com/wp-editor-support-open-ticket/" }, "Notify support")))));
 }
 
 // src/components/panel/posts-list/posts-collapsible-list.tsx
 function PostsCollapsibleList({ isOpenByDefault = false }) {
   const { type, editMode } = usePostListContext();
-  const { data: posts, isLoading: postsLoading, isError: postsError } = usePosts(type);
-  const { data: homepageSettings } = useHomepage();
+  const { data: { posts, total }, isLoading: postsLoading, isError: postsError, fetchNextPage, hasNextPage, isFetchingNextPage } = usePosts(type);
+  const { data: homepageId } = useHomepage();
   if (postsError) {
     return /* @__PURE__ */ React23.createElement(ErrorState, null);
   }
@@ -1135,9 +1213,7 @@ function PostsCollapsibleList({ isOpenByDefault = false }) {
       /* @__PURE__ */ React23.createElement(Skeleton, { sx: { my: 4 }, animation: "wave", variant: "rounded", width: "110px", height: "28px" })
     ), /* @__PURE__ */ React23.createElement(Box4, null, /* @__PURE__ */ React23.createElement(Skeleton, { sx: { my: 3 }, animation: "wave", variant: "rounded", width: "100%", height: "24px" }), /* @__PURE__ */ React23.createElement(Skeleton, { sx: { my: 3 }, animation: "wave", variant: "rounded", width: "70%", height: "24px" }), /* @__PURE__ */ React23.createElement(Skeleton, { sx: { my: 3 }, animation: "wave", variant: "rounded", width: "70%", height: "24px" }), /* @__PURE__ */ React23.createElement(Skeleton, { sx: { my: 3 }, animation: "wave", variant: "rounded", width: "70%", height: "24px" })));
   }
-  const label = `${postTypesMap[type].labels.plural_name} (${posts.length.toString()})`;
-  const isHomepageSet = homepageSettings?.show_on_front === "page" && !!homepageSettings?.page_on_front;
-  const homepageId = isHomepageSet ? homepageSettings.page_on_front : null;
+  const label = `${postTypesMap[type].labels.plural_name} (${total.toString()})`;
   const mappedPosts = posts.map((post) => {
     if (post.id === homepageId) {
       return { ...post, isHome: true };
@@ -1175,12 +1251,16 @@ function PostsCollapsibleList({ isOpenByDefault = false }) {
     sortedPosts.map((post) => {
       return /* @__PURE__ */ React23.createElement(PostListItem2, { key: post.id, post });
     }),
-    ["duplicate", "create"].includes(editMode.mode) && /* @__PURE__ */ React23.createElement(PostListItem2, null)
+    ["duplicate", "create"].includes(editMode.mode) && /* @__PURE__ */ React23.createElement(PostListItem2, null),
+    hasNextPage && /* @__PURE__ */ React23.createElement(Box4, { sx: {
+      display: "flex",
+      justifyContent: "center"
+    } }, /* @__PURE__ */ React23.createElement(Button4, { onClick: fetchNextPage, color: "secondary" }, isFetchingNextPage ? /* @__PURE__ */ React23.createElement(CircularProgress5, null) : "Load More"))
   )));
 }
 
 // src/components/panel/error-snackbar.tsx
-import { Snackbar, Alert, Typography as Typography4 } from "@elementor/ui";
+import { Snackbar, Alert, Typography as Typography5 } from "@elementor/ui";
 import * as React24 from "react";
 var ErrorSnackbar = ({ open, onClose }) => {
   return /* @__PURE__ */ React24.createElement(
@@ -1194,7 +1274,7 @@ var ErrorSnackbar = ({ open, onClose }) => {
       }
     },
     /* @__PURE__ */ React24.createElement(Alert, { onClose, severity: "error", sx: { width: "100%" } }, /* @__PURE__ */ React24.createElement(
-      Typography4,
+      Typography5,
       {
         component: "span",
         sx: {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@elementor/editor-site-navigation",
-	"version": "0.19.11",
+	"version": "0.21.0",
 	"private": false,
 	"author": "Elementor Team",
 	"homepage": "https://elementor.com/",
@@ -32,13 +32,13 @@
 		"dev": "tsup --config=../../tsup.dev.ts"
 	},
 	"dependencies": {
-		"@elementor/editor-app-bar": "^0.9.7",
+		"@elementor/editor-app-bar": "^0.9.8",
 		"@elementor/editor-documents": "^0.10.1",
-		"@elementor/editor-panels": "^0.4.6",
+		"@elementor/editor-panels": "^0.4.7",
 		"@elementor/editor-v1-adapters": "^0.6.0",
 		"@elementor/env": "^0.3.2",
 		"@elementor/icons": "^0.7.2",
-		"@elementor/query": "^0.1.6",
+		"@elementor/query": "^0.2.0",
 		"@elementor/ui": "^1.4.61",
 		"@wordpress/api-fetch": "^6.42.0",
 		"@wordpress/i18n": "^4.45.0",
@@ -50,5 +50,5 @@
 	"elementor": {
 		"type": "extension"
 	},
-	"gitHead": "82b8732700123fe0b916a2e7e78d91a55f5bb7e1"
+	"gitHead": "780188b3bf19f2d02edabce30374f89b1fecbc07"
 }

package/src/api/post.ts

@@ -24,21 +24,49 @@ export const postTypesMap = {
 	},
 };
 
-export const getRequest = ( postTypeSlug: Slug ) => {
+export const POST_PER_PAGE = 10;
+
+type WpPostsResponse = {
+	json: () => Promise<Post[]>,
+	headers: {
+		get: ( key: string ) => string | null,
+	},
+}
+
+export type PostsResponse = {
+	data: Post[],
+	totalPages: number,
+	totalPosts: number,
+	currentPage: number,
+};
+
+export const getRequest = async ( postTypeSlug: Slug, page: number ): Promise<PostsResponse> => {
 	const baseUri = `/wp/v2/${ postTypesMap[ postTypeSlug ].rest_base }`;
 
-	const keys: Array<keyof Post> = [ 'id', 'type', 'title', 'link', 'status' ];
+	const keys: Array<keyof Post> = [ 'id', 'type', 'title', 'link', 'status', 'user_can' ];
 
 	const queryParams = new URLSearchParams( {
 		status: 'any',
-		per_page: '-1',
 		order: 'asc',
+		page: page.toString(),
+		per_page: POST_PER_PAGE.toString(),
 		_fields: keys.join( ',' ),
 	} );
 
 	const uri = baseUri + '?' + queryParams.toString();
 
-	return apiFetch<Post[]>( { path: uri } );
+	const result = await apiFetch<WpPostsResponse>( { path: uri, parse: false } );
+	const data = await result.json();
+
+	const totalPages = Number( result.headers.get( 'x-wp-totalpages' ) );
+	const totalPosts = Number( result.headers.get( 'x-wp-total' ) );
+
+	return {
+		data,
+		totalPages,
+		totalPosts,
+		currentPage: page,
+	};
 };
 
 export const createRequest = ( postTypeSlug: Slug, newPost: NewPost ) => {

package/src/api/settings.ts

@@ -5,18 +5,14 @@ export type Settings = {
 	page_on_front: number,
 }
 
-export const getSettings = () => {
-	const baseUri = '/wp/v2/settings';
-
-	const keys: Array<keyof Settings> = [ 'show_on_front', 'page_on_front' ];
+type Homepage = number;
 
-	const queryParams = new URLSearchParams( {
-		_fields: keys.join( ',' ),
-	} );
+export const getSettings = () => {
+	const baseUri = '/elementor/v1/site-navigation/homepage';
 
-	const uri = baseUri + '?' + queryParams.toString();
+	const uri = baseUri;
 
-	return apiFetch<Settings>( { path: uri } );
+	return apiFetch<Homepage>( { path: uri } );
 };
 
 export const updateSettings = ( settings: Settings ) => {

package/src/api/user.ts

@@ -0,0 +1,20 @@
+import apiFetch from '@wordpress/api-fetch';
+
+export type User = {
+  capabilities: Record<string, boolean>,
+}
+
+export const getUser = () => {
+	const baseUri = '/wp/v2/users/me';
+
+	const keys: Array<keyof User> = [ 'capabilities' ];
+
+	const queryParams = new URLSearchParams( {
+		_fields: keys.join( ',' ),
+		context: 'edit',
+	} );
+
+	const uri = baseUri + '?' + queryParams.toString();
+
+	return apiFetch<User>( { path: uri } );
+};

package/src/components/panel/actions-menu/actions/__tests__/delete.test.tsx

@@ -33,6 +33,10 @@ describe( '@elementor/editor-site-navigation/pages-panel-actions - Delete', () =
 			type: 'page',
 			link: 'https://example.local/test-page',
 			isHome: false,
+			user_can: {
+				edit: true,
+				delete: true,
+			},
 		};
 
 		// Act.
@@ -70,6 +74,10 @@ describe( '@elementor/editor-site-navigation/pages-panel-actions - Delete', () =
 			type: 'page',
 			link: 'https://example.local/test-page',
 			isHome: true,
+			user_can: {
+				edit: true,
+				delete: true,
+			},
 		};
 
 		// Act.

package/src/components/panel/actions-menu/actions/__tests__/set-home.test.tsx

@@ -2,6 +2,7 @@ import { fireEvent, render, screen } from '@testing-library/react';
 import SetHome from '../set-home';
 import * as React from 'react';
 import { Post } from '../../../../../types';
+import useUser from '../../../../../hooks/use-user';
 
 const mockMutateAsync = jest.fn();
 jest.mock( '../../../../../hooks/use-homepage-actions', () => ( {
@@ -14,6 +15,15 @@ jest.mock( '../../../../../hooks/use-homepage-actions', () => ( {
 	} ) ),
 } ) );
 
+jest.mock( '../../../../../hooks/use-user', () => (
+	{
+		default: jest.fn( () => ( { isLoading: false, data: { capabilities: {
+			manage_options: true,
+		} } } ) ),
+		__esModule: true,
+	}
+) );
+
 describe( '@elementor/editor-site-navigation - SetHome', () => {
 	afterAll( () => {
 		jest.clearAllMocks();
@@ -30,6 +40,10 @@ describe( '@elementor/editor-site-navigation - SetHome', () => {
 			type: 'page',
 			link: 'https://example.local/test-page',
 			isHome: false,
+			user_can: {
+				edit: true,
+				delete: true,
+			},
 		};
 
 		// Act.
@@ -55,6 +69,44 @@ describe( '@elementor/editor-site-navigation - SetHome', () => {
 			type: 'page',
 			link: 'https://example.local/test-page',
 			isHome: false,
+			user_can: {
+				edit: true,
+				delete: true,
+			},
+		};
+
+		// Act.
+		render( <SetHome post={ post } closeMenu={ () => {} } /> );
+
+		// Assert.
+		const button = screen.getByRole( 'menuitem' );
+		expect( button ).toHaveAttribute( 'aria-disabled', 'true' );
+	} );
+
+	it( 'should render Set as homepage disabled when the user cant manage options', () => {
+		// Arrange.
+		jest.mocked( useUser ).mockReturnValue( {
+			isLoading: false,
+			data: {
+				capabilities: {
+					manage_options: false,
+				},
+			},
+		} as unknown as ReturnType<typeof useUser> );
+
+		const post: Post = {
+			id: 1,
+			title: {
+				rendered: 'Test Page',
+			},
+			status: 'publish',
+			type: 'page',
+			link: 'https://example.local/test-page',
+			isHome: false,
+			user_can: {
+				edit: true,
+				delete: true,
+			},
 		};
 
 		// Act.

package/src/components/panel/actions-menu/actions/__tests__/view.test.tsx

@@ -18,6 +18,10 @@ describe( '@elementor/editor-site-navigation - View', () => {
 			link: 'mocklink',
 			status: 'publish',
 			type: 'page',
+			user_can: {
+				edit: true,
+				delete: true,
+			},
 		};
 
 		// Act.

package/src/components/panel/actions-menu/actions/delete.tsx

@@ -23,6 +23,9 @@ export default function Delete( { post }: { post: Post } ) {
 	const activeDocument = useActiveDocument();
 
 	const isPostActive = activeDocument?.id === post.id;
+	const userCanDelete = post.user_can.delete;
+
+	const isDisabled = ( ! userCanDelete ) || post.isHome || isPostActive;
 
 	return (
 		<>
@@ -31,7 +34,7 @@ export default function Delete( { post }: { post: Post } ) {
 				icon={ TrashIcon }
 				MenuItemProps={
 					{
-						disabled: post.isHome || isPostActive,
+						disabled: isDisabled,
 						onClick: () => setIsDialogOpen( true ),
 						sx: { '&:hover': { color: 'error.main' } },
 					}