Page List: Render the children correctly in the editor (WordPress#46165)

* Page List: Render the children correctly in the editor Co-authored-by: Andrei Draganescu <107534+draganescu@users.noreply.github.com> * fix some leftovers from reimplementation (correcy deps and add memoization) Co-authored-by: Andrei Draganescu <107534+draganescu@users.noreply.github.com> Co-authored-by: Andrei Draganescu <andrei.draganescu@automattic.com>
mpkelly · Dec 7, 2022 · 7f276b2 · 7f276b2
1 parent 6ca9378
commit 7f276b2
Showing 1 changed file with 43 additions and 19 deletions.
diff --git a/packages/block-library/src/page-list/edit.js b/packages/block-library/src/page-list/edit.js
@@ -6,12 +6,15 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
+import { createBlock } from '@wordpress/blocks';
 import {
 	InspectorControls,
 	BlockControls,
 	useBlockProps,
 	useInnerBlocksProps,
 	getColorClassName,
+	store as blockEditorStore,
+	Warning,
 } from '@wordpress/block-editor';
 import {
 	PanelBody,
@@ -20,9 +23,10 @@ import {
 	Notice,
 	ComboboxControl,
 } from '@wordpress/components';
-import { __ } from '@wordpress/i18n';
-import { useMemo, useState } from '@wordpress/element';
+import { __, sprintf } from '@wordpress/i18n';
+import { useMemo, useState, useEffect } from '@wordpress/element';
 import { useEntityRecords } from '@wordpress/core-data';
+import { useDispatch } from '@wordpress/data';
 
 /**
  * Internal dependencies
@@ -40,7 +44,10 @@ export default function PageListEdit( {
 	setAttributes,
 } ) {
 	const { parentPageID } = attributes;
+	const [ pages ] = useGetPages();
 	const { pagesByParentId, totalPages, hasResolvedPages } = usePageData();
+	const { replaceInnerBlocks, __unstableMarkNextChangeAsNotPersistent } =
+		useDispatch( blockEditorStore );
 
 	const isNavigationChild = 'showSubmenuIcon' in context;
 	const allowConvertToLinks =
@@ -64,14 +71,14 @@ export default function PageListEdit( {
 		style: { ...context.style?.color },
 	} );
 
-	const makeBlockTemplate = ( parentId = 0 ) => {
-		const pages = pagesByParentId.get( parentId );
+	const getBlockList = ( parentId = parentPageID ) => {
+		const childPages = pagesByParentId.get( parentId );
 
-		if ( ! pages?.length ) {
+		if ( ! childPages?.length ) {
 			return [];
 		}
 
-		return pages.reduce( ( template, page ) => {
+		return childPages.reduce( ( template, page ) => {
 			const hasChildren = pagesByParentId.has( page.id );
 			const pageProps = {
 				id: page.id,
@@ -81,21 +88,20 @@ export default function PageListEdit( {
 				hasChildren,
 			};
 			let item = null;
-			const children = makeBlockTemplate( page.id );
-			item = [ 'core/page-list-item', pageProps, children ];
-
+			const children = getBlockList( page.id );
+			item = createBlock( 'core/page-list-item', pageProps, children );
 			template.push( item );
 
 			return template;
 		}, [] );
 	};
 
-	const pagesTemplate = useMemo( makeBlockTemplate, [ pagesByParentId ] );
+	const blockList = useMemo( getBlockList, [
+		pagesByParentId,
+		parentPageID,
+	] );
 
-	const innerBlocksProps = useInnerBlocksProps( blockProps, {
-		template: pagesTemplate,
-		templateLock: 'all',
-	} );
+	const innerBlocksProps = useInnerBlocksProps( blockProps );
 
 	const getBlockContent = () => {
 		if ( ! hasResolvedPages ) {
@@ -126,13 +132,28 @@ export default function PageListEdit( {
 			);
 		}
 
+		if ( blockList.length === 0 ) {
+			const parentPageDetails =
+				pages && pages.find( ( page ) => page.id === parentPageID );
+			return (
+				<div { ...blockProps }>
+					<Warning>
+						{ sprintf(
+							// translators: %s: Page title.
+							__( '"%s" page has no children.' ),
+							parentPageDetails.title.rendered
+						) }
+					</Warning>
+				</div>
+			);
+		}
+
 		if ( totalPages > 0 ) {
 			return <ul { ...innerBlocksProps }></ul>;
 		}
 	};
 
 	const useParentOptions = () => {
-		const [ pages ] = useGetPages();
 		return pages?.reduce( ( accumulator, page ) => {
 			accumulator.push( {
 				value: page.id,
@@ -142,6 +163,13 @@ export default function PageListEdit( {
 		}, [] );
 	};
 
+	useEffect( () => {
+		__unstableMarkNextChangeAsNotPersistent();
+		if ( blockList ) {
+			replaceInnerBlocks( clientId, blockList );
+		}
+	}, [ clientId, blockList ] );
+
 	return (
 		<>
 			<InspectorControls>
@@ -203,10 +231,6 @@ function usePageData( pageId = 0 ) {
 		// 'orderby', this can be removed.
 		// https://core.trac.wordpress.org/ticket/39037
 
-		if ( pageId !== 0 ) {
-			return pages.find( ( page ) => page.id === pageId );
-		}
-
 		const sortedPages = [ ...( pages ?? [] ) ].sort( ( a, b ) => {
 			if ( a.menu_order === b.menu_order ) {
 				return a.title.rendered.localeCompare( b.title.rendered );