Create a JS version of Page List for the editor

packages/block-library/src/page-list/edit.js

@@ -11,7 +11,6 @@ import {
 	useBlockProps,
 	store as blockEditorStore,
 } from '@wordpress/block-editor';
-import ServerSideRender from '@wordpress/server-side-render';
 import { ToolbarButton } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { useEffect, useState } from '@wordpress/element';
@@ -23,16 +22,52 @@ import { addQueryArgs } from '@wordpress/url';
  * Internal dependencies
  */
 import ConvertToLinksModal from './convert-to-links-modal';
+import { ItemSubmenuIcon } from '../navigation-link/icons';
 
 // We only show the edit option when page count is <= MAX_PAGE_COUNT
 // Performance of Navigation Links is not good past this value.
 const MAX_PAGE_COUNT = 100;
 
+const Menu = ( { pagesByParentId, parentId, depth = 0 } ) => {
+	return pagesByParentId.get( parentId )?.map( ( page ) => {
+		const hasChildren = pagesByParentId.has( page.id );
+		const classes = classnames( 'wp-block-pages-list__item', {
+			'has-child': hasChildren,
+		} );
+
+		return (
+			<li key={ page.id } className={ classes }>
+				<a
+					href={ page.link }
+					className="wp-block-pages-list__item__link"
+				>
+					{ page.title?.rendered }
+				</a>
+				{ hasChildren && (
+					<>
+						<span className="wp-block-page-list__submenu-icon">
+							<ItemSubmenuIcon />
+						</span>
+						<ul className="submenu-container">
+							<Menu
+								pagesByParentId={ pagesByParentId }
+								parentId={ page.id }
+								depth={ depth + 1 }
+							/>
+						</ul>
+					</>
+				) }
+			</li>
+		);
+	} );
+};
+
 export default function PageListEdit( { context, clientId } ) {
 	const { textColor, backgroundColor, showSubmenuIcon, style } =
 		context || {};
 
 	const [ allowConvertToLinks, setAllowConvertToLinks ] = useState( false );
+	const [ pagesByParentId, setPagesByParentId ] = useState( new Map( [ [ 0, [] ] ] ) );
 
 	const blockProps = useBlockProps( {
 		className: classnames( {
@@ -74,6 +109,27 @@ export default function PageListEdit( { context, clientId } ) {
 		}
 	}, [ isParentNavigation ] );
 
+	useEffect( () => {
+		apiFetch( {
+			path: addQueryArgs( '/wp/v2/pages', {
+				orderby: 'menu_order',
+				order: 'asc',
+				_fields: [ 'id', 'link', 'parent', 'title' ],
+			} ),
+		} ).then( ( res ) => {
+			const groupedPages = res.reduce( ( parentMap, page ) => {
+				const { parent } = page;
+				if ( parentMap.has( parent ) ) {
+					parentMap.get( parent ).push( page );
+				} else {
+					parentMap.set( parent, [ page ] );
+				}
+				return parentMap;
+			}, new Map() );
+			setPagesByParentId( groupedPages );
+		} );
+	}, [] );
+
 	const [ isOpen, setOpen ] = useState( false );
 	const openModal = () => setOpen( true );
 	const closeModal = () => setOpen( false );
@@ -94,7 +150,9 @@ export default function PageListEdit( { context, clientId } ) {
 				/>
 			) }
 			<div { ...blockProps }>
-				<ServerSideRender block="core/page-list" />
+				<ul className="wp-block-page-list">
+					<Menu pagesByParentId={pagesByParentId} parentId={ 0 } />
+				</ul>
 			</div>
 		</>
 	);