@elementor/editor-site-navigation 0.17.1 → 0.18.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.18.0](https://github.com/elementor/elementor-packages/compare/@elementor/editor-site-navigation@0.17.1...@elementor/editor-site-navigation@0.18.0) (2023-08-02)
+
+
+### Features
+
+* **site-navigation:** pages panel UI changes [ED-11348] ([#98](https://github.com/elementor/elementor-packages/issues/98)) ([d07930c](https://github.com/elementor/elementor-packages/commit/d07930c1c70c90ea59152648bfc5fe405a1f50e3))
+
+
+
+
+
 ## [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

package/dist/index.js

@@ -258,14 +258,13 @@ var import_editor_panels2 = require("@elementor/editor-panels");
 
 // src/components/panel/shell.tsx
 var React23 = __toESM(require("react"));
-var import_ui15 = require("@elementor/ui");
 var import_editor_panels = require("@elementor/editor-panels");
 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_ui13 = require("@elementor/ui");
+var React22 = __toESM(require("react"));
+var import_icons14 = require("@elementor/icons");
+var import_ui14 = require("@elementor/ui");
 
 // src/hooks/use-posts.ts
 var import_query = require("@elementor/query");
@@ -392,7 +391,7 @@ function CollapsibleList({
   children
 }) {
   const [isOpen, setIsOpen] = (0, import_react5.useState)(isOpenByDefault);
-  return /* @__PURE__ */ React7.createElement(React7.Fragment, null, /* @__PURE__ */ React7.createElement(import_ui6.ListItem, { disableGutters: true }, /* @__PURE__ */ React7.createElement(import_ui6.ListItemIcon, null, /* @__PURE__ */ React7.createElement(
+  return /* @__PURE__ */ React7.createElement(React7.Fragment, null, /* @__PURE__ */ React7.createElement(import_ui6.ListItem, null, /* @__PURE__ */ React7.createElement(import_ui6.ListItemIcon, null, /* @__PURE__ */ React7.createElement(
     import_ui6.IconButton,
     {
       onClick: () => setIsOpen((prev) => !prev),
@@ -400,7 +399,7 @@ function CollapsibleList({
       size: "small"
     },
     /* @__PURE__ */ React7.createElement(RotateIcon, { fontSize: "small", isOpen })
-  )), /* @__PURE__ */ React7.createElement(import_ui6.ListItemIcon, null, /* @__PURE__ */ React7.createElement(Icon, null)), /* @__PURE__ */ React7.createElement(import_ui6.ListItemText, null, label)), /* @__PURE__ */ React7.createElement(
+  )), /* @__PURE__ */ React7.createElement(import_ui6.ListItemIcon, null, /* @__PURE__ */ React7.createElement(Icon, null)), /* @__PURE__ */ React7.createElement(import_ui6.ListItemText, { primaryTypographyProps: { variant: "subtitle1", component: "span", sx: { fontWeight: "bold" } }, primary: label })), /* @__PURE__ */ React7.createElement(
     import_ui6.Collapse,
     {
       in: isOpen,
@@ -408,7 +407,7 @@ function CollapsibleList({
       unmountOnExit: true
     },
     /* @__PURE__ */ React7.createElement(import_ui6.List, { dense: true }, children)
-  ));
+  ), /* @__PURE__ */ React7.createElement(import_ui6.Divider, { sx: { my: 3 } }));
 }
 
 // src/components/panel/posts-list/post-list-item.tsx
@@ -490,22 +489,23 @@ function EditModeTemplate({ postTitle, isLoading, callback }) {
   return /* @__PURE__ */ React8.createElement(
     import_ui7.ListItem,
     {
-      selected: true,
-      disablePadding: true,
+      sx: { pt: 1, pl: 0 },
       secondaryAction: /* @__PURE__ */ React8.createElement(CloseButton, { isLoading, closeButton })
     },
-    /* @__PURE__ */ React8.createElement(import_ui7.ListItemIcon, null),
-    /* @__PURE__ */ React8.createElement(import_ui7.Box, { component: "form", onSubmit: onFormSubmit }, /* @__PURE__ */ React8.createElement(
+    /* @__PURE__ */ React8.createElement(import_ui7.Box, { width: "100%", sx: { ml: 4, pr: 3 }, component: "form", onSubmit: onFormSubmit }, /* @__PURE__ */ React8.createElement(
       import_ui7.TextField,
       {
         autoFocus: true,
+        fullWidth: true,
         ref: inputRef,
         defaultValue: postTitle,
         disabled: isLoading,
         error: !!inputError,
         onBlur,
         variant: "outlined",
-        size: "small"
+        color: "secondary",
+        size: "small",
+        margin: "dense"
       }
     ))
   );
@@ -516,6 +516,7 @@ function CloseButton({ isLoading, closeButton }) {
     import_ui7.IconButton,
     {
       size: "small",
+      color: "secondary",
       onClick: resetEditMode,
       ref: closeButton,
       disabled: isLoading
@@ -547,16 +548,19 @@ function ListItemRename({ post }) {
 // src/components/panel/posts-list/list-items/list-item-create.tsx
 var React10 = __toESM(require("react"));
 var import_i18n5 = require("@wordpress/i18n");
+var import_editor_documents4 = require("@elementor/editor-documents");
 function ListItemCreate() {
   const { type, resetEditMode } = usePostListContext();
   const { createPost } = usePostActions(type);
+  const navigateToDocument = (0, import_editor_documents4.useNavigateToDocument)();
   const createPostCallback = (inputValue) => {
     createPost.mutateAsync({
       title: inputValue,
       status: "draft"
     }, {
-      onSuccess: () => {
+      onSuccess: (data) => {
         resetEditMode();
+        navigateToDocument(data.id);
       }
     });
   };
@@ -566,8 +570,10 @@ function ListItemCreate() {
 // src/components/panel/posts-list/list-items/list-item-duplicate.tsx
 var React11 = __toESM(require("react"));
 var import_i18n6 = require("@wordpress/i18n");
+var import_editor_documents5 = require("@elementor/editor-documents");
 function ListItemDuplicate() {
   const { type, editMode, resetEditMode } = usePostListContext();
+  const navigateToDocument = (0, import_editor_documents5.useNavigateToDocument)();
   const { duplicatePost } = usePostActions(type);
   if ("duplicate" !== editMode.mode) {
     return null;
@@ -577,8 +583,9 @@ function ListItemDuplicate() {
       id: editMode.details.postId,
       title: inputValue
     }, {
-      onSuccess: () => {
+      onSuccess: (data) => {
         resetEditMode();
+        navigateToDocument(data.post_id);
       }
     });
   };
@@ -589,7 +596,7 @@ function ListItemDuplicate() {
 var React19 = __toESM(require("react"));
 var import_ui12 = require("@elementor/ui");
 var import_icons12 = require("@elementor/icons");
-var import_editor_documents5 = require("@elementor/editor-documents");
+var import_editor_documents7 = require("@elementor/editor-documents");
 
 // src/components/shared/page-title-and-status.tsx
 var React12 = __toESM(require("react"));
@@ -602,7 +609,7 @@ var PageStatus = ({ status }) => {
     import_ui8.Typography,
     {
       component: "span",
-      variant: "body1",
+      variant: "body2",
       sx: {
         textTransform: "capitalize",
         fontStyle: "italic",
@@ -621,7 +628,7 @@ var PageTitle = ({ title }) => {
     import_ui8.Typography,
     {
       component: "span",
-      variant: "body1",
+      variant: "body2",
       noWrap: true,
       sx: {
         flexBasis: "auto"
@@ -709,10 +716,10 @@ var import_icons9 = require("@elementor/icons");
 var import_i18n9 = require("@wordpress/i18n");
 var import_ui10 = require("@elementor/ui");
 var import_react7 = require("react");
-var import_editor_documents4 = require("@elementor/editor-documents");
+var import_editor_documents6 = require("@elementor/editor-documents");
 function Delete({ post }) {
   const [isDialogOpen, setIsDialogOpen] = (0, import_react7.useState)(false);
-  const activeDocument = (0, import_editor_documents4.useActiveDocument)();
+  const activeDocument = (0, import_editor_documents6.useActiveDocument)();
   const isPostActive = activeDocument?.id === post.id;
   return /* @__PURE__ */ React16.createElement(React16.Fragment, null, /* @__PURE__ */ React16.createElement(
     ActionMenuItem,
@@ -730,7 +737,7 @@ function Delete({ post }) {
 function DeleteDialog({ post, setIsDialogOpen }) {
   const { type } = usePostListContext();
   const { deletePost } = usePostActions(type);
-  const dialogTitle = (0, import_i18n9.sprintf)((0, import_i18n9.__)("Delete \u201C%s\u201D?", "elementor"), post.title.rendered);
+  const dialogTitle = (0, import_i18n9.sprintf)((0, import_i18n9.__)('Delete "%s"?', "elementor"), post.title.rendered);
   const deletePage = async () => {
     await deletePost.mutateAsync(post.id);
   };
@@ -747,7 +754,7 @@ function DeleteDialog({ post, setIsDialogOpen }) {
       onClose: handleCancel,
       "aria-labelledby": "delete-dialog"
     },
-    /* @__PURE__ */ React16.createElement(import_ui10.DialogTitle, null, dialogTitle),
+    /* @__PURE__ */ React16.createElement(import_ui10.DialogTitle, { noWrap: true }, dialogTitle),
     /* @__PURE__ */ React16.createElement(import_ui10.Divider, null),
     /* @__PURE__ */ React16.createElement(import_ui10.DialogContent, null, /* @__PURE__ */ React16.createElement(import_ui10.DialogContentText, null, (0, import_i18n9.__)("The page and its content will be deleted forever and we won\u2019t be able to recover them.", "elementor"))),
     /* @__PURE__ */ React16.createElement(import_ui10.DialogActions, null, /* @__PURE__ */ React16.createElement(import_ui10.Button, { variant: "contained", color: "secondary", onClick: handleCancel, disabled: deletePost.isLoading }, (0, import_i18n9.__)("Cancel", "elementor")), /* @__PURE__ */ React16.createElement(import_ui10.Button, { variant: "contained", color: "error", onClick: deletePage, disabled: deletePost.isLoading }, !deletePost.isLoading ? (0, import_i18n9.__)("Delete", "elementor") : /* @__PURE__ */ React16.createElement(import_ui10.CircularProgress, null)))
@@ -851,8 +858,8 @@ function SetHome({ post }) {
 // 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 activeDocument = (0, import_editor_documents7.useActiveDocument)();
+  const navigateToDocument = (0, import_editor_documents7.useNavigateToDocument)();
   const popupState = (0, import_ui12.usePopupState)({
     variant: "popover",
     popupId: "post-actions",
@@ -867,6 +874,7 @@ function ListItemView({ post }) {
         import_ui12.ToggleButton,
         {
           value: true,
+          color: "secondary",
           size: "small",
           selected: popupState.isOpen,
           ...(0, import_ui12.bindTrigger)(popupState)
@@ -883,7 +891,8 @@ function ListItemView({ post }) {
             navigateToDocument(post.id);
           }
         },
-        dense: true
+        dense: true,
+        disableGutters: true
       },
       /* @__PURE__ */ React19.createElement(import_ui12.ListItemIcon, null),
       /* @__PURE__ */ React19.createElement(
@@ -898,7 +907,7 @@ function ListItemView({ post }) {
   ), /* @__PURE__ */ React19.createElement(
     import_ui12.Menu,
     {
-      PaperProps: { sx: { mt: 4, width: 200 } },
+      PaperProps: { sx: { mt: 2, width: 200 } },
       MenuListProps: { dense: true },
       ...(0, import_ui12.bindMenu)(popupState)
     },
@@ -929,64 +938,72 @@ function PostListItem2({ post }) {
   return /* @__PURE__ */ React20.createElement(ListItemView, { post });
 }
 
+// src/components/panel/add-new-button.tsx
+var React21 = __toESM(require("react"));
+var import_ui13 = require("@elementor/ui");
+var import_icons13 = require("@elementor/icons");
+var import_i18n13 = require("@wordpress/i18n");
+function AddNewButton() {
+  const { setEditMode } = usePostListContext();
+  return /* @__PURE__ */ React21.createElement(
+    import_ui13.Button,
+    {
+      size: "small",
+      sx: { mt: 4, mb: 4, mr: 5 },
+      startIcon: /* @__PURE__ */ React21.createElement(import_icons13.PlusIcon, null),
+      onClick: () => {
+        setEditMode({ mode: "create", details: {} });
+      }
+    },
+    (0, import_i18n13.__)("Add New", "elementor")
+  );
+}
+
 // src/components/panel/posts-list/posts-collapsible-list.tsx
 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_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" }));
+    return /* @__PURE__ */ React22.createElement(import_ui14.Box, { sx: { px: 5 } }, /* @__PURE__ */ React22.createElement(
+      import_ui14.Box,
+      {
+        display: "flex",
+        justifyContent: "flex-end",
+        alignItems: "center"
+      },
+      /* @__PURE__ */ React22.createElement(import_ui14.Skeleton, { sx: { my: 4 }, animation: "wave", variant: "rounded", width: "110px", height: "28px" })
+    ), /* @__PURE__ */ React22.createElement(import_ui14.Box, null, /* @__PURE__ */ React22.createElement(import_ui14.Skeleton, { sx: { my: 3 }, animation: "wave", variant: "rounded", width: "100%", height: "24px" }), /* @__PURE__ */ React22.createElement(import_ui14.Skeleton, { sx: { my: 3 }, animation: "wave", variant: "rounded", width: "70%", height: "24px" }), /* @__PURE__ */ React22.createElement(import_ui14.Skeleton, { sx: { my: 3 }, animation: "wave", variant: "rounded", width: "70%", height: "24px" }), /* @__PURE__ */ React22.createElement(import_ui14.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;
-  return /* @__PURE__ */ React21.createElement(import_ui13.List, { dense: true }, /* @__PURE__ */ React21.createElement(
+  return /* @__PURE__ */ React22.createElement(React22.Fragment, null, /* @__PURE__ */ React22.createElement(
+    import_ui14.Box,
+    {
+      display: "flex",
+      justifyContent: "flex-end",
+      alignItems: "center"
+    },
+    /* @__PURE__ */ React22.createElement(AddNewButton, null)
+  ), /* @__PURE__ */ React22.createElement(import_ui14.List, { dense: true }, /* @__PURE__ */ React22.createElement(
     CollapsibleList,
     {
       label,
-      Icon: import_icons13.PageTypeIcon,
+      Icon: import_icons14.PageTypeIcon,
       isOpenByDefault: isOpenByDefault || false
     },
     posts.map((post) => {
       post = { ...post, isHome: post.id === homepageId };
-      return /* @__PURE__ */ React21.createElement(PostListItem2, { key: post.id, post });
+      return /* @__PURE__ */ React22.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_ui14 = require("@elementor/ui");
-var import_icons14 = require("@elementor/icons");
-var import_i18n13 = require("@wordpress/i18n");
-function AddNewButton() {
-  const { setEditMode } = usePostListContext();
-  return /* @__PURE__ */ React22.createElement(
-    import_ui14.Button,
-    {
-      size: "small",
-      sx: { mt: 4, mb: 4, mr: 5 },
-      startIcon: /* @__PURE__ */ React22.createElement(import_icons14.PlusIcon, null),
-      onClick: () => {
-        setEditMode({ mode: "create", details: {} });
-      }
-    },
-    (0, import_i18n13.__)("Add New", "elementor")
-  );
+    ["duplicate", "create"].includes(editMode.mode) && /* @__PURE__ */ React22.createElement(PostListItem2, null)
+  )));
 }
 
 // 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_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",
-      alignItems: "center"
-    },
-    /* @__PURE__ */ React23.createElement(AddNewButton, null)
-  ), /* @__PURE__ */ React23.createElement(PostsCollapsibleList, { isOpenByDefault: true }))));
+  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(PostsCollapsibleList, { isOpenByDefault: true }))));
 };
 var shell_default = Shell;
 

package/dist/index.mjs

@@ -240,12 +240,11 @@ import { createPanel } from "@elementor/editor-panels";
 
 // src/components/panel/shell.tsx
 import * as React23 from "react";
-import { Box as Box5 } from "@elementor/ui";
 import { Panel, PanelBody, PanelHeader, PanelHeaderTitle } from "@elementor/editor-panels";
 import { __ as __14 } from "@wordpress/i18n";
 
 // src/components/panel/posts-list/posts-collapsible-list.tsx
-import * as React21 from "react";
+import * as React22 from "react";
 import { PageTypeIcon as PageTypeIcon2 } from "@elementor/icons";
 import { Skeleton, Box as Box4, List as List2 } from "@elementor/ui";
 
@@ -357,7 +356,7 @@ function usePostListContext() {
 // src/components/panel/posts-list/collapsible-list.tsx
 import * as React7 from "react";
 import { useState as useState4 } from "react";
-import { Collapse, IconButton, List, ListItem, ListItemIcon as ListItemIcon2, ListItemText, styled } from "@elementor/ui";
+import { Collapse, IconButton, List, ListItem, ListItemIcon as ListItemIcon2, ListItemText, styled, Divider as Divider2 } from "@elementor/ui";
 import { ChevronDownIcon as ChevronDownIcon2 } from "@elementor/icons";
 var RotateIcon = styled(ChevronDownIcon2, {
   shouldForwardProp: (prop) => prop !== "isOpen"
@@ -374,7 +373,7 @@ function CollapsibleList({
   children
 }) {
   const [isOpen, setIsOpen] = useState4(isOpenByDefault);
-  return /* @__PURE__ */ React7.createElement(React7.Fragment, null, /* @__PURE__ */ React7.createElement(ListItem, { disableGutters: true }, /* @__PURE__ */ React7.createElement(ListItemIcon2, null, /* @__PURE__ */ React7.createElement(
+  return /* @__PURE__ */ React7.createElement(React7.Fragment, null, /* @__PURE__ */ React7.createElement(ListItem, null, /* @__PURE__ */ React7.createElement(ListItemIcon2, null, /* @__PURE__ */ React7.createElement(
     IconButton,
     {
       onClick: () => setIsOpen((prev) => !prev),
@@ -382,7 +381,7 @@ function CollapsibleList({
       size: "small"
     },
     /* @__PURE__ */ React7.createElement(RotateIcon, { fontSize: "small", isOpen })
-  )), /* @__PURE__ */ React7.createElement(ListItemIcon2, null, /* @__PURE__ */ React7.createElement(Icon, null)), /* @__PURE__ */ React7.createElement(ListItemText, null, label)), /* @__PURE__ */ React7.createElement(
+  )), /* @__PURE__ */ React7.createElement(ListItemIcon2, null, /* @__PURE__ */ React7.createElement(Icon, null)), /* @__PURE__ */ React7.createElement(ListItemText, { primaryTypographyProps: { variant: "subtitle1", component: "span", sx: { fontWeight: "bold" } }, primary: label })), /* @__PURE__ */ React7.createElement(
     Collapse,
     {
       in: isOpen,
@@ -390,7 +389,7 @@ function CollapsibleList({
       unmountOnExit: true
     },
     /* @__PURE__ */ React7.createElement(List, { dense: true }, children)
-  ));
+  ), /* @__PURE__ */ React7.createElement(Divider2, { sx: { my: 3 } }));
 }
 
 // src/components/panel/posts-list/post-list-item.tsx
@@ -441,7 +440,6 @@ import { useState as useState5, useRef } from "react";
 import {
   Box as Box2,
   ListItem as ListItem2,
-  ListItemIcon as ListItemIcon3,
   TextField,
   IconButton as IconButton2,
   CircularProgress as CircularProgress2
@@ -479,22 +477,23 @@ function EditModeTemplate({ postTitle, isLoading, callback }) {
   return /* @__PURE__ */ React8.createElement(
     ListItem2,
     {
-      selected: true,
-      disablePadding: true,
+      sx: { pt: 1, pl: 0 },
       secondaryAction: /* @__PURE__ */ React8.createElement(CloseButton, { isLoading, closeButton })
     },
-    /* @__PURE__ */ React8.createElement(ListItemIcon3, null),
-    /* @__PURE__ */ React8.createElement(Box2, { component: "form", onSubmit: onFormSubmit }, /* @__PURE__ */ React8.createElement(
+    /* @__PURE__ */ React8.createElement(Box2, { width: "100%", sx: { ml: 4, pr: 3 }, component: "form", onSubmit: onFormSubmit }, /* @__PURE__ */ React8.createElement(
       TextField,
       {
         autoFocus: true,
+        fullWidth: true,
         ref: inputRef,
         defaultValue: postTitle,
         disabled: isLoading,
         error: !!inputError,
         onBlur,
         variant: "outlined",
-        size: "small"
+        color: "secondary",
+        size: "small",
+        margin: "dense"
       }
     ))
   );
@@ -505,6 +504,7 @@ function CloseButton({ isLoading, closeButton }) {
     IconButton2,
     {
       size: "small",
+      color: "secondary",
       onClick: resetEditMode,
       ref: closeButton,
       disabled: isLoading
@@ -536,16 +536,19 @@ function ListItemRename({ post }) {
 // src/components/panel/posts-list/list-items/list-item-create.tsx
 import * as React10 from "react";
 import { __ as __5 } from "@wordpress/i18n";
+import { useNavigateToDocument as useNavigateToDocument3 } from "@elementor/editor-documents";
 function ListItemCreate() {
   const { type, resetEditMode } = usePostListContext();
   const { createPost } = usePostActions(type);
+  const navigateToDocument = useNavigateToDocument3();
   const createPostCallback = (inputValue) => {
     createPost.mutateAsync({
       title: inputValue,
       status: "draft"
     }, {
-      onSuccess: () => {
+      onSuccess: (data) => {
         resetEditMode();
+        navigateToDocument(data.id);
       }
     });
   };
@@ -555,8 +558,10 @@ function ListItemCreate() {
 // src/components/panel/posts-list/list-items/list-item-duplicate.tsx
 import * as React11 from "react";
 import { __ as __6 } from "@wordpress/i18n";
+import { useNavigateToDocument as useNavigateToDocument4 } from "@elementor/editor-documents";
 function ListItemDuplicate() {
   const { type, editMode, resetEditMode } = usePostListContext();
+  const navigateToDocument = useNavigateToDocument4();
   const { duplicatePost } = usePostActions(type);
   if ("duplicate" !== editMode.mode) {
     return null;
@@ -566,8 +571,9 @@ function ListItemDuplicate() {
       id: editMode.details.postId,
       title: inputValue
     }, {
-      onSuccess: () => {
+      onSuccess: (data) => {
         resetEditMode();
+        navigateToDocument(data.post_id);
       }
     });
   };
@@ -579,17 +585,17 @@ import * as React19 from "react";
 import {
   bindMenu as bindMenu2,
   bindTrigger as bindTrigger2,
-  Divider as Divider3,
+  Divider as Divider4,
   ListItem as ListItem3,
   ListItemButton as ListItemButton2,
-  ListItemIcon as ListItemIcon5,
+  ListItemIcon as ListItemIcon4,
   ListItemText as ListItemText3,
   Menu as Menu2,
   ToggleButton,
   usePopupState as usePopupState2
 } from "@elementor/ui";
 import { DotsVerticalIcon, HomeIcon as HomeIcon2 } from "@elementor/icons";
-import { useActiveDocument as useActiveDocument3, useNavigateToDocument as useNavigateToDocument3 } from "@elementor/editor-documents";
+import { useActiveDocument as useActiveDocument3, useNavigateToDocument as useNavigateToDocument5 } from "@elementor/editor-documents";
 
 // src/components/shared/page-title-and-status.tsx
 import * as React12 from "react";
@@ -602,7 +608,7 @@ var PageStatus = ({ status }) => {
     Typography3,
     {
       component: "span",
-      variant: "body1",
+      variant: "body2",
       sx: {
         textTransform: "capitalize",
         fontStyle: "italic",
@@ -621,7 +627,7 @@ var PageTitle = ({ title }) => {
     Typography3,
     {
       component: "span",
-      variant: "body1",
+      variant: "body2",
       noWrap: true,
       sx: {
         flexBasis: "auto"
@@ -641,14 +647,19 @@ import { __ as __7 } from "@wordpress/i18n";
 
 // src/components/panel/actions-menu/action-menu-item.tsx
 import * as React13 from "react";
-import { ListItemButton, ListItemIcon as ListItemIcon4, ListItemText as ListItemText2, MenuItem as MenuItem3 } from "@elementor/ui";
+import {
+  ListItemButton,
+  ListItemIcon as ListItemIcon3,
+  ListItemText as ListItemText2,
+  MenuItem as MenuItem3
+} from "@elementor/ui";
 function ActionMenuItem({ title, icon: Icon, ListItemButtonProps }) {
   return /* @__PURE__ */ React13.createElement(MenuItem3, { disableGutters: true }, /* @__PURE__ */ React13.createElement(
     ListItemButton,
     {
       ...ListItemButtonProps
     },
-    /* @__PURE__ */ React13.createElement(ListItemIcon4, null, /* @__PURE__ */ React13.createElement(Icon, null)),
+    /* @__PURE__ */ React13.createElement(ListItemIcon3, null, /* @__PURE__ */ React13.createElement(Icon, null)),
     /* @__PURE__ */ React13.createElement(ListItemText2, null, title)
   ));
 }
@@ -715,7 +726,7 @@ import {
   DialogContent,
   DialogContentText,
   DialogTitle,
-  Divider as Divider2
+  Divider as Divider3
 } from "@elementor/ui";
 import { useState as useState6 } from "react";
 import { useActiveDocument as useActiveDocument2 } from "@elementor/editor-documents";
@@ -739,7 +750,7 @@ function Delete({ post }) {
 function DeleteDialog({ post, setIsDialogOpen }) {
   const { type } = usePostListContext();
   const { deletePost } = usePostActions(type);
-  const dialogTitle = sprintf(__9("Delete \u201C%s\u201D?", "elementor"), post.title.rendered);
+  const dialogTitle = sprintf(__9('Delete "%s"?', "elementor"), post.title.rendered);
   const deletePage = async () => {
     await deletePost.mutateAsync(post.id);
   };
@@ -756,8 +767,8 @@ function DeleteDialog({ post, setIsDialogOpen }) {
       onClose: handleCancel,
       "aria-labelledby": "delete-dialog"
     },
-    /* @__PURE__ */ React16.createElement(DialogTitle, null, dialogTitle),
-    /* @__PURE__ */ React16.createElement(Divider2, null),
+    /* @__PURE__ */ React16.createElement(DialogTitle, { noWrap: true }, dialogTitle),
+    /* @__PURE__ */ React16.createElement(Divider3, null),
     /* @__PURE__ */ React16.createElement(DialogContent, null, /* @__PURE__ */ React16.createElement(DialogContentText, null, __9("The page and its content will be deleted forever and we won\u2019t be able to recover them.", "elementor"))),
     /* @__PURE__ */ React16.createElement(DialogActions, null, /* @__PURE__ */ React16.createElement(Button2, { variant: "contained", color: "secondary", onClick: handleCancel, disabled: deletePost.isLoading }, __9("Cancel", "elementor")), /* @__PURE__ */ React16.createElement(Button2, { variant: "contained", color: "error", onClick: deletePage, disabled: deletePost.isLoading }, !deletePost.isLoading ? __9("Delete", "elementor") : /* @__PURE__ */ React16.createElement(CircularProgress3, null)))
   );
@@ -861,7 +872,7 @@ function SetHome({ post }) {
 import { __ as __12 } from "@wordpress/i18n";
 function ListItemView({ post }) {
   const activeDocument = useActiveDocument3();
-  const navigateToDocument = useNavigateToDocument3();
+  const navigateToDocument = useNavigateToDocument5();
   const popupState = usePopupState2({
     variant: "popover",
     popupId: "post-actions",
@@ -876,6 +887,7 @@ function ListItemView({ post }) {
         ToggleButton,
         {
           value: true,
+          color: "secondary",
           size: "small",
           selected: popupState.isOpen,
           ...bindTrigger2(popupState)
@@ -892,9 +904,10 @@ function ListItemView({ post }) {
             navigateToDocument(post.id);
           }
         },
-        dense: true
+        dense: true,
+        disableGutters: true
       },
-      /* @__PURE__ */ React19.createElement(ListItemIcon5, null),
+      /* @__PURE__ */ React19.createElement(ListItemIcon4, null),
       /* @__PURE__ */ React19.createElement(
         ListItemText3,
         {
@@ -902,12 +915,12 @@ function ListItemView({ post }) {
         },
         /* @__PURE__ */ React19.createElement(PageTitleAndStatus, { page: post })
       ),
-      post.isHome && /* @__PURE__ */ React19.createElement(ListItemIcon5, null, /* @__PURE__ */ React19.createElement(HomeIcon2, { titleAccess: __12("Homepage", "elementor"), color: "disabled" }))
+      post.isHome && /* @__PURE__ */ React19.createElement(ListItemIcon4, null, /* @__PURE__ */ React19.createElement(HomeIcon2, { titleAccess: __12("Homepage", "elementor"), color: "disabled" }))
     )
   ), /* @__PURE__ */ React19.createElement(
     Menu2,
     {
-      PaperProps: { sx: { mt: 4, width: 200 } },
+      PaperProps: { sx: { mt: 2, width: 200 } },
       MenuListProps: { dense: true },
       ...bindMenu2(popupState)
     },
@@ -915,7 +928,7 @@ function ListItemView({ post }) {
     /* @__PURE__ */ React19.createElement(Duplicate, { post, popupState }),
     /* @__PURE__ */ React19.createElement(Delete, { post }),
     /* @__PURE__ */ React19.createElement(View, { post }),
-    /* @__PURE__ */ React19.createElement(Divider3, null),
+    /* @__PURE__ */ React19.createElement(Divider4, null),
     /* @__PURE__ */ React19.createElement(SetHome, { post })
   ));
 }
@@ -938,45 +951,19 @@ function PostListItem2({ post }) {
   return /* @__PURE__ */ React20.createElement(ListItemView, { post });
 }
 
-// src/components/panel/posts-list/posts-collapsible-list.tsx
-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,
-    {
-      label,
-      Icon: PageTypeIcon2,
-      isOpenByDefault: isOpenByDefault || false
-    },
-    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
-import * as React22 from "react";
+import * as React21 from "react";
 import { Button as Button3 } from "@elementor/ui";
 import { PlusIcon as PlusIcon2 } from "@elementor/icons";
 import { __ as __13 } from "@wordpress/i18n";
 function AddNewButton() {
   const { setEditMode } = usePostListContext();
-  return /* @__PURE__ */ React22.createElement(
+  return /* @__PURE__ */ React21.createElement(
     Button3,
     {
       size: "small",
       sx: { mt: 4, mb: 4, mr: 5 },
-      startIcon: /* @__PURE__ */ React22.createElement(PlusIcon2, null),
+      startIcon: /* @__PURE__ */ React21.createElement(PlusIcon2, null),
       onClick: () => {
         setEditMode({ mode: "create", details: {} });
       }
@@ -985,17 +972,51 @@ function AddNewButton() {
   );
 }
 
-// src/components/panel/shell.tsx
-var Shell = () => {
-  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,
+// src/components/panel/posts-list/posts-collapsible-list.tsx
+function PostsCollapsibleList({ isOpenByDefault = false }) {
+  const { type, editMode } = usePostListContext();
+  const { data: posts, isLoading: postsLoading } = usePosts(type);
+  const { data: homepageSettings } = useHomepage();
+  if (!posts || postsLoading) {
+    return /* @__PURE__ */ React22.createElement(Box4, { sx: { px: 5 } }, /* @__PURE__ */ React22.createElement(
+      Box4,
+      {
+        display: "flex",
+        justifyContent: "flex-end",
+        alignItems: "center"
+      },
+      /* @__PURE__ */ React22.createElement(Skeleton, { sx: { my: 4 }, animation: "wave", variant: "rounded", width: "110px", height: "28px" })
+    ), /* @__PURE__ */ React22.createElement(Box4, null, /* @__PURE__ */ React22.createElement(Skeleton, { sx: { my: 3 }, animation: "wave", variant: "rounded", width: "100%", height: "24px" }), /* @__PURE__ */ React22.createElement(Skeleton, { sx: { my: 3 }, animation: "wave", variant: "rounded", width: "70%", height: "24px" }), /* @__PURE__ */ React22.createElement(Skeleton, { sx: { my: 3 }, animation: "wave", variant: "rounded", width: "70%", height: "24px" }), /* @__PURE__ */ React22.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;
+  return /* @__PURE__ */ React22.createElement(React22.Fragment, null, /* @__PURE__ */ React22.createElement(
+    Box4,
     {
       display: "flex",
       justifyContent: "flex-end",
       alignItems: "center"
     },
-    /* @__PURE__ */ React23.createElement(AddNewButton, null)
-  ), /* @__PURE__ */ React23.createElement(PostsCollapsibleList, { isOpenByDefault: true }))));
+    /* @__PURE__ */ React22.createElement(AddNewButton, null)
+  ), /* @__PURE__ */ React22.createElement(List2, { dense: true }, /* @__PURE__ */ React22.createElement(
+    CollapsibleList,
+    {
+      label,
+      Icon: PageTypeIcon2,
+      isOpenByDefault: isOpenByDefault || false
+    },
+    posts.map((post) => {
+      post = { ...post, isHome: post.id === homepageId };
+      return /* @__PURE__ */ React22.createElement(PostListItem2, { key: post.id, post });
+    }),
+    ["duplicate", "create"].includes(editMode.mode) && /* @__PURE__ */ React22.createElement(PostListItem2, null)
+  )));
+}
+
+// src/components/panel/shell.tsx
+var Shell = () => {
+  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(PostsCollapsibleList, { isOpenByDefault: true }))));
 };
 var shell_default = Shell;
 

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@elementor/editor-site-navigation",
-	"version": "0.17.1",
+	"version": "0.18.0",
 	"private": false,
 	"author": "Elementor Team",
 	"homepage": "https://elementor.com/",
@@ -34,7 +34,7 @@
 	"dependencies": {
 		"@elementor/editor-app-bar": "^0.7.0",
 		"@elementor/editor-documents": "^0.8.3",
-		"@elementor/editor-panels": "^0.1.6",
+		"@elementor/editor-panels": "^0.2.0",
 		"@elementor/env": "^0.2.0",
 		"@elementor/icons": "^0.7.0",
 		"@elementor/query": "^0.1.1",
@@ -49,5 +49,5 @@
 	"elementor": {
 		"type": "extension"
 	},
-	"gitHead": "3a35a0487b8a72853b7f307fed47fd72ea311d06"
+	"gitHead": "2509694411a0750d4fb99c253ad21cb9d950686f"
 }

package/src/api/post.ts

@@ -44,7 +44,7 @@ export const getRequest = ( postTypeSlug: Slug ) => {
 export const createRequest = ( postTypeSlug: Slug, newPost: NewPost ) => {
 	const path = `/wp/v2/${ postTypesMap[ postTypeSlug ].rest_base }`;
 
-	return apiFetch( {
+	return apiFetch<{ id: number }>( {
 		path,
 		method: 'POST',
 		data: newPost,
@@ -74,7 +74,7 @@ export const deleteRequest = ( postTypeSlug: Slug, postId: number ) => {
 export const duplicateRequest = ( originalPost: UpdatePost ) => {
 	const path = `/elementor/v1/site-navigation/duplicate-post`;
 
-	return apiFetch( {
+	return apiFetch<{ post_id: number }>( {
 		path,
 		method: 'POST',
 		data: {

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

@@ -1,5 +1,11 @@
 import * as React from 'react';
-import { ListItemButton, ListItemIcon, ListItemText, MenuItem, ListItemButtonProps as ListItemButtonPropsType } from '@elementor/ui';
+import {
+	ListItemButton,
+	ListItemIcon,
+	ListItemText,
+	MenuItem,
+	ListItemButtonProps as ListItemButtonPropsType,
+} from '@elementor/ui';
 import { ComponentType } from 'react';
 
 export type Props = {

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

@@ -45,7 +45,7 @@ describe( '@elementor/editor-site-navigation/pages-panel-actions - Delete', () =
 		// Open the modal.
 		fireEvent.click( button );
 
-		const modal = screen.getByText( 'Delete “Test Page”?' );
+		const modal = screen.getByText( 'Delete "Test Page"?' );
 		expect( modal ).toBeInTheDocument();
 
 		const modalButtons = screen.getAllByRole( 'button' );

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

@@ -52,7 +52,7 @@ function DeleteDialog( { post, setIsDialogOpen }: { post: Post, setIsDialogOpen:
 	const { deletePost } = usePostActions( type );
 
 	/* translators: %s: Post title. */
-	const dialogTitle = sprintf( __( 'Delete “%s”?', 'elementor' ), post.title.rendered );
+	const dialogTitle = sprintf( __( 'Delete "%s"?', 'elementor' ), post.title.rendered );
 
 	const deletePage = async () => {
 		await deletePost.mutateAsync( post.id );
@@ -72,7 +72,7 @@ function DeleteDialog( { post, setIsDialogOpen }: { post: Post, setIsDialogOpen:
 			onClose={ handleCancel }
 			aria-labelledby="delete-dialog"
 		>
-			<DialogTitle>
+			<DialogTitle noWrap>
 				{ dialogTitle }
 			</DialogTitle>
 			<Divider />

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

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { ComponentType, PropsWithChildren, useState } from 'react';
-import { Collapse, IconButton, List, ListItem, ListItemIcon, ListItemText, styled, SvgIconProps } from '@elementor/ui';
+import { Collapse, IconButton, List, ListItem, ListItemIcon, ListItemText, styled, SvgIconProps, Divider } from '@elementor/ui';
 import { ChevronDownIcon } from '@elementor/icons';
 
 type Props = {
@@ -35,7 +35,7 @@ export default function CollapsibleList(
 
 	return (
 		<>
-			<ListItem disableGutters>
+			<ListItem>
 				<ListItemIcon>
 					<IconButton
 						onClick={ () => setIsOpen( ( prev ) => ! prev ) }
@@ -48,7 +48,7 @@ export default function CollapsibleList(
 				<ListItemIcon>
 					<Icon />
 				</ListItemIcon>
-				<ListItemText>{ label }</ListItemText>
+				<ListItemText primaryTypographyProps={ { variant: 'subtitle1', component: 'span', sx: { fontWeight: 'bold' } } } primary={ label } />
 			</ListItem>
 			<Collapse
 				in={ isOpen }
@@ -58,6 +58,7 @@ export default function CollapsibleList(
 					{ children }
 				</List>
 			</Collapse>
+			<Divider sx={ { my: 3 } } />
 		</>
 	);
 }

package/src/components/panel/posts-list/list-items/edit-mode-template.tsx

@@ -3,7 +3,6 @@ import { useState, useRef, FormEvent, MutableRefObject, FocusEvent } from 'react
 import {
 	Box,
 	ListItem,
-	ListItemIcon,
 	TextField,
 	IconButton,
 	CircularProgress,
@@ -57,21 +56,22 @@ export default function EditModeTemplate( { postTitle, isLoading, callback }: Pr
 
 	return (
 		<ListItem
-			selected={ true }
-			disablePadding
+			sx={ { pt: 1, pl: 0 } }
 			secondaryAction={ <CloseButton isLoading={ isLoading } closeButton={ closeButton } /> }
 		>
-			<ListItemIcon />
-			<Box component="form" onSubmit={ onFormSubmit }>
+			<Box width="100%" sx={ { ml: 4, pr: 3 } } component="form" onSubmit={ onFormSubmit }>
 				<TextField
 					autoFocus // eslint-disable-line jsx-a11y/no-autofocus
+					fullWidth
 					ref={ inputRef }
 					defaultValue={ postTitle }
 					disabled={ isLoading }
 					error={ !! inputError }
 					onBlur={ onBlur }
 					variant="outlined"
+					color="secondary"
 					size="small"
+					margin="dense"
 				/>
 			</Box>
 		</ListItem>
@@ -89,6 +89,7 @@ function CloseButton( { isLoading, closeButton }: CloseButtonProps ) {
 	return (
 		<IconButton
 			size="small"
+			color="secondary"
 			onClick={ resetEditMode }
 			ref={ closeButton }
 			disabled={ isLoading }

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

@@ -3,18 +3,22 @@ import { __ } from '@wordpress/i18n';
 import { usePostListContext } from '../../../../contexts/post-list-context';
 import { usePostActions } from '../../../../hooks/use-posts-actions';
 import EditModeTemplate from './edit-mode-template';
+import { useNavigateToDocument } from '@elementor/editor-documents';
 
 export default function ListItemCreate() {
 	const { type, resetEditMode } = usePostListContext();
 	const { createPost } = usePostActions( type );
+	const navigateToDocument = useNavigateToDocument();
 
 	const createPostCallback = ( inputValue: string ) => {
 		createPost.mutateAsync( {
 			title: inputValue,
 			status: 'draft',
 		}, {
-			onSuccess: () => {
+			onSuccess: ( data ) => {
 				resetEditMode();
+
+				navigateToDocument( data.id );
 			},
 		} );
 	};

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

@@ -3,9 +3,11 @@ import { __ } from '@wordpress/i18n';
 import { usePostListContext } from '../../../../contexts/post-list-context';
 import { usePostActions } from '../../../../hooks/use-posts-actions';
 import EditModeTemplate from './edit-mode-template';
+import { useNavigateToDocument } from '@elementor/editor-documents';
 
 export default function ListItemDuplicate() {
 	const { type, editMode, resetEditMode } = usePostListContext();
+	const navigateToDocument = useNavigateToDocument();
 	const { duplicatePost } = usePostActions( type );
 
 	if ( 'duplicate' !== editMode.mode ) {
@@ -17,8 +19,10 @@ export default function ListItemDuplicate() {
 			id: editMode.details.postId,
 			title: inputValue,
 		}, {
-			onSuccess: () => {
+			onSuccess: ( data ) => {
 				resetEditMode();
+
+				navigateToDocument( data.post_id );
 			},
 		} );
 	};

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

@@ -41,6 +41,7 @@ export default function ListItemView( { post }: { post: Post } ) {
 				secondaryAction={
 					<ToggleButton
 						value
+						color="secondary"
 						size="small"
 						selected={ popupState.isOpen }
 						{ ...bindTrigger( popupState ) }
@@ -57,6 +58,7 @@ export default function ListItemView( { post }: { post: Post } ) {
 						}
 					} }
 					dense
+					disableGutters
 				>
 					<ListItemIcon />
 					<ListItemText
@@ -72,7 +74,7 @@ export default function ListItemView( { post }: { post: Post } ) {
 				</ListItemButton>
 			</ListItem>
 			<Menu
-				PaperProps={ { sx: { mt: 4, width: 200 } } }
+				PaperProps={ { sx: { mt: 2, width: 200 } } }
 				MenuListProps={ { dense: true } }
 				{ ...bindMenu( popupState ) }
 			>

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

@@ -7,6 +7,7 @@ import { postTypesMap } from '../../../api/post';
 import CollapsibleList from './collapsible-list';
 import PostListItem from './post-list-item';
 import { useHomepage } from '../../../hooks/use-homepage';
+import AddNewButton from '../add-new-button';
 
 type Props = {
 	isOpenByDefault?: boolean,
@@ -19,9 +20,20 @@ export default function PostsCollapsibleList( { isOpenByDefault = false }: Props
 
 	if ( ! posts || postsLoading ) {
 		return (
-			<Box spacing={ 4 } sx={ { px: 6 } }>
-				<Skeleton variant="text" sx={ { fontSize: '2rem' } } />
-				<Skeleton variant="rounded" width="100%" height="48" />
+			<Box sx={ { px: 5 } }>
+				<Box
+					display="flex"
+					justifyContent="flex-end"
+					alignItems="center"
+				>
+					<Skeleton sx={ { my: 4 } } animation="wave" variant="rounded" width="110px" height="28px" />
+				</Box>
+				<Box >
+					<Skeleton sx={ { my: 3 } } animation="wave" variant="rounded" width="100%" height="24px" />
+					<Skeleton sx={ { my: 3 } } animation="wave" variant="rounded" width="70%" height="24px" />
+					<Skeleton sx={ { my: 3 } } animation="wave" variant="rounded" width="70%" height="24px" />
+					<Skeleton sx={ { my: 3 } } animation="wave" variant="rounded" width="70%" height="24px" />
+				</Box>
 			</Box>
 		);
 	}
@@ -32,21 +44,30 @@ export default function PostsCollapsibleList( { isOpenByDefault = false }: Props
 	const homepageId = isHomepageSet ? homepageSettings.page_on_front : null;
 
 	return (
-		<List dense>
-			<CollapsibleList
-				label={ label }
-				Icon={ PageTypeIcon }
-				isOpenByDefault={ isOpenByDefault || false }
+		<>
+			<Box
+				display="flex"
+				justifyContent="flex-end"
+				alignItems="center"
 			>
-				{ posts.map( ( post ) => {
-					post = { ...post, isHome: post.id === homepageId };
-					return <PostListItem key={ post.id } post={ post } />;
-				} ) }
-				{
-					[ 'duplicate', 'create' ].includes( editMode.mode ) &&
+				<AddNewButton />
+			</Box>
+			<List dense>
+				<CollapsibleList
+					label={ label }
+					Icon={ PageTypeIcon }
+					isOpenByDefault={ isOpenByDefault || false }
+				>
+					{ posts.map( ( post ) => {
+						post = { ...post, isHome: post.id === homepageId };
+						return <PostListItem key={ post.id } post={ post } />;
+					} ) }
+					{
+						[ 'duplicate', 'create' ].includes( editMode.mode ) &&
 						<PostListItem />
-				}
-			</CollapsibleList>
-		</List>
+					}
+				</CollapsibleList>
+			</List>
+		</>
 	);
 }

package/src/components/panel/shell.tsx

@@ -1,10 +1,8 @@
 import * as React from 'react';
-import { Box } from '@elementor/ui';
 import { Panel, PanelBody, PanelHeader, PanelHeaderTitle } from '@elementor/editor-panels';
 import { __ } from '@wordpress/i18n';
 import PostsCollapsibleList from './posts-list/posts-collapsible-list';
 import { PostListContextProvider } from '../../contexts/post-list-context';
-import AddNewButton from './add-new-button';
 
 const Shell = () => {
 	return (
@@ -14,13 +12,6 @@ const Shell = () => {
 			</PanelHeader>
 			<PanelBody>
 				<PostListContextProvider type={ 'page' }>
-					<Box
-						display="flex"
-						justifyContent="flex-end"
-						alignItems="center"
-					>
-						<AddNewButton />
-					</Box>
 					<PostsCollapsibleList isOpenByDefault={ true } />
 				</PostListContextProvider>
 			</PanelBody>

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

@@ -11,7 +11,7 @@ const PageStatus = ( { status }: { status: string } ) => {
 	return (
 		<Typography
 			component="span"
-			variant="body1"
+			variant="body2"
 			sx={ {
 				textTransform: 'capitalize',
 				fontStyle: 'italic',
@@ -30,7 +30,7 @@ const PageTitle = ( { title }: { title: string } ) => {
 	return (
 		<Typography
 			component="span"
-			variant="body1"
+			variant="body2"
 			noWrap
 			sx={ {
 				flexBasis: 'auto',