Add a starting page for page list block's hierarchy

docs/reference-guides/core-blocks.md

@@ -429,7 +429,7 @@ Display a list of all pages. ([Source](https://github.com/WordPress/gutenberg/tr
 -	**Name:** core/page-list
 -	**Category:** widgets
 -	**Supports:** ~~html~~, ~~reusable~~
--	**Attributes:** 
+-	**Attributes:** rootPageID
 
 ## Paragraph
 

packages/block-library/src/page-list/block.json

@@ -7,7 +7,12 @@
 	"description": "Display a list of all pages.",
 	"keywords": [ "menu", "navigation" ],
 	"textdomain": "default",
-	"attributes": {},
+	"attributes": {
+		"rootPageID": {
+			"type": "integer",
+			"default": 0
+		}
+	},
 	"usesContext": [
 		"textColor",
 		"customTextColor",

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

@@ -7,11 +7,18 @@ import classnames from 'classnames';
  * WordPress dependencies
  */
 import {
+	InspectorControls,
 	BlockControls,
 	useBlockProps,
 	getColorClassName,
 } from '@wordpress/block-editor';
-import { ToolbarButton, Spinner, Notice } from '@wordpress/components';
+import {
+	PanelBody,
+	ToolbarButton,
+	Spinner,
+	Notice,
+	ComboboxControl,
+} from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { useMemo, useState, memo } from '@wordpress/element';
 import { useSelect } from '@wordpress/data';
@@ -27,7 +34,13 @@ import { ItemSubmenuIcon } from '../navigation-link/icons';
 // Performance of Navigation Links is not good past this value.
 const MAX_PAGE_COUNT = 100;
 
-export default function PageListEdit( { context, clientId } ) {
+export default function PageListEdit( {
+	context,
+	clientId,
+	attributes,
+	setAttributes,
+} ) {
+	const { parentPageID } = attributes;
 	const { pagesByParentId, totalPages, hasResolvedPages } = usePageData();
 
 	const isNavigationChild = 'showSubmenuIcon' in context;
@@ -86,15 +99,43 @@ export default function PageListEdit( { context, clientId } ) {
 				<ul { ...blockProps }>
 					<PageItems
 						context={ context }
+						parentId={ parentPageID }
 						pagesByParentId={ pagesByParentId }
 					/>
 				</ul>
 			);
 		}
 	};
 
+	const useParentOptions = () => {
+		const [ pages ] = useGetPages();
+		return pages?.reduce( ( accumulator, page ) => {
+			accumulator.push( {
+				value: page.id,
+				label: page.title.rendered,
+			} );
+			return accumulator;
+		}, [] );
+	};
+
 	return (
 		<>
+			<InspectorControls>
+				<PanelBody>
+					<ComboboxControl
+						className="editor-page-attributes__parent"
+						label={ __( 'Parent page' ) }
+						value={ parentPageID }
+						options={ useParentOptions() }
+						onChange={ ( value ) =>
+							setAttributes( { parentPageID: value ?? 0 } )
+						}
+						help={ __(
+							'Choose a page to show only its subpages.'
+						) }
+					/>
+				</PanelBody>
+			</InspectorControls>
 			{ allowConvertToLinks && (
 				<BlockControls group="other">
 					<ToolbarButton title={ __( 'Edit' ) } onClick={ openModal }>
@@ -129,7 +170,7 @@ function useFrontPageId() {
 	}, [] );
 }
 
-function usePageData() {
+function useGetPages() {
 	const { records: pages, hasResolved: hasResolvedPages } = useEntityRecords(
 		'postType',
 		'page',
@@ -142,10 +183,21 @@ function usePageData() {
 		}
 	);
 
+	return [ pages, hasResolvedPages ];
+}
+
+function usePageData( pageId = 0 ) {
+	const [ pages, hasResolvedPages ] = useGetPages();
+
 	return useMemo( () => {
 		// TODO: Once the REST API supports passing multiple values to
 		// '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 );
@@ -167,7 +219,7 @@ function usePageData() {
 			hasResolvedPages,
 			totalPages: pages?.length ?? null,
 		};
-	}, [ pages, hasResolvedPages ] );
+	}, [ pageId, pages, hasResolvedPages ] );
 }
 
 const PageItems = memo( function PageItems( {
@@ -176,7 +228,10 @@ const PageItems = memo( function PageItems( {
 	parentId = 0,
 	depth = 0,
 } ) {
-	const pages = pagesByParentId.get( parentId );
+	const parentPage = usePageData( parentId );
+	const pages = pagesByParentId.get( parentId )
+		? pagesByParentId.get( parentId )
+		: [ parentPage ];
 	const frontPageId = useFrontPageId();
 
 	if ( ! pages?.length ) {

packages/block-library/src/page-list/index.php

@@ -252,6 +252,8 @@ function render_block_core_page_list( $attributes, $content, $block ) {
 	static $block_id = 0;
 	++$block_id;
 
+	$parent_page_id = $attributes['parentPageID'];
+
 	$all_pages = get_pages(
 		array(
 			'sort_column' => 'menu_order,post_title',
@@ -306,6 +308,13 @@ function render_block_core_page_list( $attributes, $content, $block ) {
 
 	$nested_pages = block_core_page_list_nest_pages( $top_level_pages, $pages_with_children );
 
+	if ( 0 !== $parent_page_id ) {
+		$nested_pages = block_core_page_list_nest_pages(
+			$pages_with_children[ $parent_page_id ],
+			$pages_with_children
+		);
+	}
+
 	$is_navigation_child = array_key_exists( 'showSubmenuIcon', $block->context );
 
 	$open_submenus_on_click = array_key_exists( 'openSubmenusOnClick', $block->context ) ? $block->context['openSubmenusOnClick'] : false;

test/integration/fixtures/blocks/core__page-list.json

@@ -2,7 +2,9 @@
 	{
 		"name": "core/page-list",
 		"isValid": true,
-		"attributes": {},
+		"attributes": {
+			"rootPageID": 0
+		},
 		"innerBlocks": []
 	}
 ]