Create a JS version of Page List for the editor

WordPress · Oct 19, 2021 · 775355a · 775355a
1 parent b1d8f7a
commit 775355a
Showing 1 changed file with 62 additions and 22 deletions.
diff --git a/packages/block-library/src/page-list/edit.js b/packages/block-library/src/page-list/edit.js
@@ -12,7 +12,6 @@ import {
 	store as blockEditorStore,
 	getColorClassName,
 } 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';
@@ -24,11 +23,46 @@ 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,
@@ -72,6 +106,9 @@ export default function PageListEdit( {
 	const { textColor, backgroundColor, style } = context || {};
 
 	const [ allowConvertToLinks, setAllowConvertToLinks ] = useState( false );
+	const [ pagesByParentId, setPagesByParentId ] = useState(
+		new Map( [ [ 0, [] ] ] )
+	);
 
 	const blockProps = useBlockProps( {
 		className: classnames( {
@@ -106,21 +143,28 @@ export default function PageListEdit( {
 	}, [ context.openSubmenusOnClick, context.showSubmenuIcon ] );
 
 	useEffect( () => {
-		if ( isParentNavigation ) {
-			apiFetch( {
-				path: addQueryArgs( '/wp/v2/pages', {
-					per_page: 1,
-					_fields: [ 'id' ],
-				} ),
-				parse: false,
-			} ).then( ( res ) => {
-				setAllowConvertToLinks(
+		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 );
+			setAllowConvertToLinks(
+				isParentNavigation &&
 					res.headers.get( 'X-WP-Total' ) <= MAX_PAGE_COUNT
-				);
-			} );
-		} else {
-			setAllowConvertToLinks( false );
-		}
+			);
+		} );
 	}, [ isParentNavigation ] );
 
 	const [ isOpen, setOpen ] = useState( false );
@@ -151,13 +195,9 @@ export default function PageListEdit( {
 				/>
 			) }
 			<div { ...blockProps }>
-				<ServerSideRender
-					block="core/page-list"
-					attributes={ attributesWithParentStatus }
-					EmptyResponsePlaceholder={ () => (
-						<span>{ __( 'Page List: No pages to show.' ) }</span>
-					) }
-				/>
+				<ul className="wp-block-page-list">
+					<Menu pagesByParentId={ pagesByParentId } parentId={ 0 } />
+				</ul>
 			</div>
 		</>
 	);