@elementor/editor-site-navigation 0.9.2 → 0.10.0

package/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [0.10.0](https://github.com/elementor/elementor-packages/compare/@elementor/editor-site-navigation@0.9.2...@elementor/editor-site-navigation@0.10.0) (2023-07-02)
+
+
+### Features
+
+* **site-navigation:** add data fetching with react query [ED-10872] ([#68](https://github.com/elementor/elementor-packages/issues/68)) ([b6ae743](https://github.com/elementor/elementor-packages/commit/b6ae7437b7f162b21898d52164d0b04769d52bb9))
+
+
+
+
+
 ## [0.9.2](https://github.com/elementor/elementor-packages/compare/@elementor/editor-site-navigation@0.9.1...@elementor/editor-site-navigation@0.9.2) (2023-06-29)
 
 **Note:** Version bump only for package @elementor/editor-site-navigation

package/dist/index.js

@@ -250,16 +250,15 @@ function RecentlyEdited() {
 var import_editor_app_bar = require("@elementor/editor-app-bar");
 
 // src/hooks/useToggleButtonProps.ts
-var import_i18n9 = require("@wordpress/i18n");
+var import_i18n10 = require("@wordpress/i18n");
 var import_icons14 = require("@elementor/icons");
 
 // src/components/panel/panel.ts
 var import_editor_panels2 = require("@elementor/editor-panels");
 
 // src/components/panel/shell.tsx
-var React18 = __toESM(require("react"));
-var import_ui12 = require("@elementor/ui");
-var import_icons13 = require("@elementor/icons");
+var React19 = __toESM(require("react"));
+var import_ui14 = require("@elementor/ui");
 var import_editor_panels = require("@elementor/editor-panels");
 
 // src/components/panel/pages-list/pages-collapsible-list.tsx
@@ -306,6 +305,7 @@ function CollapsibleList({
 
 // src/components/panel/pages-list/pages-collapsible-list.tsx
 var import_icons12 = require("@elementor/icons");
+var import_ui12 = require("@elementor/ui");
 
 // src/components/panel/pages-list/page-list-item.tsx
 var React16 = __toESM(require("react"));
@@ -353,7 +353,7 @@ var PageTitle = ({ title }) => {
   );
 };
 function PageTitleAndStatus({ page }) {
-  return /* @__PURE__ */ React7.createElement(import_ui7.Box, { display: "flex" }, /* @__PURE__ */ React7.createElement(PageTitle, { title: page.title }), "\xA0", /* @__PURE__ */ React7.createElement(PageStatus, { status: page.status }));
+  return /* @__PURE__ */ React7.createElement(import_ui7.Box, { display: "flex" }, /* @__PURE__ */ React7.createElement(PageTitle, { title: page.title.rendered }), "\xA0", /* @__PURE__ */ React7.createElement(PageStatus, { status: page.status }));
 }
 
 // src/components/panel/actions-menu/page-actions-menu.tsx
@@ -529,9 +529,43 @@ function PageListItem({ page }) {
   ), /* @__PURE__ */ React16.createElement(PageActionsMenu, { page, ...(0, import_ui11.bindMenu)(popupState) }));
 }
 
+// src/hooks/use-posts.ts
+var import_query = require("@elementor/query");
+
+// src/api/post.ts
+var import_api_fetch3 = __toESM(require("@wordpress/api-fetch"));
+var postTypesMap = {
+  page: "pages"
+};
+var getRequest = (postTypeSlug) => {
+  const baseUri = `/wp/v2/${postTypesMap[postTypeSlug]}`;
+  const keys = ["id", "type", "title", "link", "status"];
+  const queryParams = new URLSearchParams({
+    status: "any",
+    per_page: "-1",
+    _fields: keys.join(",")
+  });
+  const uri = baseUri + "?" + queryParams.toString();
+  return (0, import_api_fetch3.default)({ path: uri });
+};
+
+// src/hooks/use-posts.ts
+var postsQueryKey = (postTypeSlug) => ["site-navigation", "posts", postTypeSlug];
+function usePosts(postTypeSlug) {
+  return (0, import_query.useQuery)({
+    queryKey: postsQueryKey(postTypeSlug),
+    queryFn: () => getRequest(postTypeSlug)
+  });
+}
+
 // src/components/panel/pages-list/pages-collapsible-list.tsx
-function PagesCollapsibleList({ pages, isOpenByDefault = false }) {
-  const label = `Pages (${pages.length})`;
+var import_i18n8 = require("@wordpress/i18n");
+function PagesCollapsibleList({ isOpenByDefault = false }) {
+  const { data: pages, isLoading: pagesLoading } = usePosts("page");
+  if (!pages || pagesLoading) {
+    return /* @__PURE__ */ React17.createElement(import_ui12.Box, { spacing: 4, sx: { px: 6 } }, /* @__PURE__ */ React17.createElement(import_ui12.Skeleton, { variant: "text", sx: { fontSize: "2rem" } }), /* @__PURE__ */ React17.createElement(import_ui12.Skeleton, { variant: "rounded", width: "100%", height: "48" }));
+  }
+  const label = (0, import_i18n8.__)("Pages (%s)", "elementor").replace("%s", pages.length.toString());
   return /* @__PURE__ */ React17.createElement(
     CollapsibleList,
     {
@@ -544,36 +578,35 @@ function PagesCollapsibleList({ pages, isOpenByDefault = false }) {
 }
 
 // src/components/panel/shell.tsx
-var import_i18n8 = require("@wordpress/i18n");
-var mockPages = [
-  {
-    id: 1,
-    type: "page",
-    title: "This is a very long title that somebody wrote, a very very long line",
-    status: "pending approval"
-  },
-  { id: 2, type: "page", title: "About", status: "publish" },
-  { id: 3, type: "page", title: "Services", status: "publish", isHome: true },
-  { id: 4, type: "page", title: "Contact", status: "draft" },
-  { id: 5, type: "page", title: "FAQ", status: "publish" }
-];
+var import_i18n9 = require("@wordpress/i18n");
+
+// src/components/panel/add-new-page-button.tsx
+var import_ui13 = require("@elementor/ui");
+var import_icons13 = require("@elementor/icons");
+var React18 = __toESM(require("react"));
+function AddNewPageButton() {
+  return /* @__PURE__ */ React18.createElement(
+    import_ui13.Button,
+    {
+      sx: { mt: 4, mb: 4, mr: 5 },
+      startIcon: /* @__PURE__ */ React18.createElement(import_icons13.PlusIcon, null),
+      onClick: () => null
+    },
+    "Add New"
+  );
+}
+
+// src/components/panel/shell.tsx
 var Shell = () => {
-  return /* @__PURE__ */ React18.createElement(import_editor_panels.Panel, null, /* @__PURE__ */ React18.createElement(import_editor_panels.PanelHeader, null, /* @__PURE__ */ React18.createElement(import_editor_panels.PanelHeaderTitle, null, (0, import_i18n8.__)("Pages", "elementor"))), /* @__PURE__ */ React18.createElement(import_editor_panels.PanelBody, null, /* @__PURE__ */ React18.createElement(
-    import_ui12.Box,
+  return /* @__PURE__ */ React19.createElement(import_editor_panels.Panel, null, /* @__PURE__ */ React19.createElement(import_editor_panels.PanelHeader, null, /* @__PURE__ */ React19.createElement(import_editor_panels.PanelHeaderTitle, null, (0, import_i18n9.__)("Pages", "elementor"))), /* @__PURE__ */ React19.createElement(import_editor_panels.PanelBody, null, /* @__PURE__ */ React19.createElement(
+    import_ui14.Box,
     {
       display: "flex",
       justifyContent: "flex-end",
       alignItems: "center"
     },
-    /* @__PURE__ */ React18.createElement(
-      import_ui12.Button,
-      {
-        sx: { mt: 4, mb: 4, mr: 5 },
-        startIcon: /* @__PURE__ */ React18.createElement(import_icons13.PlusIcon, null)
-      },
-      "Add New"
-    )
-  ), /* @__PURE__ */ React18.createElement(import_ui12.List, { dense: true }, /* @__PURE__ */ React18.createElement(PagesCollapsibleList, { pages: mockPages, isOpenByDefault: true }))));
+    /* @__PURE__ */ React19.createElement(AddNewPageButton, null)
+  ), /* @__PURE__ */ React19.createElement(import_ui14.List, { dense: true }, /* @__PURE__ */ React19.createElement(PagesCollapsibleList, { isOpenByDefault: true }))));
 };
 var shell_default = Shell;
 
@@ -592,7 +625,7 @@ function useToggleButtonProps() {
   const { isOpen, isBlocked } = usePanelStatus();
   const { open, close } = usePanelActions();
   return {
-    title: (0, import_i18n9.__)("Pages", "elementor"),
+    title: (0, import_i18n10.__)("Pages", "elementor"),
     icon: import_icons14.PagesIcon,
     onClick: () => isOpen ? close() : open(),
     selected: isOpen,

package/dist/index.mjs

@@ -232,16 +232,15 @@ function RecentlyEdited() {
 import { injectIntoPageIndication, toolsMenu } from "@elementor/editor-app-bar";
 
 // src/hooks/useToggleButtonProps.ts
-import { __ as __9 } from "@wordpress/i18n";
+import { __ as __10 } from "@wordpress/i18n";
 import { PagesIcon } from "@elementor/icons";
 
 // src/components/panel/panel.ts
 import { createPanel } from "@elementor/editor-panels";
 
 // src/components/panel/shell.tsx
-import * as React18 from "react";
-import { Box as Box3, Button as Button2, List as List2 } from "@elementor/ui";
-import { PlusIcon as PlusIcon2 } from "@elementor/icons";
+import * as React19 from "react";
+import { Box as Box4, List as List2 } from "@elementor/ui";
 import { Panel, PanelBody, PanelHeader, PanelHeaderTitle } from "@elementor/editor-panels";
 
 // src/components/panel/pages-list/pages-collapsible-list.tsx
@@ -288,6 +287,7 @@ function CollapsibleList({
 
 // src/components/panel/pages-list/pages-collapsible-list.tsx
 import { PageTypeIcon as PageTypeIcon2 } from "@elementor/icons";
+import { Skeleton, Box as Box3 } from "@elementor/ui";
 
 // src/components/panel/pages-list/page-list-item.tsx
 import * as React16 from "react";
@@ -344,7 +344,7 @@ var PageTitle = ({ title }) => {
   );
 };
 function PageTitleAndStatus({ page }) {
-  return /* @__PURE__ */ React7.createElement(Box2, { display: "flex" }, /* @__PURE__ */ React7.createElement(PageTitle, { title: page.title }), "\xA0", /* @__PURE__ */ React7.createElement(PageStatus, { status: page.status }));
+  return /* @__PURE__ */ React7.createElement(Box2, { display: "flex" }, /* @__PURE__ */ React7.createElement(PageTitle, { title: page.title.rendered }), "\xA0", /* @__PURE__ */ React7.createElement(PageStatus, { status: page.status }));
 }
 
 // src/components/panel/actions-menu/page-actions-menu.tsx
@@ -520,9 +520,43 @@ function PageListItem({ page }) {
   ), /* @__PURE__ */ React16.createElement(PageActionsMenu, { page, ...bindMenu2(popupState) }));
 }
 
+// src/hooks/use-posts.ts
+import { useQuery } from "@elementor/query";
+
+// src/api/post.ts
+import apiFetch3 from "@wordpress/api-fetch";
+var postTypesMap = {
+  page: "pages"
+};
+var getRequest = (postTypeSlug) => {
+  const baseUri = `/wp/v2/${postTypesMap[postTypeSlug]}`;
+  const keys = ["id", "type", "title", "link", "status"];
+  const queryParams = new URLSearchParams({
+    status: "any",
+    per_page: "-1",
+    _fields: keys.join(",")
+  });
+  const uri = baseUri + "?" + queryParams.toString();
+  return apiFetch3({ path: uri });
+};
+
+// src/hooks/use-posts.ts
+var postsQueryKey = (postTypeSlug) => ["site-navigation", "posts", postTypeSlug];
+function usePosts(postTypeSlug) {
+  return useQuery({
+    queryKey: postsQueryKey(postTypeSlug),
+    queryFn: () => getRequest(postTypeSlug)
+  });
+}
+
 // src/components/panel/pages-list/pages-collapsible-list.tsx
-function PagesCollapsibleList({ pages, isOpenByDefault = false }) {
-  const label = `Pages (${pages.length})`;
+import { __ as __8 } from "@wordpress/i18n";
+function PagesCollapsibleList({ isOpenByDefault = false }) {
+  const { data: pages, isLoading: pagesLoading } = usePosts("page");
+  if (!pages || pagesLoading) {
+    return /* @__PURE__ */ React17.createElement(Box3, { spacing: 4, sx: { px: 6 } }, /* @__PURE__ */ React17.createElement(Skeleton, { variant: "text", sx: { fontSize: "2rem" } }), /* @__PURE__ */ React17.createElement(Skeleton, { variant: "rounded", width: "100%", height: "48" }));
+  }
+  const label = __8("Pages (%s)", "elementor").replace("%s", pages.length.toString());
   return /* @__PURE__ */ React17.createElement(
     CollapsibleList,
     {
@@ -535,36 +569,35 @@ function PagesCollapsibleList({ pages, isOpenByDefault = false }) {
 }
 
 // src/components/panel/shell.tsx
-import { __ as __8 } from "@wordpress/i18n";
-var mockPages = [
-  {
-    id: 1,
-    type: "page",
-    title: "This is a very long title that somebody wrote, a very very long line",
-    status: "pending approval"
-  },
-  { id: 2, type: "page", title: "About", status: "publish" },
-  { id: 3, type: "page", title: "Services", status: "publish", isHome: true },
-  { id: 4, type: "page", title: "Contact", status: "draft" },
-  { id: 5, type: "page", title: "FAQ", status: "publish" }
-];
+import { __ as __9 } from "@wordpress/i18n";
+
+// src/components/panel/add-new-page-button.tsx
+import { Button as Button2 } from "@elementor/ui";
+import { PlusIcon as PlusIcon2 } from "@elementor/icons";
+import * as React18 from "react";
+function AddNewPageButton() {
+  return /* @__PURE__ */ React18.createElement(
+    Button2,
+    {
+      sx: { mt: 4, mb: 4, mr: 5 },
+      startIcon: /* @__PURE__ */ React18.createElement(PlusIcon2, null),
+      onClick: () => null
+    },
+    "Add New"
+  );
+}
+
+// src/components/panel/shell.tsx
 var Shell = () => {
-  return /* @__PURE__ */ React18.createElement(Panel, null, /* @__PURE__ */ React18.createElement(PanelHeader, null, /* @__PURE__ */ React18.createElement(PanelHeaderTitle, null, __8("Pages", "elementor"))), /* @__PURE__ */ React18.createElement(PanelBody, null, /* @__PURE__ */ React18.createElement(
-    Box3,
+  return /* @__PURE__ */ React19.createElement(Panel, null, /* @__PURE__ */ React19.createElement(PanelHeader, null, /* @__PURE__ */ React19.createElement(PanelHeaderTitle, null, __9("Pages", "elementor"))), /* @__PURE__ */ React19.createElement(PanelBody, null, /* @__PURE__ */ React19.createElement(
+    Box4,
     {
       display: "flex",
       justifyContent: "flex-end",
       alignItems: "center"
     },
-    /* @__PURE__ */ React18.createElement(
-      Button2,
-      {
-        sx: { mt: 4, mb: 4, mr: 5 },
-        startIcon: /* @__PURE__ */ React18.createElement(PlusIcon2, null)
-      },
-      "Add New"
-    )
-  ), /* @__PURE__ */ React18.createElement(List2, { dense: true }, /* @__PURE__ */ React18.createElement(PagesCollapsibleList, { pages: mockPages, isOpenByDefault: true }))));
+    /* @__PURE__ */ React19.createElement(AddNewPageButton, null)
+  ), /* @__PURE__ */ React19.createElement(List2, { dense: true }, /* @__PURE__ */ React19.createElement(PagesCollapsibleList, { isOpenByDefault: true }))));
 };
 var shell_default = Shell;
 
@@ -583,7 +616,7 @@ function useToggleButtonProps() {
   const { isOpen, isBlocked } = usePanelStatus();
   const { open, close } = usePanelActions();
   return {
-    title: __9("Pages", "elementor"),
+    title: __10("Pages", "elementor"),
     icon: PagesIcon,
     onClick: () => isOpen ? close() : open(),
     selected: isOpen,

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@elementor/editor-site-navigation",
-	"version": "0.9.2",
+	"version": "0.10.0",
 	"private": false,
 	"author": "Elementor Team",
 	"homepage": "https://elementor.com/",
@@ -37,6 +37,7 @@
 		"@elementor/editor-panels": "^0.1.3",
 		"@elementor/env": "^0.2.0",
 		"@elementor/icons": "^0.6.1",
+		"@elementor/query": "^0.1.1",
 		"@elementor/ui": "^1.4.53",
 		"@wordpress/api-fetch": "^6.33.0",
 		"@wordpress/i18n": "^4.36.0",
@@ -48,5 +49,5 @@
 	"elementor": {
 		"type": "extension"
 	},
-	"gitHead": "acc2a7452306ed37a02647b977841c387bd1a7f5"
+	"gitHead": "45f277affda7a63cefad6682069bf32ed7cc38ef"
 }

package/src/api/post.ts

@@ -0,0 +1,64 @@
+import apiFetch from '@wordpress/api-fetch';
+import { Post } from '../types';
+
+export type NewPost = {
+	title: string,
+	status: 'publish' | 'draft'
+};
+
+export type UpdatePost = {
+	id: number,
+	title?: string,
+}
+
+export type Slug = keyof typeof postTypesMap;
+
+const postTypesMap = {
+	page: 'pages',
+};
+
+export const getRequest = ( postTypeSlug: Slug ) => {
+	const baseUri = `/wp/v2/${ postTypesMap[ postTypeSlug ] }`;
+
+	const keys: Array<keyof Post> = [ 'id', 'type', 'title', 'link', 'status' ];
+
+	const queryParams = new URLSearchParams( {
+		status: 'any',
+		per_page: '-1',
+		_fields: keys.join( ',' ),
+	} );
+
+	const uri = baseUri + '?' + queryParams.toString();
+
+	return apiFetch<Post[]>( { path: uri } );
+};
+
+export const createRequest = ( postTypeSlug: Slug, newPost: NewPost ) => {
+	const path = `/wp/v2/${ postTypesMap[ postTypeSlug ] }`;
+
+	return apiFetch( {
+		path,
+		method: 'POST',
+		data: newPost,
+	} );
+};
+
+export const updateRequest = ( postTypeSlug: Slug, updatedPost: UpdatePost ) => {
+	const path = `/wp/v2/${ postTypesMap[ postTypeSlug ] }`;
+	const { id, ...data } = updatedPost;
+
+	return apiFetch( {
+		path: `${ path }/${ id }`,
+		method: 'POST',
+		data,
+	} );
+};
+
+export const deleteRequest = ( postTypeSlug: Slug, postId: number ) => {
+	const path = `/wp/v2/${ postTypesMap[ postTypeSlug ] }`;
+
+	return apiFetch( {
+		path: `${ path }/${ postId }`,
+		method: 'DELETE',
+	} );
+};

package/src/components/panel/actions-menu/action-list-item.tsx

@@ -1,13 +1,13 @@
 import * as React from 'react';
 import { ComponentType } from 'react';
 import { ListItemButton, ListItemIcon, ListItemText } from '@elementor/ui';
-import { Page } from '../../../types';
+import { Post } from '../../../types';
 
 export type Props = {
 	title: string;
 	icon: ComponentType;
 	disabled?: boolean;
-	onClick: ( page: Page ) => void;
+	onClick: ( page: Post ) => void;
 }
 
 export default function ActionListItem( { title, icon: Icon, disabled, onClick }: Props ) {

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

@@ -3,12 +3,12 @@ import { Divider, Menu, MenuProps } from '@elementor/ui';
 import Rename from '../pages-actions/rename';
 import Duplicate from '../pages-actions/duplicate';
 import Delete from '../pages-actions/delete';
-import { Page } from '../../../types';
+import { Post } from '../../../types';
 import View from '../pages-actions/view';
 import SetHome from '../pages-actions/set-home';
 
 type Props = MenuProps & {
-	page: Page
+	page: Post
 };
 
 export default function PageActionsMenu( { page, ...props }: Props ) {

package/src/components/panel/add-new-page-button.tsx

@@ -0,0 +1,15 @@
+import { Button } from '@elementor/ui';
+import { PlusIcon } from '@elementor/icons';
+import * as React from 'react';
+
+export default function AddNewPageButton() {
+	return (
+		<Button
+			sx={ { mt: 4, mb: 4, mr: 5 } }
+			startIcon={ <PlusIcon /> }
+			onClick={ () => null }
+		>
+			Add New
+		</Button>
+	);
+}

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

@@ -1,11 +1,11 @@
 import * as React from 'react';
 import { TrashIcon } from '@elementor/icons';
-import { Page } from '../../../types';
+import { Post } from '../../../types';
 import { useActiveDocument } from '@elementor/editor-documents';
 import { __ } from '@wordpress/i18n';
 import ActionMenuItem from '../actions-menu/action-menu-item';
 
-export default function Delete( { page }: { page: Page } ) {
+export default function Delete( { page }: { page: Post } ) {
 	const activeDocument = useActiveDocument();
 
 	const isActive = activeDocument?.id === page.id;

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

@@ -1,10 +1,10 @@
 import * as React from 'react';
-import { Page } from '../../../types';
+import { Post } from '../../../types';
 import { HomeIcon } from '@elementor/icons';
 import { __ } from '@wordpress/i18n';
 import ActionMenuItem from '../actions-menu/action-menu-item';
 
-export default function SetHome( { page }: { page: Page } ) {
+export default function SetHome( { page }: { page: Post } ) {
 	return (
 		<ActionMenuItem
 			title={ __( 'Set as homepage', 'elementor' ) }

package/src/components/panel/pages-list/__tests__/page-list-item.test.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { act, render } from '@testing-library/react';
-import { Page } from '../../../../types';
+import { Post } from '../../../../types';
 import PageListItem from '../page-list-item';
 import { useNavigateToDocument } from '@elementor/editor-documents';
 
@@ -14,33 +14,39 @@ describe( '@elementor/editor-site-navigation - PageListItem', () => {
 		jest.clearAllMocks();
 	} );
 
-	it( 'should render a published post', () => {
+	it( 'should render a published page', () => {
 		// Arrange.
-		const page: Page = {
+		const page: Post = {
 			id: 1,
-			title: 'Test Post',
+			title: {
+				rendered: 'Test Page',
+			},
 			status: 'publish',
 			type: 'page',
+			link: 'https://example.local/test-page',
 		};
 
 		// Act.
 		const { getByText, queryByText } = render( <PageListItem page={ page } /> );
 
 		// Assert.
-		const label = getByText( 'Test Post' );
+		const label = getByText( 'Test Page' );
 		const publishedLabel = queryByText( 'publish', { exact: false } );
 
 		expect( label ).toBeInTheDocument();
 		expect( publishedLabel ).toBeNull();
 	} );
 
-	it( 'should show the post status for non-published posts', () => {
+	it( 'should show the page status for non-published pages', () => {
 		// Arrange.
-		const page: Page = {
+		const page: Post = {
 			id: 1,
-			title: 'Test Post',
+			title: {
+				rendered: 'Test Page',
+			},
 			status: 'draft',
 			type: 'page',
+			link: 'https://example.local/test-page',
 		};
 
 		// Act.
@@ -53,11 +59,14 @@ describe( '@elementor/editor-site-navigation - PageListItem', () => {
 
 	it( 'should render actions menu', () => {
 		// Arrange.
-		const page: Page = {
+		const page: Post = {
 			id: 1,
-			title: 'Test Post',
-			status: 'draft',
+			title: {
+				rendered: 'Test Page',
+			},
+			status: 'publish',
 			type: 'page',
+			link: 'https://example.local/test-Page',
 		};
 
 		const actions = [ 'View Page', 'Rename', 'Duplicate', 'Delete', 'Set as homepage' ];
@@ -87,11 +96,14 @@ describe( '@elementor/editor-site-navigation - PageListItem', () => {
 
 		const id = 10;
 
-		const page: Page = {
+		const page: Post = {
 			id,
-			title: 'Test Post',
-			status: 'draft',
+			title: {
+				rendered: 'Test Page',
+			},
+			status: 'publish',
 			type: 'page',
+			link: 'https://example.local/test-page',
 		};
 
 		// Act.

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

@@ -1,31 +1,40 @@
 import * as React from 'react';
 import { render } from '@testing-library/react';
-import { Page } from '../../../../types';
 import PagesCollapsibleList from '../pages-collapsible-list';
 
-jest.mock( '@elementor/editor-documents' );
+jest.mock( '../../../../hooks/use-posts', () => ( {
+	__esModule: true,
+	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 },
+		],
+	} ) ),
+} ) );
+
+jest.mock( '@elementor/editor-documents', () => ( {
+	__esModule: true,
+	useActiveDocument: jest.fn( () => ( {
+		id: 2,
+	} ) ),
+	useNavigateToDocument: jest.fn(),
+} ) );
 
 describe( '@elementor/editor-site-navigation - PagesCollapsibleList', () => {
-	const mockPosts: Page[] = [
-		{ id: 1, type: 'page', title: 'Home', status: 'draft' },
-		{ id: 2, type: 'page', title: 'About', status: 'publish' },
-		{ id: 3, type: 'page', title: 'Services', status: 'publish', isHome: true },
-		{ id: 4, type: 'page', title: 'Contact', status: 'draft' },
-		{ id: 5, type: 'page', title: 'FAQ', status: 'publish' },
-	];
-
-	afterAll( () => {
+	afterEach( () => {
 		jest.clearAllMocks();
 	} );
 
 	it( 'should render closed list', () => {
 		// Act.
 		const { getByText, queryByText } = render(
-			<PagesCollapsibleList pages={ mockPosts } isOpenByDefault={ false } />,
+			<PagesCollapsibleList isOpenByDefault={ false } />,
 		);
 
 		// Assert.
-		const label = getByText( `Pages (${ mockPosts.length })` );
+		const label = getByText( `Pages (3)` );
 		expect( label ).toBeInTheDocument();
 
 		const postInList = queryByText( 'Services' );
@@ -35,11 +44,11 @@ describe( '@elementor/editor-site-navigation - PagesCollapsibleList', () => {
 	it( 'should render open list', () => {
 		// Act.
 		const { getByText } = render(
-			<PagesCollapsibleList pages={ mockPosts } isOpenByDefault={ true } />,
+			<PagesCollapsibleList isOpenByDefault={ true } />,
 		);
 
 		// Assert.
-		const label = getByText( `Pages (${ mockPosts.length })` );
+		const label = getByText( `Pages (3)` );
 		expect( label ).toBeInTheDocument();
 
 		const postInList = getByText( 'Services' );

package/src/components/panel/pages-list/page-list-item.tsx

@@ -10,12 +10,12 @@ import {
 	usePopupState,
 } from '@elementor/ui';
 import { DotsVerticalIcon, HomeIcon } from '@elementor/icons';
-import { Page } from '../../../types';
+import { Post } from '../../../types';
 import { useActiveDocument, useNavigateToDocument } from '@elementor/editor-documents';
 import PageTitleAndStatus from '../../shared/page-title-and-status';
 import PageActionsMenu from '../actions-menu/page-actions-menu';
 
-export default function PageListItem( { page }: { page: Page } ) {
+export default function PageListItem( { page }: { page: Post } ) {
 	const popupState = usePopupState( {
 		variant: 'popover',
 		popupId: 'page-actions',

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

@@ -1,16 +1,29 @@
 import * as React from 'react';
 import CollapsibleList from './collapsible-list';
-import { Page } from '../../../types';
 import { PageTypeIcon } from '@elementor/icons';
+import { Skeleton, Box } from '@elementor/ui';
 import PageListItem from './page-list-item';
+import { usePosts } from '../../../hooks/use-posts';
+import { __ } from '@wordpress/i18n';
 
 type Props = {
-	pages: Page[];
 	isOpenByDefault?: boolean;
 }
 
-export default function PagesCollapsibleList( { pages, isOpenByDefault = false }: Props ) {
-	const label = `Pages (${ pages.length })`; // TODO 21/06/2023 : This label should come from the backend
+export default function PagesCollapsibleList( { isOpenByDefault = false }: Props ) {
+	const { data: pages, isLoading: pagesLoading } = usePosts( 'page' );
+
+	if ( ! pages || pagesLoading ) {
+		return (
+			<Box spacing={ 4 } sx={ { px: 6 } }>
+				<Skeleton variant="text" sx={ { fontSize: '2rem' } } />
+				<Skeleton variant="rounded" width="100%" height="48" />
+			</Box>
+		);
+	}
+
+	// translators: %s: Number of pages
+	const label = __( 'Pages (%s)', 'elementor' ).replace( '%s', ( pages.length ).toString() );
 
 	return (
 		<CollapsibleList

package/src/components/panel/shell.tsx

@@ -1,24 +1,9 @@
 import * as React from 'react';
-import { Box, Button, List } from '@elementor/ui';
-import { PlusIcon } from '@elementor/icons';
-import { Page } from '../../types';
+import { Box, List } from '@elementor/ui';
 import { Panel, PanelBody, PanelHeader, PanelHeaderTitle } from '@elementor/editor-panels';
 import PagesCollapsibleList from './pages-list/pages-collapsible-list';
 import { __ } from '@wordpress/i18n';
-
-// TODO: Remove once connected to real data fetching.
-const mockPages: Page[] = [
-	{
-		id: 1,
-		type: 'page',
-		title: 'This is a very long title that somebody wrote, a very very long line',
-		status: 'pending approval',
-	},
-	{ id: 2, type: 'page', title: 'About', status: 'publish' },
-	{ id: 3, type: 'page', title: 'Services', status: 'publish', isHome: true },
-	{ id: 4, type: 'page', title: 'Contact', status: 'draft' },
-	{ id: 5, type: 'page', title: 'FAQ', status: 'publish' },
-];
+import AddNewPageButton from './add-new-page-button';
 
 const Shell = () => {
 	return (
@@ -32,15 +17,10 @@ const Shell = () => {
 					justifyContent="flex-end"
 					alignItems="center"
 				>
-					<Button
-						sx={ { mt: 4, mb: 4, mr: 5 } }
-						startIcon={ <PlusIcon /> }
-					>
-						Add New
-					</Button>
+					<AddNewPageButton />
 				</Box>
 				<List dense>
-					<PagesCollapsibleList pages={ mockPages } isOpenByDefault={ true } />
+					<PagesCollapsibleList isOpenByDefault={ true } />
 				</List>
 			</PanelBody>
 		</Panel>

package/src/components/shared/page-title-and-status.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { Box, Typography } from '@elementor/ui';
-import { Page } from '../../types';
+import { Post } from '../../types';
 import { useReverseHtmlEntities } from '../../hooks/use-reverse-html-entities';
 
 const PageStatus = ( { status }: { status: string } ) => {
@@ -41,10 +41,10 @@ const PageTitle = ( { title }: { title: string } ) => {
 	);
 };
 
-export default function PageTitleAndStatus( { page }: { page: Page } ) {
+export default function PageTitleAndStatus( { page }: { page: Post } ) {
 	return (
 		<Box display="flex">
-			<PageTitle title={ page.title } />&nbsp;<PageStatus status={ page.status } />
+			<PageTitle title={ page.title.rendered } />&nbsp;<PageStatus status={ page.status } />
 		</Box>
 	);
 }

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

@@ -0,0 +1,89 @@
+import apiFetch from '@wordpress/api-fetch';
+import { renderHookWithQuery } from 'test-utils';
+import { usePostActions } from '../use-posts-actions';
+import { postsQueryKey } from '../use-posts';
+
+jest.mock( '@wordpress/api-fetch' );
+
+describe( '@elementor/site-settings/use-post-actions', () => {
+	beforeEach( () => {
+		jest.mocked( apiFetch ).mockImplementation( () => Promise.resolve( {} ) );
+	} );
+
+	afterEach( () => {
+		jest.clearAllMocks();
+	} );
+
+	it( 'should run createPost from usePostActions hook', async () => {
+		// Arrange.
+		const { component, queryClient } = renderHookWithQuery( () => usePostActions( 'page' ) );
+		const { createPost } = component.result.current;
+
+		const queryKey = postsQueryKey( 'page' );
+		await queryClient.setQueryData( queryKey, {
+			posts: [],
+		} );
+
+		// Act.
+		await createPost.mutateAsync( { title: 'Page', status: 'publish' } );
+
+		expect( apiFetch ).toHaveBeenCalledTimes( 1 );
+		expect( apiFetch ).toHaveBeenCalledWith( {
+			path: '/wp/v2/pages',
+			method: 'POST',
+			data: {
+				title: 'Page',
+				status: 'publish',
+			},
+		} );
+
+		expect( queryClient.getQueryState( queryKey )?.isInvalidated ).toBe( true );
+	} );
+
+	it( 'should run updatePost from usePostActions hook', async () => {
+		// Arrange.
+		const { component, queryClient } = renderHookWithQuery( () => usePostActions( 'page' ) );
+		const { updatePost } = component.result.current;
+
+		const queryKey = postsQueryKey( 'page' );
+		await queryClient.setQueryData( queryKey, {
+			posts: [],
+		} );
+
+		// Act.
+		await updatePost.mutateAsync( { id: 1, title: 'Page' } );
+
+		expect( apiFetch ).toHaveBeenCalledTimes( 1 );
+		expect( apiFetch ).toHaveBeenCalledWith( {
+			path: '/wp/v2/pages/1',
+			method: 'POST',
+			data: {
+				title: 'Page',
+			},
+		} );
+
+		expect( queryClient.getQueryState( queryKey )?.isInvalidated ).toBe( true );
+	} );
+
+	it( 'should run deletePost from usePostActions hook', async () => {
+		// Arrange.
+		const { component, queryClient } = renderHookWithQuery( () => usePostActions( 'page' ) );
+		const { deletePost } = component.result.current;
+
+		const queryKey = postsQueryKey( 'page' );
+		await queryClient.setQueryData( queryKey, {
+			posts: [],
+		} );
+
+		// Act.
+		await deletePost.mutateAsync( 1 );
+
+		expect( apiFetch ).toHaveBeenCalledTimes( 1 );
+		expect( apiFetch ).toHaveBeenCalledWith( {
+			path: '/wp/v2/pages/1',
+			method: 'DELETE',
+		} );
+
+		expect( queryClient.getQueryState( queryKey )?.isInvalidated ).toBe( true );
+	} );
+} );

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

@@ -0,0 +1,45 @@
+import { waitFor } from '@testing-library/react';
+import apiFetch from '@wordpress/api-fetch';
+import { renderHookWithQuery } from 'test-utils';
+import { usePosts } from '../use-posts';
+
+jest.mock( '@wordpress/api-fetch' );
+
+describe( '@elementor/site-settings/use-posts', () => {
+	beforeEach( () => {
+		jest.mocked( apiFetch ).mockImplementation( () => Promise.resolve( [] ) );
+	} );
+
+	afterEach( () => {
+		jest.clearAllMocks();
+	} );
+
+	it( 'usePosts hook should return posts list by type', async () => {
+		// Arrange.
+		const pages = [
+			{ 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 },
+		];
+		jest.mocked( apiFetch ).mockImplementation( () => Promise.resolve( pages ) );
+
+		// Act.
+		const { component } = renderHookWithQuery( () => usePosts( 'page' ) );
+
+		// Assert.
+		const expectedPath = `/wp/v2/pages?status=any&per_page=-1&_fields=${ encodeURIComponent( 'id,type,title,link,status' ) }`;
+
+		await waitFor( () => {
+			expect( apiFetch ).toHaveBeenCalledWith( {
+				path: expectedPath,
+			} );
+			expect( apiFetch ).toHaveBeenCalledTimes( 1 );
+		} );
+
+		await waitFor( () => {
+			return component.result.current.isSuccess;
+		} );
+
+		expect( component.result.current.data ).toBe( pages );
+	} );
+} );

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

@@ -0,0 +1,40 @@
+import { useQueryClient, useMutation } from '@elementor/query';
+import { createRequest, deleteRequest, updateRequest, NewPost, Slug, UpdatePost } from '../api/post';
+import { postsQueryKey } from './use-posts';
+
+export function usePostActions( postTypeSlug: Slug ) {
+	const invalidatePosts = useInvalidatePosts( postTypeSlug );
+
+	const onSuccess = () => invalidatePosts( { exact: true } );
+
+	const createPost = useMutation(
+		( newPost: NewPost ) => createRequest( postTypeSlug, newPost ),
+		{ onSuccess }
+	);
+
+	const updatePost = useMutation(
+		( updatedPost: UpdatePost ) => updateRequest( postTypeSlug, updatedPost ),
+		{ onSuccess }
+	);
+
+	const deletePost = useMutation(
+		( postId: number ) => deleteRequest( postTypeSlug, postId ),
+		{ onSuccess }
+	);
+
+	return {
+		createPost,
+		updatePost,
+		deletePost,
+	};
+}
+
+function useInvalidatePosts( postTypeSlug: string ) {
+	const queryClient = useQueryClient();
+
+	return ( options = {} ) => {
+		const queryKey = postsQueryKey( postTypeSlug );
+
+		return queryClient.invalidateQueries( queryKey, options );
+	};
+}

package/src/hooks/use-posts.ts

@@ -1,123 +1,11 @@
-import { useEffect, useMemo, useState, useCallback } from 'react';
-import { usePostTypes } from './use-post-types';
-import { Post, PostType } from './types/interfaces';
-import apiFetch from '@wordpress/api-fetch';
+import { useQuery } from '@elementor/query';
+import { getRequest, Slug } from '../api/post';
 
-const defaultRestNamespace = 'wp/v2';
+export const postsQueryKey = ( postTypeSlug: string ) => [ 'site-navigation', 'posts', postTypeSlug ];
 
-const useFetchPosts = ( postType: PostType | null | undefined ): [ Post[], () => void, boolean ] => {
-	const [ posts, setPosts ] = useState<Post[]>( [] );
-	const [ isLoading, setIsLoading ] = useState( false );
-
-	const fetchPosts = useCallback( () => {
-		setIsLoading( true );
-
-		const path = postType
-			? `/${ postType.rest_namespace }/${ postType.rest_base }`
-			: `/${ defaultRestNamespace }/posts`;
-
-		apiFetch( { path } )
-			.then( ( response ) => {
-				if ( Array.isArray( response ) ) {
-					setPosts( response );
-				}
-			} )
-			.catch( ( error ) => {
-				// eslint-disable-next-line no-console
-				console.error( 'Error fetching posts:', error );
-			} )
-			.finally( () => {
-				setIsLoading( false );
-			} );
-	}, [ postType ] );
-
-	useEffect( () => {
-		fetchPosts();
-	}, [ fetchPosts ] );
-
-	return [ posts, fetchPosts, isLoading ];
-};
-
-const useUpdatePost = ( postType: PostType | null | undefined ): ( ( postId: number, updatedPost: Partial<Post> ) => void ) => {
-	return ( postId: number, updatedPost: Partial<Post> ) => {
-		const path = postType
-			? `/${ postType.rest_namespace }/${ postType.rest_base }`
-			: `/${ defaultRestNamespace }/posts`;
-
-		apiFetch( {
-			path: `/${ path }/${ postId }`,
-			method: 'POST',
-			data: updatedPost,
-		} )
-			.catch( ( error ) => {
-				// eslint-disable-next-line no-console
-				console.error( 'Error updating post:', error );
-			} );
-	};
-};
-
-const useCreatePost = ( postType: PostType | null | undefined ): ( ( newPost: Partial<Post> ) => void ) => {
-	return ( newPost: Partial<Post> ) => {
-		const path = postType
-			? `/${ postType.rest_namespace }/${ postType.rest_base }`
-			: `/${ defaultRestNamespace }/posts`;
-
-		apiFetch( {
-			path,
-			method: 'POST',
-			data: newPost,
-		} )
-			.catch( ( error ) => {
-				// eslint-disable-next-line no-console
-				console.error( 'Error creating post:', error );
-			} );
-	};
-};
-
-const useDeletePost = ( postType: PostType | null | undefined ): ( ( postId: number ) => void ) => {
-	return ( postId: number ) => {
-		const path = postType
-			? `/${ postType.rest_namespace }/${ postType.rest_base }`
-			: `/${ defaultRestNamespace }/posts`;
-
-		apiFetch( {
-			path: `/${ path }/${ postId }`,
-			method: 'DELETE',
-		} )
-			.catch( ( error ) => {
-				// eslint-disable-next-line no-console
-				console.error( 'Error deleting post:', error );
-			} );
-	};
-};
-
-export const usePosts = ( postType?: string | null ): {
-	posts: Post[];
-	getPosts: () => void;
-	updatePost: ( postId: number, updatedPost: Partial<Post> ) => void;
-	createPost: ( newPost: Partial<Post> ) => void;
-	deletePost: ( postId: number ) => void;
-	isLoading: boolean;
-} => {
-	const postTypes = usePostTypes();
-	const postTypeData = postTypes.find( ( type ) => type?.name === postType );
-
-	// eslint-disable-next-line @typescript-eslint/no-unused-vars
-	const [ posts, fetchPosts, isLoading ] = useFetchPosts( postTypeData );
-	const updatePost = useUpdatePost( postTypeData );
-	const createPost = useCreatePost( postTypeData );
-	const deletePost = useDeletePost( postTypeData );
-
-	const getPosts = useMemo( () => {
-		return () => posts;
-	}, [ posts ] );
-
-	return {
-		posts,
-		getPosts,
-		updatePost,
-		createPost,
-		deletePost,
-		isLoading,
-	};
-};
+export function usePosts( postTypeSlug: Slug ) {
+	return useQuery( {
+		queryKey: postsQueryKey( postTypeSlug ),
+		queryFn: () => getRequest( postTypeSlug ),
+	} );
+}

package/src/types.ts

@@ -1,7 +1,20 @@
-export type Page = {
+export type Post = {
 	isHome?: boolean;
 	id: number;
-	title: string;
+	link: string;
 	status: string;
 	type: string;
-};
+	title: {
+		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;

package/src/hooks/types/interfaces.ts

@@ -1,13 +0,0 @@
-export interface Post {
-	id: number;
-	title: string;
-	content: string;
-}
-
-export interface PostType {
-	name: string;
-	slug: string;
-	labels: Record<string, string>;
-	rest_base: string;
-	rest_namespace: string;
-}

package/src/hooks/use-post-types.ts

@@ -1,64 +0,0 @@
-import { useState, useEffect, useMemo } from 'react';
-import { PostType } from './types/interfaces';
-import apiFetch from '@wordpress/api-fetch';
-
-type PostTypesResponse = Record<string, PostType>;
-
-// allowedPostTypes is only used to filter irrelevant types when fetching all post types.
-// You can still use a specific post type name to fetch a post type not present in allowedPostTypes.
-const allowedPostTypes = [ 'page' ];
-
-const useFetchPostTypes = (
-	postTypeName?: string
-): ( PostType | null )[] => {
-	const [ postTypes, setPostTypes ] = useState<( PostType | null )[]>( [] );
-
-	useEffect( () => {
-		const fetchPostTypes = async () => {
-			try {
-				const response: PostTypesResponse = await apiFetch( {
-					path: '/wp/v2/types',
-				} );
-
-				if ( postTypeName ) {
-					const specificPostType = response[ postTypeName ];
-
-					setPostTypes( [
-						specificPostType
-							? { ...specificPostType }
-							: null,
-					] );
-				} else {
-					const filteredResponse: PostTypesResponse = {};
-
-					allowedPostTypes.forEach( ( type ) => {
-						if ( response[ type ] ) {
-							filteredResponse[ type ] = response[ type ];
-						}
-					} );
-
-					const filteredPostTypes: ( PostType | null )[] = Object.keys( filteredResponse ).map(
-						( key ) => ( { ...filteredResponse[ key ] } )
-					);
-
-					setPostTypes( filteredPostTypes );
-				}
-			} catch ( error ) {
-				// eslint-disable-next-line no-console
-				console.error( 'Error fetching post types:', error );
-			}
-		};
-
-		fetchPostTypes();
-	}, [ postTypeName ] );
-
-	return postTypes;
-};
-
-export const usePostTypes = (
-	postTypeName?: string
-): ( PostType | null )[] => {
-	const postTypes = useFetchPostTypes( postTypeName );
-
-	return useMemo( () => postTypes, [ postTypes ] );
-};