Update Page List with toggle to show child pages

- Adds a showOnlyChildPages attribute to Edit - Update render to use attribute and only pull in children - Do not show on post pages which will not have a parent - Allow showing on wp_template pages Fixes #31063
WordPress · Sep 28, 2021 · 0960c2f · 0960c2f
1 parent fdf9057
commit 0960c2f
Show file tree

Hide file tree

Showing 5 changed files with 63 additions and 15 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/block-library/package.json b/packages/block-library/package.json
@@ -46,6 +46,7 @@
 		"@wordpress/date": "file:../date",
 		"@wordpress/deprecated": "file:../deprecated",
 		"@wordpress/dom": "file:../dom",
+		"@wordpress/editor": "file:../editor",
 		"@wordpress/element": "file:../element",
 		"@wordpress/escape-html": "file:../escape-html",
 		"@wordpress/hooks": "file:../hooks",

diff --git a/packages/block-library/src/page-list/block.json b/packages/block-library/src/page-list/block.json
@@ -3,7 +3,7 @@
 	"name": "core/page-list",
 	"title": "Page List",
 	"category": "widgets",
-	"description": "Display a list of all pages.",
+	"description": "Display a list of pages.",
 	"keywords": [ "menu", "navigation" ],
 	"textdomain": "default",
 	"attributes": {
@@ -39,6 +39,9 @@
 		},
 		"openSubmenusOnClick" : {
 			"type": "boolean"
+		},
+		"showOnlyChildPages": {
+			"type": "boolean"
 		}
 	},
 	"usesContext": [

diff --git a/packages/block-library/src/page-list/edit.js b/packages/block-library/src/page-list/edit.js
@@ -11,9 +11,11 @@ import {
 	useBlockProps,
 	store as blockEditorStore,
 	getColorClassName,
+	InspectorControls,
 } from '@wordpress/block-editor';
 import ServerSideRender from '@wordpress/server-side-render';
-import { ToolbarButton } from '@wordpress/components';
+import { PanelBody, ToggleControl, ToolbarButton } from '@wordpress/components';
+import { store as editorStore } from '@wordpress/editor';
 import { __ } from '@wordpress/i18n';
 import { useEffect, useState } from '@wordpress/element';
 import { useSelect } from '@wordpress/data';
@@ -86,7 +88,7 @@ export default function PageListEdit( {
 		style: { ...style?.color },
 	} );
 
-	const isParentNavigation = useSelect(
+	const isParentBlockNavigation = useSelect(
 		( select ) => {
 			const { getBlockParentsByBlockName } = select( blockEditorStore );
 			return (
@@ -97,16 +99,23 @@ export default function PageListEdit( {
 		[ clientId ]
 	);
 
+	const showChildPageToggle = useSelect( ( select ) => {
+		const { getCurrentPostType } = select( editorStore );
+		const currentPostType = getCurrentPostType();
+		const allowedTypes = [ 'page', 'wp_template' ];
+		return allowedTypes.includes( currentPostType );
+	} );
+
 	useEffect( () => {
 		setAttributes( {
-			isNavigationChild: isParentNavigation,
+			isNavigationChild: isParentBlockNavigation,
 			openSubmenusOnClick: !! context.openSubmenusOnClick,
 			showSubmenuIcon: !! context.showSubmenuIcon,
 		} );
 	}, [ context.openSubmenusOnClick, context.showSubmenuIcon ] );
 
 	useEffect( () => {
-		if ( isParentNavigation ) {
+		if ( isParentBlockNavigation ) {
 			apiFetch( {
 				path: addQueryArgs( '/wp/v2/pages', {
 					per_page: 1,
@@ -121,22 +130,38 @@ export default function PageListEdit( {
 		} else {
 			setAllowConvertToLinks( false );
 		}
-	}, [ isParentNavigation ] );
+	}, [ isParentBlockNavigation ] );
 
 	const [ isOpen, setOpen ] = useState( false );
 	const openModal = () => setOpen( true );
 	const closeModal = () => setOpen( false );
 
 	// Update parent status before component first renders.
-	const attributesWithParentStatus = {
+	const attributesWithParentBlockStatus = {
 		...attributes,
-		isNavigationChild: isParentNavigation,
+		isNavigationChild: isParentBlockNavigation,
 		openSubmenusOnClick: !! context.openSubmenusOnClick,
 		showSubmenuIcon: !! context.showSubmenuIcon,
 	};
 
 	return (
 		<>
+			<InspectorControls>
+				{ showChildPageToggle && (
+					<PanelBody>
+						<ToggleControl
+							label={ __( 'List child pages' ) }
+							checked={ !! attributes.showOnlyChildPages }
+							onChange={ () =>
+								setAttributes( {
+									showOnlyChildPages: ! attributes.showOnlyChildPages,
+								} )
+							}
+							help={ __( 'Uses parent to list child pages.' ) }
+						/>
+					</PanelBody>
+				) }
+			</InspectorControls>
 			{ allowConvertToLinks && (
 				<BlockControls group="other">
 					<ToolbarButton title={ __( 'Edit' ) } onClick={ openModal }>
@@ -153,7 +178,7 @@ export default function PageListEdit( {
 			<div { ...blockProps }>
 				<ServerSideRender
 					block="core/page-list"
-					attributes={ attributesWithParentStatus }
+					attributes={ attributesWithParentBlockStatus }
 				/>
 			</div>
 		</>

diff --git a/packages/block-library/src/page-list/index.php b/packages/block-library/src/page-list/index.php
@@ -235,21 +235,30 @@ function block_core_page_list_nest_pages( $current_level, $children ) {
  * @return string Returns the page list markup.
  */
 function render_block_core_page_list( $attributes, $content, $block ) {
+	global $post;
 	static $block_id = 0;
 	$block_id++;
 
+	$only_child_pages = isset( $attributes['showOnlyChildPages'] ) && $attributes['showOnlyChildPages'];
+	// The pages will be siblings (same parent) or set parent id equal to self if no children.
+	$parent_id = ( $post->post_parent ) ? $post->post_parent : $post->ID;
+
 	// TODO: When https://core.trac.wordpress.org/ticket/39037 REST API support for multiple orderby values is resolved,
 	// update 'sort_column' to 'menu_order, post_title'. Sorting by both menu_order and post_title ensures a stable sort.
 	// Otherwise with pages that have the same menu_order value, we can see different ordering depending on how DB
 	// queries are constructed internally. For example we might see a different order when a limit is set to <499
 	// versus >= 500.
-	$all_pages = get_pages(
-		array(
-			'sort_column' => 'menu_order',
-			'order'       => 'asc',
-		)
+	$query_args = array(
+		'sort_column' => 'menu_order',
+		'order'       => 'asc',
 	);
 
+	if ( $only_child_pages && $parent_id ) {
+		$query_args['child_of'] = $parent_id;
+	}
+
+	$all_pages = get_pages( $query_args );
+
 	$top_level_pages = array();
 
 	$pages_with_children = array();
@@ -263,7 +272,16 @@ function render_block_core_page_list( $attributes, $content, $block ) {
 			$active_page_ancestor_ids = get_post_ancestors( $page->ID );
 		}
 
-		if ( $page->post_parent ) {
+		// When showing only child pages of parent, set the pages to top level
+		// since there is no other top level page.
+		if ( $only_child_pages ) {
+			$top_level_pages[ $page->ID ] = array(
+				'page_id'   => $page->ID,
+				'title'     => $page->post_title,
+				'link'      => get_permalink( $page->ID ),
+				'is_active' => $is_active,
+			);
+		} else if ( $page->post_parent )  {
 			$pages_with_children[ $page->post_parent ][ $page->ID ] = array(
 				'page_id'   => $page->ID,
 				'title'     => $page->post_title,