@elementor/editor-site-navigation 0.1.0

package/src/components/top-bar/posts-list.tsx

@@ -0,0 +1,41 @@
+import * as React from 'react';
+import {
+	MenuItem,
+	ListSubheader,
+	Typography,
+} from '@elementor/ui';
+
+import { __ } from '@wordpress/i18n';
+import DocTypeChip, { Props } from '../top-bar/chip-doc-type';
+import { Post } from '../../hooks/use-recent-posts';
+
+export type RecentPostsProps = {
+	recentPosts: Post[];
+};
+
+export default function PostsList( { recentPosts }: RecentPostsProps ) {
+	return (
+		<>
+			<ListSubheader sx={ { fontSize: 12, fontStyle: 'italic', pl: 4 } } component="div" id="nested-list-subheader">
+				{ __( 'Recent', 'elementor' ) }
+			</ListSubheader>
+
+			{ recentPosts.length
+				? ( recentPosts.map( ( { title, edit_url: editUrl, type, id } ) => (
+					<MenuItem
+						key={ id }
+						component="a"
+						href={ editUrl }
+					>
+						{ title }
+						<DocTypeChip postType={ type.post_type } docType={ type.doc_type as Props['docType'] } label={ type.label } />
+					</MenuItem>
+				) ) ) : (
+					<Typography variant="caption" sx={ { color: 'grey.500', fontStyle: 'italic', p: 4 } } component="div" aria-label={ undefined }>
+						{ __( 'There are no other pages or templates on this site yet.', 'elementor' ) }
+					</Typography>
+				)
+			}
+		</>
+	);
+}

package/src/components/top-bar/recently-edited.tsx

@@ -0,0 +1,55 @@
+import * as React from 'react';
+import {
+	bindMenu,
+	usePopupState,
+	bindTrigger,
+	Menu,
+	Button,
+	Box,
+} from '@elementor/ui';
+import { ChevronDownIcon } from '@elementor/icons';
+import { useActiveDocument, useHostDocument } from '@elementor/editor-documents';
+import Indicator from './indicator';
+import PostsList from './posts-list';
+import useRecentPosts from '../../hooks/use-recent-posts';
+
+export default function RecentlyEdited() {
+	const activeDocument = useActiveDocument();
+	const hostDocument = useHostDocument();
+	const document = activeDocument && activeDocument.type.value !== 'kit'
+		? activeDocument
+		: hostDocument;
+
+	const { recentPosts } = useRecentPosts( document?.id );
+
+	const popupState = usePopupState( {
+		variant: 'popover',
+		popupId: 'elementor-v2-top-bar-recently-edited',
+	} );
+
+	if ( ! document ) {
+		return null;
+	}
+
+	return (
+		<Box sx={ { cursor: 'default' } }>
+			<Button
+				color="inherit"
+				endIcon={ <ChevronDownIcon /> }
+				{ ...bindTrigger( popupState ) }
+			>
+				<Indicator
+					title={ document.title }
+					status={ document.status }
+				/>
+			</Button>
+
+			<Menu
+				PaperProps={ { sx: { minWidth: 314 } } }
+				{ ...bindMenu( popupState ) }
+			>
+				<PostsList recentPosts={ recentPosts } />
+			</Menu>
+		</Box>
+	);
+}

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

@@ -0,0 +1,49 @@
+import { useEffect, useState } from 'react';
+import { DocType } from '../types';
+import apiFetch from '@wordpress/api-fetch';
+import { addQueryArgs } from '@wordpress/url';
+
+export interface Post {
+	id: number,
+	title: string,
+	edit_url: string,
+	type: {
+		post_type: string,
+		doc_type: DocType,
+		label: string,
+	},
+	date_modified: number,
+}
+
+export default function useRecentPosts( documentId?: number ) {
+	const [ recentPosts, setRecentPosts ] = useState<Post[]>( [] );
+	const [ isLoading, setIsLoading ] = useState( false );
+
+	useEffect( () => {
+		if ( documentId ) {
+			setIsLoading( true );
+
+			fetchRecentlyEditedPosts( documentId ).then( ( posts ) => {
+				setRecentPosts( posts );
+				setIsLoading( false );
+			} );
+		}
+	}, [ documentId ] );
+
+	return {
+		isLoading,
+		recentPosts,
+	};
+}
+
+async function fetchRecentlyEditedPosts( documentId: number ) {
+	const queryParams = {
+		posts_per_page: 5,
+		post__not_in: documentId,
+	};
+
+	return await apiFetch( {
+		path: addQueryArgs( '/elementor/v1/site-navigation/recent-posts', queryParams ),
+	} ).then( ( response ) => response as Post[] )
+		.catch( () => [] );
+}

package/src/index.ts

@@ -0,0 +1,3 @@
+import init from './init';
+
+init();

package/src/init.ts

@@ -0,0 +1,13 @@
+import RecentlyEdited from './components/top-bar/recently-edited';
+import { injectIntoPageIndication } from '@elementor/editor-app-bar';
+
+export default function init() {
+	registerTopBarMenuItems();
+}
+
+function registerTopBarMenuItems() {
+	injectIntoPageIndication( {
+		name: 'document-recently-edited',
+		filler: RecentlyEdited,
+	} );
+}

package/src/types.ts

@@ -0,0 +1 @@
+export type DocType = 'header' | 'footer' | 'single-post' | 'single-page' | 'popup' | 'archive' | 'search-results' | 'loop-item' | 'error-404' | 'landing-page' | 'page' | 'section' | 'container' | 'wp-page' | 'wp-post';