Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Page List: Add ability to only show child pages #31471

Closed
wants to merge 6 commits into from
Closed

Page List: Add ability to only show child pages #31471

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
c60c176
Update Page List with toggle to show child pages
mkaz May 4, 2021
56a3fa8
Update verbiage explaining control
mkaz Sep 29, 2021
984be2c
Simplify if-else for setting top/child pages, makes linter happier
mkaz Sep 29, 2021
4622e80
Reverse logic on when to display toggle
mkaz Oct 11, 2021
ac19e71
Update logic for checking top-level and child pages
mkaz Oct 12, 2021
83ef45c
Fix rebasing issues
mkaz Oct 30, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
1 change: 1 addition & 0 deletions package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions packages/block-library/package.json
View file
Open in desktop
Expand Up @@ -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",
Expand Down
5 changes: 4 additions & 1 deletion packages/block-library/src/page-list/block.json
View file
Open in desktop
Expand Up @@ -3,10 +3,13 @@
"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": {
"showOnlyChildPages": {
"type": "boolean"
}
},
"usesContext": [
"textColor",
Expand Down
45 changes: 42 additions & 3 deletions packages/block-library/src/page-list/edit.js
View file
Open in desktop
Expand Up @@ -11,10 +11,19 @@ import {
BlockControls,
useBlockProps,
getColorClassName,
InspectorControls,
} from '@wordpress/block-editor';
import { ToolbarButton, Placeholder, Spinner } from '@wordpress/components';
import {
PanelBody,
Placeholder,
Spinner,
ToggleControl,
ToolbarButton,
} from '@wordpress/components';
import { useSelect } from '@wordpress/data';
import { store as editorStore } from '@wordpress/editor';
import { __ } from '@wordpress/i18n';
import { useEffect, useState, memo } from '@wordpress/element';
import { memo, useEffect, useState } from '@wordpress/element';
import apiFetch from '@wordpress/api-fetch';
import { addQueryArgs } from '@wordpress/url';

Expand All @@ -28,7 +37,12 @@ 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( {
attributes,
clientId,
context,
setAttributes,
} ) {
const { pagesByParentId, totalPages } = usePagesByParentId();

const isNavigationChild = 'showSubmenuIcon' in context;
Expand All @@ -39,6 +53,13 @@ export default function PageListEdit( { context, clientId } ) {
const openModal = () => setOpen( true );
const closeModal = () => setOpen( false );

const showChildPageToggle = useSelect( ( select ) => {
const { getCurrentPostType } = select( editorStore );
const currentPostType = getCurrentPostType();
const hideToggleFrom = [ 'post' ];
return ! hideToggleFrom.includes( currentPostType );
} );

const blockProps = useBlockProps( {
className: classnames( 'wp-block-page-list', {
'has-text-color': !! context.textColor,
Expand All @@ -57,6 +78,24 @@ export default function PageListEdit( { context, clientId } ) {

return (
<>
<InspectorControls>
{ showChildPageToggle && (
<PanelBody>
<ToggleControl
label={ __( 'Limit to child pages' ) }
checked={ !! attributes.showOnlyChildPages }
onChange={ () =>
setAttributes( {
showOnlyChildPages: ! attributes.showOnlyChildPages,
} )
}
help={ __(
'When enabled, the block lists only child pages of the current page.'
) }
/>
</PanelBody>
) }
</InspectorControls>
{ allowConvertToLinks && (
<BlockControls group="other">
<ToolbarButton title={ __( 'Edit' ) } onClick={ openModal }>
Expand Down
52 changes: 46 additions & 6 deletions packages/block-library/src/page-list/index.php
View file
Open in desktop
Expand Up @@ -226,6 +226,31 @@ function block_core_page_list_nest_pages( $current_level, $children ) {
return $current_level;
}

/**
* Determines if page should be classified as top-level or child page. Broken
* out to this function to explain instead of a complex if statement.
* When only_child_pages is true, force child pages to be considered top level.
* Thy are top level since the parent is not shown (only child pages).
*
* @param int $page_parent_id Parent id of the page being tested.
* @param boolean $only_child_pages Only showing child pages.
* @param int $parent_id Top level parent id for child pages, needed so we can nest grand children.
* @return boolean True if page should be considered a child page.
*/
function block_core_page_list_treat_as_child( $page_parent_id, $only_child_pages, $parent_id ) {
if ( ! $page_parent_id ) {
return false;
}

// Check only child pages, and id matches parent, then it is top level and
// should not be treated like a child page.
if ( $only_child_pages && ( $page_parent_id === $parent_id ) ) {
return false;
}

return true;
}

/**
* Renders the `core/page-list` block on server.
*
Expand All @@ -236,16 +261,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;
mkaz marked this conversation as resolved.
Show resolved Hide resolved
static $block_id = 0;
$block_id++;

$all_pages = get_pages(
array(
'sort_column' => 'menu_order,post_title',
'order' => 'asc',
)
$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.
$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 );

// If thare are no pages, there is nothing to show.
if ( empty( $all_pages ) ) {
return;
Expand All @@ -264,7 +303,8 @@ function render_block_core_page_list( $attributes, $content, $block ) {
$active_page_ancestor_ids = get_post_ancestors( $page->ID );
}

if ( $page->post_parent ) {
// See function for logic when pages are treated like child pages.
if ( block_core_page_list_treat_as_child( $page->post_parent, $only_child_pages, $parent_id ) ) {
$pages_with_children[ $page->post_parent ][ $page->ID ] = array(
'page_id' => $page->ID,
'title' => $page->post_title,
Expand Down