@elementor/editor-site-navigation 0.16.0 → 0.17.1

package/CHANGELOG.md

@@ -3,6 +3,25 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.17.1](https://github.com/elementor/elementor-packages/compare/@elementor/editor-site-navigation@0.17.0...@elementor/editor-site-navigation@0.17.1) (2023-08-01)
+
+**Note:** Version bump only for package @elementor/editor-site-navigation
+
+
+
+
+
+# [0.17.0](https://github.com/elementor/elementor-packages/compare/@elementor/editor-site-navigation@0.16.0...@elementor/editor-site-navigation@0.17.0) (2023-07-30)
+
+
+### Features
+
+* **site-navigation:** add set as homepage action to pages panel [ED-10865] ([#97](https://github.com/elementor/elementor-packages/issues/97)) ([e947107](https://github.com/elementor/elementor-packages/commit/e947107f29ae43cc1569820a1f6acd6d60fda38e))
+
+
+
+
+
 # [0.16.0](https://github.com/elementor/elementor-packages/compare/@elementor/editor-site-navigation@0.15.0...@elementor/editor-site-navigation@0.16.0) (2023-07-30)
 
 

package/dist/index.js

@@ -250,7 +250,7 @@ function RecentlyEdited() {
 var import_editor_app_bar = require("@elementor/editor-app-bar");
 
 // src/hooks/use-toggle-button-props.ts
-var import_i18n14 = require("@wordpress/i18n");
+var import_i18n15 = require("@wordpress/i18n");
 var import_icons15 = require("@elementor/icons");
 
 // src/components/panel/panel.ts
@@ -258,14 +258,14 @@ var import_editor_panels2 = require("@elementor/editor-panels");
 
 // src/components/panel/shell.tsx
 var React23 = __toESM(require("react"));
-var import_ui14 = require("@elementor/ui");
+var import_ui15 = require("@elementor/ui");
 var import_editor_panels = require("@elementor/editor-panels");
-var import_i18n13 = require("@wordpress/i18n");
+var import_i18n14 = require("@wordpress/i18n");
 
 // src/components/panel/posts-list/posts-collapsible-list.tsx
 var React21 = __toESM(require("react"));
 var import_icons13 = require("@elementor/icons");
-var import_ui12 = require("@elementor/ui");
+var import_ui13 = require("@elementor/ui");
 
 // src/hooks/use-posts.ts
 var import_query = require("@elementor/query");
@@ -587,7 +587,7 @@ function ListItemDuplicate() {
 
 // src/components/panel/posts-list/list-items/list-item-view.tsx
 var React19 = __toESM(require("react"));
-var import_ui11 = require("@elementor/ui");
+var import_ui12 = require("@elementor/ui");
 var import_icons12 = require("@elementor/icons");
 var import_editor_documents5 = require("@elementor/editor-documents");
 
@@ -777,47 +777,105 @@ function View({ post }) {
 var React18 = __toESM(require("react"));
 var import_icons11 = require("@elementor/icons");
 var import_i18n11 = require("@wordpress/i18n");
+
+// src/hooks/use-homepage-actions.ts
+var import_query4 = require("@elementor/query");
+
+// src/api/settings.ts
+var import_api_fetch4 = __toESM(require("@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 (0, import_api_fetch4.default)({ path: uri });
+};
+var updateSettings = (settings) => {
+  return (0, import_api_fetch4.default)({
+    path: "/wp/v2/settings",
+    method: "POST",
+    data: settings
+  });
+};
+
+// src/hooks/use-homepage.ts
+var import_query3 = require("@elementor/query");
+var settingsQueryKey = () => ["site-navigation", "homepage"];
+function useHomepage() {
+  return (0, import_query3.useQuery)({
+    queryKey: settingsQueryKey(),
+    queryFn: () => getSettings()
+  });
+}
+
+// src/hooks/use-homepage-actions.ts
+function useHomepageActions() {
+  const invalidateSettings = useInvalidateSettings();
+  const onSuccess = async () => invalidateSettings({ exact: true });
+  const updateSettingsMutation = (0, import_query4.useMutation)(
+    (settings) => updateSettings(settings),
+    { onSuccess }
+  );
+  return { updateSettingsMutation };
+}
+function useInvalidateSettings() {
+  const queryClient = (0, import_query4.useQueryClient)();
+  return (options = {}) => {
+    const queryKey = settingsQueryKey();
+    return queryClient.invalidateQueries(queryKey, options);
+  };
+}
+
+// src/components/panel/actions-menu/actions/set-home.tsx
+var import_ui11 = require("@elementor/ui");
 function SetHome({ post }) {
+  const { updateSettingsMutation } = useHomepageActions();
+  const handleClick = () => {
+    updateSettingsMutation.mutateAsync({ show_on_front: "page", page_on_front: post.id });
+  };
   return /* @__PURE__ */ React18.createElement(
     ActionMenuItem,
     {
       title: (0, import_i18n11.__)("Set as homepage", "elementor"),
-      icon: import_icons11.HomeIcon,
+      icon: !updateSettingsMutation.isLoading ? import_icons11.HomeIcon : import_ui11.CircularProgress,
       ListItemButtonProps: {
-        disabled: !!post.isHome,
-        onClick: () => null
+        disabled: !!post.isHome || post.status !== "publish" || updateSettingsMutation.isLoading,
+        onClick: handleClick
       }
     }
   );
 }
 
 // src/components/panel/posts-list/list-items/list-item-view.tsx
+var import_i18n12 = require("@wordpress/i18n");
 function ListItemView({ post }) {
   const activeDocument = (0, import_editor_documents5.useActiveDocument)();
   const navigateToDocument = (0, import_editor_documents5.useNavigateToDocument)();
-  const popupState = (0, import_ui11.usePopupState)({
+  const popupState = (0, import_ui12.usePopupState)({
     variant: "popover",
     popupId: "post-actions",
     disableAutoFocus: true
   });
   const isActive = activeDocument?.id === post.id;
   return /* @__PURE__ */ React19.createElement(React19.Fragment, null, /* @__PURE__ */ React19.createElement(
-    import_ui11.ListItem,
+    import_ui12.ListItem,
     {
       disablePadding: true,
       secondaryAction: /* @__PURE__ */ React19.createElement(
-        import_ui11.ToggleButton,
+        import_ui12.ToggleButton,
         {
           value: true,
           size: "small",
           selected: popupState.isOpen,
-          ...(0, import_ui11.bindTrigger)(popupState)
+          ...(0, import_ui12.bindTrigger)(popupState)
         },
         /* @__PURE__ */ React19.createElement(import_icons12.DotsVerticalIcon, { fontSize: "small" })
       )
     },
     /* @__PURE__ */ React19.createElement(
-      import_ui11.ListItemButton,
+      import_ui12.ListItemButton,
       {
         selected: isActive,
         onClick: () => {
@@ -827,28 +885,28 @@ function ListItemView({ post }) {
         },
         dense: true
       },
-      /* @__PURE__ */ React19.createElement(import_ui11.ListItemIcon, null),
+      /* @__PURE__ */ React19.createElement(import_ui12.ListItemIcon, null),
       /* @__PURE__ */ React19.createElement(
-        import_ui11.ListItemText,
+        import_ui12.ListItemText,
         {
           disableTypography: true
         },
         /* @__PURE__ */ React19.createElement(PageTitleAndStatus, { page: post })
       ),
-      post.isHome && /* @__PURE__ */ React19.createElement(import_ui11.ListItemIcon, null, /* @__PURE__ */ React19.createElement(import_icons12.HomeIcon, { color: "disabled" }))
+      post.isHome && /* @__PURE__ */ React19.createElement(import_ui12.ListItemIcon, null, /* @__PURE__ */ React19.createElement(import_icons12.HomeIcon, { titleAccess: (0, import_i18n12.__)("Homepage", "elementor"), color: "disabled" }))
     )
   ), /* @__PURE__ */ React19.createElement(
-    import_ui11.Menu,
+    import_ui12.Menu,
     {
       PaperProps: { sx: { mt: 4, width: 200 } },
       MenuListProps: { dense: true },
-      ...(0, import_ui11.bindMenu)(popupState)
+      ...(0, import_ui12.bindMenu)(popupState)
     },
     /* @__PURE__ */ React19.createElement(Rename, { post }),
     /* @__PURE__ */ React19.createElement(Duplicate, { post, popupState }),
     /* @__PURE__ */ React19.createElement(Delete, { post }),
     /* @__PURE__ */ React19.createElement(View, { post }),
-    /* @__PURE__ */ React19.createElement(import_ui11.Divider, null),
+    /* @__PURE__ */ React19.createElement(import_ui12.Divider, null),
     /* @__PURE__ */ React19.createElement(SetHome, { post })
   ));
 }
@@ -875,31 +933,37 @@ function PostListItem2({ post }) {
 function PostsCollapsibleList({ isOpenByDefault = false }) {
   const { type, editMode } = usePostListContext();
   const { data: posts, isLoading: postsLoading } = usePosts(type);
+  const { data: homepageSettings } = useHomepage();
   if (!posts || postsLoading) {
-    return /* @__PURE__ */ React21.createElement(import_ui12.Box, { spacing: 4, sx: { px: 6 } }, /* @__PURE__ */ React21.createElement(import_ui12.Skeleton, { variant: "text", sx: { fontSize: "2rem" } }), /* @__PURE__ */ React21.createElement(import_ui12.Skeleton, { variant: "rounded", width: "100%", height: "48" }));
+    return /* @__PURE__ */ React21.createElement(import_ui13.Box, { spacing: 4, sx: { px: 6 } }, /* @__PURE__ */ React21.createElement(import_ui13.Skeleton, { variant: "text", sx: { fontSize: "2rem" } }), /* @__PURE__ */ React21.createElement(import_ui13.Skeleton, { variant: "rounded", width: "100%", height: "48" }));
   }
   const label = `${postTypesMap[type].labels.plural_name} (${posts.length.toString()})`;
-  return /* @__PURE__ */ React21.createElement(import_ui12.List, { dense: true }, /* @__PURE__ */ React21.createElement(
+  const isHomepageSet = homepageSettings?.show_on_front === "page" && !!homepageSettings?.page_on_front;
+  const homepageId = isHomepageSet ? homepageSettings.page_on_front : null;
+  return /* @__PURE__ */ React21.createElement(import_ui13.List, { dense: true }, /* @__PURE__ */ React21.createElement(
     CollapsibleList,
     {
       label,
       Icon: import_icons13.PageTypeIcon,
       isOpenByDefault: isOpenByDefault || false
     },
-    posts.map((post) => /* @__PURE__ */ React21.createElement(PostListItem2, { key: post.id, post })),
+    posts.map((post) => {
+      post = { ...post, isHome: post.id === homepageId };
+      return /* @__PURE__ */ React21.createElement(PostListItem2, { key: post.id, post });
+    }),
     ["duplicate", "create"].includes(editMode.mode) && /* @__PURE__ */ React21.createElement(PostListItem2, null)
   ));
 }
 
 // src/components/panel/add-new-button.tsx
 var React22 = __toESM(require("react"));
-var import_ui13 = require("@elementor/ui");
+var import_ui14 = require("@elementor/ui");
 var import_icons14 = require("@elementor/icons");
-var import_i18n12 = require("@wordpress/i18n");
+var import_i18n13 = require("@wordpress/i18n");
 function AddNewButton() {
   const { setEditMode } = usePostListContext();
   return /* @__PURE__ */ React22.createElement(
-    import_ui13.Button,
+    import_ui14.Button,
     {
       size: "small",
       sx: { mt: 4, mb: 4, mr: 5 },
@@ -908,14 +972,14 @@ function AddNewButton() {
         setEditMode({ mode: "create", details: {} });
       }
     },
-    (0, import_i18n12.__)("Add New", "elementor")
+    (0, import_i18n13.__)("Add New", "elementor")
   );
 }
 
 // src/components/panel/shell.tsx
 var Shell = () => {
-  return /* @__PURE__ */ React23.createElement(import_editor_panels.Panel, null, /* @__PURE__ */ React23.createElement(import_editor_panels.PanelHeader, null, /* @__PURE__ */ React23.createElement(import_editor_panels.PanelHeaderTitle, null, (0, import_i18n13.__)("Pages", "elementor"))), /* @__PURE__ */ React23.createElement(import_editor_panels.PanelBody, null, /* @__PURE__ */ React23.createElement(PostListContextProvider, { type: "page" }, /* @__PURE__ */ React23.createElement(
-    import_ui14.Box,
+  return /* @__PURE__ */ React23.createElement(import_editor_panels.Panel, null, /* @__PURE__ */ React23.createElement(import_editor_panels.PanelHeader, null, /* @__PURE__ */ React23.createElement(import_editor_panels.PanelHeaderTitle, null, (0, import_i18n14.__)("Pages", "elementor"))), /* @__PURE__ */ React23.createElement(import_editor_panels.PanelBody, null, /* @__PURE__ */ React23.createElement(PostListContextProvider, { type: "page" }, /* @__PURE__ */ React23.createElement(
+    import_ui15.Box,
     {
       display: "flex",
       justifyContent: "flex-end",
@@ -941,7 +1005,7 @@ function useToggleButtonProps() {
   const { isOpen, isBlocked } = usePanelStatus();
   const { open, close } = usePanelActions();
   return {
-    title: (0, import_i18n14.__)("Pages", "elementor"),
+    title: (0, import_i18n15.__)("Pages", "elementor"),
     icon: import_icons15.PagesIcon,
     onClick: () => isOpen ? close() : open(),
     selected: isOpen,

package/dist/index.mjs

@@ -232,7 +232,7 @@ function RecentlyEdited() {
 import { injectIntoPageIndication, toolsMenu } from "@elementor/editor-app-bar";
 
 // src/hooks/use-toggle-button-props.ts
-import { __ as __14 } from "@wordpress/i18n";
+import { __ as __15 } from "@wordpress/i18n";
 import { PagesIcon } from "@elementor/icons";
 
 // src/components/panel/panel.ts
@@ -242,7 +242,7 @@ import { createPanel } from "@elementor/editor-panels";
 import * as React23 from "react";
 import { Box as Box5 } from "@elementor/ui";
 import { Panel, PanelBody, PanelHeader, PanelHeaderTitle } from "@elementor/editor-panels";
-import { __ as __13 } from "@wordpress/i18n";
+import { __ as __14 } from "@wordpress/i18n";
 
 // src/components/panel/posts-list/posts-collapsible-list.tsx
 import * as React21 from "react";
@@ -786,21 +786,79 @@ function View({ post }) {
 import * as React18 from "react";
 import { HomeIcon } from "@elementor/icons";
 import { __ as __11 } from "@wordpress/i18n";
+
+// src/hooks/use-homepage-actions.ts
+import { useMutation as useMutation2, useQueryClient as useQueryClient2 } from "@elementor/query";
+
+// src/api/settings.ts
+import apiFetch4 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 });
+};
+var updateSettings = (settings) => {
+  return apiFetch4({
+    path: "/wp/v2/settings",
+    method: "POST",
+    data: settings
+  });
+};
+
+// src/hooks/use-homepage.ts
+import { useQuery as useQuery2 } from "@elementor/query";
+var settingsQueryKey = () => ["site-navigation", "homepage"];
+function useHomepage() {
+  return useQuery2({
+    queryKey: settingsQueryKey(),
+    queryFn: () => getSettings()
+  });
+}
+
+// src/hooks/use-homepage-actions.ts
+function useHomepageActions() {
+  const invalidateSettings = useInvalidateSettings();
+  const onSuccess = async () => invalidateSettings({ exact: true });
+  const updateSettingsMutation = useMutation2(
+    (settings) => updateSettings(settings),
+    { onSuccess }
+  );
+  return { updateSettingsMutation };
+}
+function useInvalidateSettings() {
+  const queryClient = useQueryClient2();
+  return (options = {}) => {
+    const queryKey = settingsQueryKey();
+    return queryClient.invalidateQueries(queryKey, options);
+  };
+}
+
+// src/components/panel/actions-menu/actions/set-home.tsx
+import { CircularProgress as CircularProgress4 } from "@elementor/ui";
 function SetHome({ post }) {
+  const { updateSettingsMutation } = useHomepageActions();
+  const handleClick = () => {
+    updateSettingsMutation.mutateAsync({ show_on_front: "page", page_on_front: post.id });
+  };
   return /* @__PURE__ */ React18.createElement(
     ActionMenuItem,
     {
       title: __11("Set as homepage", "elementor"),
-      icon: HomeIcon,
+      icon: !updateSettingsMutation.isLoading ? HomeIcon : CircularProgress4,
       ListItemButtonProps: {
-        disabled: !!post.isHome,
-        onClick: () => null
+        disabled: !!post.isHome || post.status !== "publish" || updateSettingsMutation.isLoading,
+        onClick: handleClick
       }
     }
   );
 }
 
 // src/components/panel/posts-list/list-items/list-item-view.tsx
+import { __ as __12 } from "@wordpress/i18n";
 function ListItemView({ post }) {
   const activeDocument = useActiveDocument3();
   const navigateToDocument = useNavigateToDocument3();
@@ -844,7 +902,7 @@ function ListItemView({ post }) {
         },
         /* @__PURE__ */ React19.createElement(PageTitleAndStatus, { page: post })
       ),
-      post.isHome && /* @__PURE__ */ React19.createElement(ListItemIcon5, null, /* @__PURE__ */ React19.createElement(HomeIcon2, { color: "disabled" }))
+      post.isHome && /* @__PURE__ */ React19.createElement(ListItemIcon5, null, /* @__PURE__ */ React19.createElement(HomeIcon2, { titleAccess: __12("Homepage", "elementor"), color: "disabled" }))
     )
   ), /* @__PURE__ */ React19.createElement(
     Menu2,
@@ -884,10 +942,13 @@ function PostListItem2({ post }) {
 function PostsCollapsibleList({ isOpenByDefault = false }) {
   const { type, editMode } = usePostListContext();
   const { data: posts, isLoading: postsLoading } = usePosts(type);
+  const { data: homepageSettings } = useHomepage();
   if (!posts || postsLoading) {
     return /* @__PURE__ */ React21.createElement(Box4, { spacing: 4, sx: { px: 6 } }, /* @__PURE__ */ React21.createElement(Skeleton, { variant: "text", sx: { fontSize: "2rem" } }), /* @__PURE__ */ React21.createElement(Skeleton, { variant: "rounded", width: "100%", height: "48" }));
   }
   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;
   return /* @__PURE__ */ React21.createElement(List2, { dense: true }, /* @__PURE__ */ React21.createElement(
     CollapsibleList,
     {
@@ -895,7 +956,10 @@ function PostsCollapsibleList({ isOpenByDefault = false }) {
       Icon: PageTypeIcon2,
       isOpenByDefault: isOpenByDefault || false
     },
-    posts.map((post) => /* @__PURE__ */ React21.createElement(PostListItem2, { key: post.id, post })),
+    posts.map((post) => {
+      post = { ...post, isHome: post.id === homepageId };
+      return /* @__PURE__ */ React21.createElement(PostListItem2, { key: post.id, post });
+    }),
     ["duplicate", "create"].includes(editMode.mode) && /* @__PURE__ */ React21.createElement(PostListItem2, null)
   ));
 }
@@ -904,7 +968,7 @@ function PostsCollapsibleList({ isOpenByDefault = false }) {
 import * as React22 from "react";
 import { Button as Button3 } from "@elementor/ui";
 import { PlusIcon as PlusIcon2 } from "@elementor/icons";
-import { __ as __12 } from "@wordpress/i18n";
+import { __ as __13 } from "@wordpress/i18n";
 function AddNewButton() {
   const { setEditMode } = usePostListContext();
   return /* @__PURE__ */ React22.createElement(
@@ -917,13 +981,13 @@ function AddNewButton() {
         setEditMode({ mode: "create", details: {} });
       }
     },
-    __12("Add New", "elementor")
+    __13("Add New", "elementor")
   );
 }
 
 // src/components/panel/shell.tsx
 var Shell = () => {
-  return /* @__PURE__ */ React23.createElement(Panel, null, /* @__PURE__ */ React23.createElement(PanelHeader, null, /* @__PURE__ */ React23.createElement(PanelHeaderTitle, null, __13("Pages", "elementor"))), /* @__PURE__ */ React23.createElement(PanelBody, null, /* @__PURE__ */ React23.createElement(PostListContextProvider, { type: "page" }, /* @__PURE__ */ React23.createElement(
+  return /* @__PURE__ */ React23.createElement(Panel, null, /* @__PURE__ */ React23.createElement(PanelHeader, null, /* @__PURE__ */ React23.createElement(PanelHeaderTitle, null, __14("Pages", "elementor"))), /* @__PURE__ */ React23.createElement(PanelBody, null, /* @__PURE__ */ React23.createElement(PostListContextProvider, { type: "page" }, /* @__PURE__ */ React23.createElement(
     Box5,
     {
       display: "flex",
@@ -950,7 +1014,7 @@ function useToggleButtonProps() {
   const { isOpen, isBlocked } = usePanelStatus();
   const { open, close } = usePanelActions();
   return {
-    title: __14("Pages", "elementor"),
+    title: __15("Pages", "elementor"),
     icon: PagesIcon,
     onClick: () => isOpen ? close() : open(),
     selected: isOpen,

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@elementor/editor-site-navigation",
-	"version": "0.16.0",
+	"version": "0.17.1",
 	"private": false,
 	"author": "Elementor Team",
 	"homepage": "https://elementor.com/",
@@ -32,11 +32,11 @@
 		"dev": "tsup --config=../../tsup.dev.ts"
 	},
 	"dependencies": {
-		"@elementor/editor-app-bar": "^0.6.9",
+		"@elementor/editor-app-bar": "^0.7.0",
 		"@elementor/editor-documents": "^0.8.3",
-		"@elementor/editor-panels": "^0.1.5",
+		"@elementor/editor-panels": "^0.1.6",
 		"@elementor/env": "^0.2.0",
-		"@elementor/icons": "^0.6.1",
+		"@elementor/icons": "^0.7.0",
 		"@elementor/query": "^0.1.1",
 		"@elementor/ui": "^1.4.53",
 		"@wordpress/api-fetch": "^6.33.0",
@@ -49,5 +49,5 @@
 	"elementor": {
 		"type": "extension"
 	},
-	"gitHead": "673479dfda4fe5feae87a229e7b371b8fb19c0ee"
+	"gitHead": "3a35a0487b8a72853b7f307fed47fd72ea311d06"
 }

package/src/api/settings.ts

@@ -0,0 +1,28 @@
+import apiFetch from '@wordpress/api-fetch';
+
+export type Settings = {
+	show_on_front: 'page' | '',
+	page_on_front: number,
+}
+
+export const getSettings = () => {
+	const baseUri = '/wp/v2/settings';
+
+	const keys: Array<keyof Settings> = [ 'show_on_front', 'page_on_front' ];
+
+	const queryParams = new URLSearchParams( {
+		_fields: keys.join( ',' ),
+	} );
+
+	const uri = baseUri + '?' + queryParams.toString();
+
+	return apiFetch<Settings>( { path: uri } );
+};
+
+export const updateSettings = ( settings: Settings ) => {
+	return apiFetch( {
+		path: '/wp/v2/settings',
+		method: 'POST',
+		data: settings,
+	} );
+};

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

@@ -0,0 +1,67 @@
+import { fireEvent, render, screen } from '@testing-library/react';
+import SetHome from '../set-home';
+import * as React from 'react';
+import { Post } from '../../../../../types';
+
+const mockMutateAsync = jest.fn();
+jest.mock( '../../../../../hooks/use-homepage-actions', () => ( {
+	__esModule: true,
+	useHomepageActions: jest.fn( () => ( {
+		updateSettingsMutation: {
+			mutateAsync: mockMutateAsync,
+			isLoading: false,
+		},
+	} ) ),
+} ) );
+
+describe( '@elementor/editor-site-navigation - SetHome', () => {
+	afterAll( () => {
+		jest.clearAllMocks();
+	} );
+
+	it( 'should render Set as homepage', () => {
+		// Arrange.
+		const post: Post = {
+			id: 1,
+			title: {
+				rendered: 'Test Page',
+			},
+			status: 'publish',
+			type: 'page',
+			link: 'https://example.local/test-page',
+			isHome: false,
+		};
+
+		// Act.
+		render( <SetHome post={ post } /> );
+
+		// Assert.
+		const button = screen.getByRole( 'button' );
+		expect( button ).not.toHaveAttribute( 'aria-disabled' );
+
+		fireEvent.click( button );
+
+		expect( mockMutateAsync ).toHaveBeenCalledTimes( 1 );
+	} );
+
+	it( 'should render Set as homepage disabled when the page status is draft', () => {
+		// Arrange.
+		const post: Post = {
+			id: 1,
+			title: {
+				rendered: 'Test Page',
+			},
+			status: 'draft',
+			type: 'page',
+			link: 'https://example.local/test-page',
+			isHome: false,
+		};
+
+		// Act.
+		render( <SetHome post={ post } /> );
+
+		// Assert.
+		const button = screen.getByRole( 'button' );
+		expect( button ).toHaveAttribute( 'aria-disabled', 'true' );
+	} );
+} );

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

@@ -3,16 +3,24 @@ import { Post } from '../../../../types';
 import { HomeIcon } from '@elementor/icons';
 import { __ } from '@wordpress/i18n';
 import ActionMenuItem from '../action-menu-item';
+import { useHomepageActions } from '../../../../hooks/use-homepage-actions';
+import { CircularProgress } from '@elementor/ui';
 
 export default function SetHome( { post }: { post: Post } ) {
+	const { updateSettingsMutation } = useHomepageActions();
+
+	const handleClick = () => {
+		updateSettingsMutation.mutateAsync( { show_on_front: 'page', page_on_front: post.id } );
+	};
+
 	return (
 		<ActionMenuItem
 			title={ __( 'Set as homepage', 'elementor' ) }
-			icon={ HomeIcon }
+			icon={ ! updateSettingsMutation.isLoading ? HomeIcon : CircularProgress }
 			ListItemButtonProps={
 				{
-					disabled: !! post.isHome,
-					onClick: () => null,
+					disabled: !! post.isHome || post.status !== 'publish' || updateSettingsMutation.isLoading,
+					onClick: handleClick,
 				}
 			}
 		/>

package/src/components/panel/posts-list/__tests__/posts-collapsible-list.test.tsx

@@ -8,13 +8,23 @@ jest.mock( '../../../../hooks/use-posts', () => ( {
 	usePosts: jest.fn( () => ( {
 		isLoading: false,
 		data: [
-			{ id: 1, type: 'page', title: { rendered: 'Home' }, status: 'draft', link: 'www.test.demo' },
-			{ id: 2, type: 'page', title: { rendered: 'About' }, status: 'publish', link: 'www.test.demo' },
-			{ id: 3, type: 'page', title: { rendered: 'Services' }, status: 'publish', link: 'www.test.demo', isHome: true },
+			{ id: 1, type: 'page', title: { rendered: 'Home' }, status: 'publish', link: 'www.test.demo' },
+			{ id: 2, type: 'page', title: { rendered: 'About' }, status: 'draft', link: 'www.test.demo' },
 		],
 	} ) ),
 } ) );
 
+jest.mock( '../../../../hooks/use-homepage', () => ( {
+	__esModule: true,
+	useHomepage: jest.fn( () => ( {
+		isLoading: false,
+		data: {
+			show_on_front: 'page',
+			page_on_front: 1,
+		},
+	} ) ),
+} ) );
+
 jest.mock( '@elementor/editor-documents', () => ( {
 	__esModule: true,
 	useActiveDocument: jest.fn( () => ( {
@@ -33,22 +43,27 @@ describe( '@elementor/editor-site-navigation - PostsCollapsibleList', () => {
 		renderWithQuery( <PostsCollapsibleList isOpenByDefault={ false } /> );
 
 		// Assert.
-		const label = screen.getByText( `Pages (3)` );
+		const label = screen.getByText( `Pages (2)` );
 		expect( label ).toBeInTheDocument();
 
-		const postInList = screen.queryByText( 'Services' );
+		const postInList = screen.queryByText( 'Home' );
 		expect( postInList ).not.toBeInTheDocument();
 	} );
 
-	it( 'should render open list', () => {
+	it( 'should render open list with home icon and page status', () => {
 		// Act.
 		renderWithQuery( <PostsCollapsibleList isOpenByDefault={ true } /> );
 
 		// Assert.
-		const label = screen.getByText( `Pages (3)` );
-		expect( label ).toBeInTheDocument();
+		const items = screen.getAllByRole( 'listitem' );
+
+		expect( items.length ).toBe( 3 );
 
-		const postInList = screen.getByText( 'Services' );
-		expect( postInList ).toBeInTheDocument();
+		// First item is the list title.
+		expect( items[ 0 ] ).toHaveTextContent( `Pages (2)` );
+		expect( items[ 1 ] ).toHaveTextContent( 'Home' );
+		expect( items[ 1 ] ).toHaveTextContent( 'Homepage' ); // Home icon.
+		expect( items[ 2 ] ).toHaveTextContent( 'About' );
+		expect( items[ 2 ] ).toHaveTextContent( '(draft)' );
 	} );
 } );

package/src/components/panel/posts-list/list-items/list-item-view.tsx

@@ -20,6 +20,7 @@ import Delete from '../../actions-menu/actions/delete';
 import View from '../../actions-menu/actions/view';
 import SetHome from '../../actions-menu/actions/set-home';
 import { Post } from '../../../../types';
+import { __ } from '@wordpress/i18n';
 
 export default function ListItemView( { post }: { post: Post } ) {
 	const activeDocument = useActiveDocument();
@@ -65,7 +66,7 @@ export default function ListItemView( { post }: { post: Post } ) {
 					</ListItemText>
 					{ post.isHome &&
 						<ListItemIcon>
-							<HomeIcon color="disabled" />
+							<HomeIcon titleAccess={ __( 'Homepage', 'elementor' ) } color="disabled" />
 						</ListItemIcon>
 					}
 				</ListItemButton>

package/src/components/panel/posts-list/posts-collapsible-list.tsx

@@ -6,6 +6,7 @@ import { usePostListContext } from '../../../contexts/post-list-context';
 import { postTypesMap } from '../../../api/post';
 import CollapsibleList from './collapsible-list';
 import PostListItem from './post-list-item';
+import { useHomepage } from '../../../hooks/use-homepage';
 
 type Props = {
 	isOpenByDefault?: boolean,
@@ -14,6 +15,7 @@ type Props = {
 export default function PostsCollapsibleList( { isOpenByDefault = false }: Props ) {
 	const { type, editMode } = usePostListContext();
 	const { data: posts, isLoading: postsLoading } = usePosts( type );
+	const { data: homepageSettings } = useHomepage();
 
 	if ( ! posts || postsLoading ) {
 		return (
@@ -26,6 +28,9 @@ export default function PostsCollapsibleList( { isOpenByDefault = false }: Props
 
 	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;
+
 	return (
 		<List dense>
 			<CollapsibleList
@@ -33,7 +38,10 @@ export default function PostsCollapsibleList( { isOpenByDefault = false }: Props
 				Icon={ PageTypeIcon }
 				isOpenByDefault={ isOpenByDefault || false }
 			>
-				{ posts.map( ( post ) => <PostListItem key={ post.id } post={ post } /> ) }
+				{ posts.map( ( post ) => {
+					post = { ...post, isHome: post.id === homepageId };
+					return <PostListItem key={ post.id } post={ post } />;
+				} ) }
 				{
 					[ 'duplicate', 'create' ].includes( editMode.mode ) &&
 						<PostListItem />

package/src/hooks/__tests__/use-homepage-actions.test.ts

@@ -0,0 +1,43 @@
+import apiFetch from '@wordpress/api-fetch';
+import { renderHookWithQuery } from 'test-utils';
+import { useHomepageActions } from '../use-homepage-actions';
+import { settingsQueryKey } from '../use-homepage';
+
+jest.mock( '@wordpress/api-fetch' );
+
+describe( '@elementor/site-settings/use-homepage-actions', () => {
+	beforeEach( () => {
+		jest.mocked( apiFetch ).mockImplementation( () => Promise.resolve( {} ) );
+	} );
+
+	afterEach( () => {
+		jest.clearAllMocks();
+	} );
+
+	it( 'should run updateSettings from useHomepageActions hook', async () => {
+		// Arrange.
+		const { component, queryClient } = renderHookWithQuery( () => useHomepageActions() );
+		const { updateSettingsMutation } = component.result.current;
+
+		const queryKey = settingsQueryKey();
+		await queryClient.setQueryData( queryKey, {
+			show_on_front: '',
+			page_on_front: 0,
+		} );
+
+		// Act.
+		await updateSettingsMutation.mutateAsync( { show_on_front: 'page', page_on_front: 1 } );
+
+		expect( apiFetch ).toHaveBeenCalledTimes( 1 );
+		expect( apiFetch ).toHaveBeenCalledWith( {
+			path: '/wp/v2/settings',
+			method: 'POST',
+			data: {
+				show_on_front: 'page',
+				page_on_front: 1,
+			},
+		} );
+
+		expect( queryClient.getQueryState( queryKey )?.isInvalidated ).toBe( true );
+	} );
+} );

package/src/hooks/__tests__/use-homepage.test.ts

@@ -0,0 +1,42 @@
+import { waitFor } from '@testing-library/react';
+import apiFetch from '@wordpress/api-fetch';
+import { useHomepage } from '../use-homepage';
+import { renderHookWithQuery } from 'test-utils';
+
+jest.mock( '@wordpress/api-fetch' );
+
+describe( '@elementor/site-settings/use-homepage', () => {
+	beforeEach( () => {
+		jest.mocked( apiFetch ).mockImplementation( () => Promise.resolve( [] ) );
+	} );
+
+	afterEach( () => {
+		jest.clearAllMocks();
+	} );
+
+	it( 'useHomepage hook should return homepage settings', async () => {
+		// Arrange.
+		const settings = {
+			show_on_front: 'page',
+			page_on_front: 1,
+		};
+		jest.mocked( apiFetch ).mockImplementation( () => Promise.resolve( settings ) );
+
+		// Act.
+		const { component } = renderHookWithQuery( () => useHomepage() );
+
+		// Assert.
+		const expectedPath = `/wp/v2/settings?_fields=${ encodeURIComponent( 'show_on_front,page_on_front' ) }`;
+
+		expect( apiFetch ).toHaveBeenCalledWith( {
+			path: expectedPath,
+		} );
+		expect( apiFetch ).toHaveBeenCalledTimes( 1 );
+
+		await waitFor( () => {
+			return component.result.current.isSuccess;
+		} );
+
+		expect( component.result.current.data ).toBe( settings );
+	} );
+} );

package/src/hooks/use-homepage-actions.ts

@@ -0,0 +1,26 @@
+import { useMutation, useQueryClient } from '@elementor/query';
+import { Settings, updateSettings } from '../api/settings';
+import { settingsQueryKey } from './use-homepage';
+
+export function useHomepageActions() {
+	const invalidateSettings = useInvalidateSettings();
+
+	const onSuccess = async () => invalidateSettings( { exact: true } );
+
+	const updateSettingsMutation = useMutation(
+		( settings: Settings ) => updateSettings( settings ),
+		{ onSuccess }
+	);
+
+	return { updateSettingsMutation };
+}
+
+function useInvalidateSettings() {
+	const queryClient = useQueryClient();
+
+	return ( options = {} ) => {
+		const queryKey = settingsQueryKey();
+
+		return queryClient.invalidateQueries( queryKey, options );
+	};
+}

package/src/hooks/use-homepage.ts

@@ -0,0 +1,11 @@
+import { useQuery } from '@elementor/query';
+import { getSettings } from '../api/settings';
+
+export const settingsQueryKey = () => [ 'site-navigation', 'homepage' ];
+
+export function useHomepage( ) {
+	return useQuery( {
+		queryKey: settingsQueryKey(),
+		queryFn: () => getSettings(),
+	} );
+}

package/src/types.ts

@@ -8,13 +8,3 @@ export type Post = {
 		rendered: string;
 	}
 };
-
-export type PostType = {
-	name: string;
-	slug: string;
-	labels: Record<string, string>;
-	rest_base: string;
-	rest_namespace: string;
-}
-
-export type NonNullableQueryResponse<T> = T extends { data: infer U } ? T & { data: NonNullable<U> } : T;