@wordpress/block-library 7.19.0 → 8.1.0

package/src/page-list/convert-to-links-modal.js

@@ -5,71 +5,20 @@ import { Button, Modal } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { useDispatch } from '@wordpress/data';
 import { useEntityRecords } from '@wordpress/core-data';
-import { createBlock as create } from '@wordpress/blocks';
 import { store as blockEditorStore } from '@wordpress/block-editor';
+/**
+ * Internal dependencies
+ */
+import { convertToNavigationLinks } from './convert-to-navigation-links';
+
+/**
+ * Internal dependencies
+ */
+import { convertDescription } from './constants';
 
 const PAGE_FIELDS = [ 'id', 'title', 'link', 'type', 'parent' ];
 const MAX_PAGE_COUNT = 100;
 
-export const convertSelectedBlockToNavigationLinks =
-	( { pages, clientId, replaceBlock, createBlock } ) =>
-	() => {
-		if ( ! pages ) {
-			return;
-		}
-
-		const linkMap = {};
-		const navigationLinks = [];
-		pages.forEach( ( { id, title, link: url, type, parent } ) => {
-			// See if a placeholder exists. This is created if children appear before parents in list.
-			const innerBlocks = linkMap[ id ]?.innerBlocks ?? [];
-			linkMap[ id ] = createBlock(
-				'core/navigation-link',
-				{
-					id,
-					label: title.rendered,
-					url,
-					type,
-					kind: 'post-type',
-				},
-				innerBlocks
-			);
-
-			if ( ! parent ) {
-				navigationLinks.push( linkMap[ id ] );
-			} else {
-				if ( ! linkMap[ parent ] ) {
-					// Use a placeholder if the child appears before parent in list.
-					linkMap[ parent ] = { innerBlocks: [] };
-				}
-				const parentLinkInnerBlocks = linkMap[ parent ].innerBlocks;
-				parentLinkInnerBlocks.push( linkMap[ id ] );
-			}
-		} );
-
-		// Transform all links with innerBlocks into Submenus. This can't be done
-		// sooner because page objects have no information on their children.
-
-		const transformSubmenus = ( listOfLinks ) => {
-			listOfLinks.forEach( ( block, index, listOfLinksArray ) => {
-				const { attributes, innerBlocks } = block;
-				if ( innerBlocks.length !== 0 ) {
-					transformSubmenus( innerBlocks );
-					const transformedBlock = createBlock(
-						'core/navigation-submenu',
-						attributes,
-						innerBlocks
-					);
-					listOfLinksArray[ index ] = transformedBlock;
-				}
-			} );
-		};
-
-		transformSubmenus( navigationLinks );
-
-		replaceBlock( clientId, navigationLinks );
-	};
-
 export default function ConvertToLinksModal( { onClose, clientId } ) {
 	const { records: pages, hasResolved: pagesFinished } = useEntityRecords(
 		'postType',
@@ -91,19 +40,12 @@ export default function ConvertToLinksModal( { onClose, clientId } ) {
 		<Modal
 			closeLabel={ __( 'Close' ) }
 			onRequestClose={ onClose }
-			title={ __( 'Convert to links' ) }
+			title={ __( 'Customize this menu' ) }
 			className={ 'wp-block-page-list-modal' }
 			aria={ { describedby: 'wp-block-page-list-modal__description' } }
 		>
 			<p id={ 'wp-block-page-list-modal__description' }>
-				{ __(
-					'To edit this navigation menu, convert it to single page links. This allows you to add, re-order, remove items, or edit their labels.'
-				) }
-			</p>
-			<p>
-				{ __(
-					"Note: if you add new pages to your site, you'll need to add them to your navigation menu."
-				) }
+				{ convertDescription }
 			</p>
 			<div className="wp-block-page-list-modal-buttons">
 				<Button variant="tertiary" onClick={ onClose }>
@@ -112,14 +54,15 @@ export default function ConvertToLinksModal( { onClose, clientId } ) {
 				<Button
 					variant="primary"
 					disabled={ ! pagesFinished }
-					onClick={ convertSelectedBlockToNavigationLinks( {
-						pages,
-						replaceBlock,
-						clientId,
-						createBlock: create,
-					} ) }
+					onClick={ () => {
+						const navigationLinks =
+							convertToNavigationLinks( pages );
+
+						// Replace the Page List block with the Navigation Links.
+						replaceBlock( clientId, navigationLinks );
+					} }
 				>
-					{ __( 'Convert' ) }
+					{ __( 'Customize' ) }
 				</Button>
 			</div>
 		</Modal>

package/src/page-list/convert-to-navigation-links.js

@@ -0,0 +1,60 @@
+/**
+ * WordPress dependencies
+ */
+import { createBlock } from '@wordpress/blocks';
+
+export const convertToNavigationLinks = ( pages ) => {
+	if ( ! pages ) {
+		return;
+	}
+
+	const linkMap = {};
+	const navigationLinks = [];
+	pages.forEach( ( { id, title, link: url, type, parent } ) => {
+		// See if a placeholder exists. This is created if children appear before parents in list.
+		const innerBlocks = linkMap[ id ]?.innerBlocks ?? [];
+		linkMap[ id ] = createBlock(
+			'core/navigation-link',
+			{
+				id,
+				label: title.rendered,
+				url,
+				type,
+				kind: 'post-type',
+			},
+			innerBlocks
+		);
+
+		if ( ! parent ) {
+			navigationLinks.push( linkMap[ id ] );
+		} else {
+			if ( ! linkMap[ parent ] ) {
+				// Use a placeholder if the child appears before parent in list.
+				linkMap[ parent ] = { innerBlocks: [] };
+			}
+			const parentLinkInnerBlocks = linkMap[ parent ].innerBlocks;
+			parentLinkInnerBlocks.push( linkMap[ id ] );
+		}
+	} );
+
+	// Transform all links with innerBlocks into Submenus. This can't be done
+	// sooner because page objects have no information on their children.
+	const transformSubmenus = ( listOfLinks ) => {
+		listOfLinks.forEach( ( block, index, listOfLinksArray ) => {
+			const { attributes, innerBlocks } = block;
+			if ( innerBlocks.length !== 0 ) {
+				transformSubmenus( innerBlocks );
+				const transformedBlock = createBlock(
+					'core/navigation-submenu',
+					attributes,
+					innerBlocks
+				);
+				listOfLinksArray[ index ] = transformedBlock;
+			}
+		} );
+	};
+
+	transformSubmenus( navigationLinks );
+
+	return navigationLinks;
+};

package/src/page-list/edit.js

@@ -6,28 +6,49 @@ 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 { ToolbarButton, Spinner, Notice } from '@wordpress/components';
-import { __ } from '@wordpress/i18n';
-import { useMemo, useState, memo } from '@wordpress/element';
-import { useSelect } from '@wordpress/data';
-import { store as coreStore, useEntityRecords } from '@wordpress/core-data';
+import {
+	PanelBody,
+	ToolbarButton,
+	Spinner,
+	Notice,
+	ComboboxControl,
+	Button,
+} from '@wordpress/components';
+import { __, sprintf } from '@wordpress/i18n';
+import { useMemo, useState, useEffect } from '@wordpress/element';
+import { useEntityRecords } from '@wordpress/core-data';
+import { useSelect, useDispatch } from '@wordpress/data';
 
 /**
  * Internal dependencies
  */
 import ConvertToLinksModal from './convert-to-links-modal';
-import { ItemSubmenuIcon } from '../navigation-link/icons';
+import { convertToNavigationLinks } from './convert-to-navigation-links';
+import { convertDescription } from './constants';
 
 // 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 NOOP = () => {};
 
-export default function PageListEdit( { context, clientId } ) {
+export default function PageListEdit( {
+	context,
+	clientId,
+	attributes,
+	setAttributes,
+} ) {
+	const { parentPageID } = attributes;
+	const [ pages ] = useGetPages();
 	const { pagesByParentId, totalPages, hasResolvedPages } = usePageData();
 
 	const isNavigationChild = 'showSubmenuIcon' in context;
@@ -52,6 +73,70 @@ export default function PageListEdit( { context, clientId } ) {
 		style: { ...context.style?.color },
 	} );
 
+	const getBlockList = ( parentId = parentPageID ) => {
+		const childPages = pagesByParentId.get( parentId );
+
+		if ( ! childPages?.length ) {
+			return [];
+		}
+
+		return childPages.reduce( ( template, page ) => {
+			const hasChildren = pagesByParentId.has( page.id );
+			const pageProps = {
+				id: page.id,
+				label: page.title?.rendered,
+				title: page.title?.rendered,
+				link: page.url,
+				hasChildren,
+			};
+			let item = null;
+			const children = getBlockList( page.id );
+			item = createBlock( 'core/page-list-item', pageProps, children );
+			template.push( item );
+
+			return template;
+		}, [] );
+	};
+
+	const makePagesTree = ( parentId = 0, level = 0 ) => {
+		const childPages = pagesByParentId.get( parentId );
+
+		if ( ! childPages?.length ) {
+			return [];
+		}
+
+		return childPages.reduce( ( tree, page ) => {
+			const hasChildren = pagesByParentId.has( page.id );
+			const item = {
+				value: page.id,
+				label: '— '.repeat( level ) + page.title.rendered,
+				rawName: page.title.rendered,
+			};
+			tree.push( item );
+			if ( hasChildren ) {
+				tree.push( ...makePagesTree( page.id, level + 1 ) );
+			}
+			return tree;
+		}, [] );
+	};
+
+	const pagesTree = useMemo( makePagesTree, [ pagesByParentId ] );
+
+	const blockList = useMemo( getBlockList, [
+		pagesByParentId,
+		parentPageID,
+	] );
+
+	const innerBlocksProps = useInnerBlocksProps( blockProps, {
+		allowedBlocks: [ 'core/page-list-item' ],
+		renderAppender: false,
+		__unstableDisableDropZone: true,
+		templateLock: 'all',
+		onInput: NOOP,
+		onChange: NOOP,
+		value: blockList,
+	} );
+
 	const getBlockContent = () => {
 		if ( ! hasResolvedPages ) {
 			return (
@@ -81,21 +166,99 @@ export default function PageListEdit( { context, clientId } ) {
 			);
 		}
 
-		if ( totalPages > 0 ) {
+		if ( blockList.length === 0 ) {
+			const parentPageDetails =
+				pages && pages.find( ( page ) => page.id === parentPageID );
 			return (
-				<ul { ...blockProps }>
-					<PageItems
-						context={ context }
-						pagesByParentId={ pagesByParentId }
-					/>
-				</ul>
+				<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 { replaceBlock, selectBlock } = useDispatch( blockEditorStore );
+
+	const { parentNavBlockClientId, isNested } = useSelect(
+		( select ) => {
+			const { getSelectedBlockClientId, getBlockParentsByBlockName } =
+				select( blockEditorStore );
+
+			const _selectedBlockClientId = getSelectedBlockClientId();
+
+			return {
+				parentNavBlockClientId: getBlockParentsByBlockName(
+					_selectedBlockClientId,
+					'core/navigation',
+					true
+				)[ 0 ],
+				isNested:
+					getBlockParentsByBlockName(
+						clientId,
+						'core/navigation-submenu',
+						true
+					).length > 0,
+			};
+		},
+		[ clientId ]
+	);
+
+	useEffect( () => {
+		setAttributes( { isNested } );
+	}, [ isNested ] );
+
 	return (
 		<>
-			{ allowConvertToLinks && (
+			<InspectorControls>
+				{ isNavigationChild && pages?.length > 0 && (
+					<PanelBody title={ __( 'Customize this menu' ) }>
+						<p>{ convertDescription }</p>
+						<Button
+							variant="primary"
+							disabled={ ! hasResolvedPages }
+							onClick={ () => {
+								const navigationLinks =
+									convertToNavigationLinks( pages );
+
+								// Replace the Page List block with the Navigation Links.
+								replaceBlock( clientId, navigationLinks );
+
+								// Select the Navigation block to reveal the changes.
+								selectBlock( parentNavBlockClientId );
+							} }
+						>
+							{ __( 'Customize' ) }
+						</Button>
+					</PanelBody>
+				) }
+				{ pagesTree.length > 0 && (
+					<PanelBody>
+						<ComboboxControl
+							className="editor-page-attributes__parent"
+							label={ __( 'Parent page' ) }
+							value={ parentPageID }
+							options={ pagesTree }
+							onChange={ ( value ) =>
+								setAttributes( { parentPageID: value ?? 0 } )
+							}
+							help={ __(
+								'Choose a page to show only its subpages.'
+							) }
+						/>
+					</PanelBody>
+				) }
+			</InspectorControls>
+			{ allowConvertToLinks && totalPages > 0 && (
 				<BlockControls group="other">
 					<ToolbarButton title={ __( 'Edit' ) } onClick={ openModal }>
 						{ __( 'Edit' ) }
@@ -114,22 +277,7 @@ export default function PageListEdit( { context, clientId } ) {
 	);
 }
 
-function useFrontPageId() {
-	return useSelect( ( select ) => {
-		const canReadSettings = select( coreStore ).canUser(
-			'read',
-			'settings'
-		);
-		if ( ! canReadSettings ) {
-			return undefined;
-		}
-
-		const site = select( coreStore ).getEntityRecord( 'root', 'site' );
-		return site?.show_on_front === 'page' && site?.page_on_front;
-	}, [] );
-}
-
-function usePageData() {
+function useGetPages() {
 	const { records: pages, hasResolved: hasResolvedPages } = useEntityRecords(
 		'postType',
 		'page',
@@ -142,10 +290,17 @@ 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
+
 		const sortedPages = [ ...( pages ?? [] ) ].sort( ( a, b ) => {
 			if ( a.menu_order === b.menu_order ) {
 				return a.title.rendered.localeCompare( b.title.rendered );
@@ -167,91 +322,5 @@ function usePageData() {
 			hasResolvedPages,
 			totalPages: pages?.length ?? null,
 		};
-	}, [ pages, hasResolvedPages ] );
+	}, [ pageId, pages, hasResolvedPages ] );
 }
-
-const PageItems = memo( function PageItems( {
-	context,
-	pagesByParentId,
-	parentId = 0,
-	depth = 0,
-} ) {
-	const pages = pagesByParentId.get( parentId );
-	const frontPageId = useFrontPageId();
-
-	if ( ! pages?.length ) {
-		return [];
-	}
-
-	return pages.map( ( page ) => {
-		const hasChildren = pagesByParentId.has( page.id );
-		const isNavigationChild = 'showSubmenuIcon' in context;
-		return (
-			<li
-				key={ page.id }
-				className={ classnames( 'wp-block-pages-list__item', {
-					'has-child': hasChildren,
-					'wp-block-navigation-item': isNavigationChild,
-					'open-on-click': context.openSubmenusOnClick,
-					'open-on-hover-click':
-						! context.openSubmenusOnClick &&
-						context.showSubmenuIcon,
-					'menu-item-home': page.id === frontPageId,
-				} ) }
-			>
-				{ hasChildren && context.openSubmenusOnClick ? (
-					<>
-						<button
-							className="wp-block-navigation-item__content wp-block-navigation-submenu__toggle"
-							aria-expanded="false"
-						>
-							{ page.title?.rendered }
-						</button>
-						<span className="wp-block-page-list__submenu-icon wp-block-navigation__submenu-icon">
-							<ItemSubmenuIcon />
-						</span>
-					</>
-				) : (
-					<a
-						className={ classnames(
-							'wp-block-pages-list__item__link',
-							{
-								'wp-block-navigation-item__content':
-									isNavigationChild,
-							}
-						) }
-						href={ page.link }
-					>
-						{ page.title?.rendered }
-					</a>
-				) }
-				{ hasChildren && (
-					<>
-						{ ! context.openSubmenusOnClick &&
-							context.showSubmenuIcon && (
-								<button
-									className="wp-block-navigation-item__content wp-block-navigation-submenu__toggle wp-block-page-list__submenu-icon wp-block-navigation__submenu-icon"
-									aria-expanded="false"
-								>
-									<ItemSubmenuIcon />
-								</button>
-							) }
-						<ul
-							className={ classnames( 'submenu-container', {
-								'wp-block-navigation__submenu-container':
-									isNavigationChild,
-							} ) }
-						>
-							<PageItems
-								context={ context }
-								pagesByParentId={ pagesByParentId }
-								parentId={ page.id }
-								depth={ depth + 1 }
-							/>
-						</ul>
-					</>
-				) }
-			</li>
-		);
-	} );
-} );

package/src/page-list/editor.scss

@@ -22,6 +22,10 @@
 	}
 }
 
+.wp-block-navigation .wp-block-navigation__submenu-container > .wp-block-page-list {
+	display: block; // This is needed to make sure the page list container is 100% wide, so that the children are correctly positioned.
+}
+
 // Make links unclickable in the editor.
 .wp-block-pages-list__item__link {
 	pointer-events: none;

package/src/page-list/index.js

@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { pages as icon } from '@wordpress/icons';
+import { pages, update } from '@wordpress/icons';
 
 /**
  * Internal dependencies
@@ -15,7 +15,13 @@ const { name } = metadata;
 export { metadata, name };
 
 export const settings = {
-	icon,
+	icon: ( { context } ) => {
+		if ( context === 'list-view' ) {
+			return update;
+		}
+
+		return pages;
+	},
 	example: {},
 	edit,
 };

package/src/page-list/index.php

@@ -139,13 +139,14 @@ function block_core_page_list_build_css_font_sizes( $context ) {
  * @param boolean $show_submenu_icons Whether to show submenu indicator icons.
  * @param boolean $is_navigation_child If block is a child of Navigation block.
  * @param array   $nested_pages The array of nested pages.
+ * @param boolean $is_nested Whether the submenu is nested or not.
  * @param array   $active_page_ancestor_ids An array of ancestor ids for active page.
  * @param array   $colors Color information for overlay styles.
  * @param integer $depth The nesting depth.
  *
  * @return string List markup.
  */
-function block_core_page_list_render_nested_page_list( $open_submenus_on_click, $show_submenu_icons, $is_navigation_child, $nested_pages, $active_page_ancestor_ids = array(), $colors = array(), $depth = 0 ) {
+function block_core_page_list_render_nested_page_list( $open_submenus_on_click, $show_submenu_icons, $is_navigation_child, $nested_pages, $is_nested, $active_page_ancestor_ids = array(), $colors = array(), $depth = 0 ) {
 	if ( empty( $nested_pages ) ) {
 		return;
 	}
@@ -173,7 +174,7 @@ function block_core_page_list_render_nested_page_list( $open_submenus_on_click,
 		$navigation_child_content_class = $is_navigation_child ? ' wp-block-navigation-item__content' : '';
 
 		// If this is the first level of submenus, include the overlay colors.
-		if ( 1 === $depth && isset( $colors['overlay_css_classes'], $colors['overlay_inline_styles'] ) ) {
+		if ( ( ( 0 < $depth && ! $is_nested ) || $is_nested ) && isset( $colors['overlay_css_classes'], $colors['overlay_inline_styles'] ) ) {
 			$css_class .= ' ' . trim( implode( ' ', $colors['overlay_css_classes'] ) );
 			if ( '' !== $colors['overlay_inline_styles'] ) {
 				$style_attribute = sprintf( ' style="%s"', esc_attr( $colors['overlay_inline_styles'] ) );
@@ -207,12 +208,9 @@ function block_core_page_list_render_nested_page_list( $open_submenus_on_click,
 				$markup .= '<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12" fill="none" aria-hidden="true" focusable="false"><path d="M1.50002 4L6.00002 8L10.5 4" stroke-width="1.5"></path></svg>';
 				$markup .= '</button>';
 			}
-			$markup .= '<ul class="submenu-container';
-			// Extra classname is added when the block is a child of Navigation.
-			if ( $is_navigation_child ) {
-				$markup .= ' wp-block-navigation__submenu-container';
-			}
-			$markup .= '">' . block_core_page_list_render_nested_page_list( $open_submenus_on_click, $show_submenu_icons, $is_navigation_child, $page['children'], $active_page_ancestor_ids, $colors, $depth + 1 ) . '</ul>';
+			$markup .= '<ul class="wp-block-navigation__submenu-container">';
+			$markup .= block_core_page_list_render_nested_page_list( $open_submenus_on_click, $show_submenu_icons, $is_navigation_child, $page['children'], $is_nested, $active_page_ancestor_ids, $colors, $depth + 1 );
+			$markup .= '</ul>';
 		}
 		$markup .= '</li>';
 	}
@@ -252,6 +250,9 @@ function render_block_core_page_list( $attributes, $content, $block ) {
 	static $block_id = 0;
 	++$block_id;
 
+	$parent_page_id = $attributes['parentPageID'];
+	$is_nested      = $attributes['isNested'];
+
 	$all_pages = get_pages(
 		array(
 			'sort_column' => 'menu_order,post_title',
@@ -306,15 +307,22 @@ 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;
 
 	$show_submenu_icons = array_key_exists( 'showSubmenuIcon', $block->context ) ? $block->context['showSubmenuIcon'] : false;
 
-	$wrapper_markup = '<ul %1$s>%2$s</ul>';
+	$wrapper_markup = $is_nested ? '%2$s' : '<ul %1$s>%2$s</ul>';
 
-	$items_markup = block_core_page_list_render_nested_page_list( $open_submenus_on_click, $show_submenu_icons, $is_navigation_child, $nested_pages, $active_page_ancestor_ids, $colors );
+	$items_markup = block_core_page_list_render_nested_page_list( $open_submenus_on_click, $show_submenu_icons, $is_navigation_child, $nested_pages, $is_nested, $active_page_ancestor_ids, $colors );
 
 	$wrapper_attributes = get_block_wrapper_attributes(
 		array(