@wordpress/block-library 7.19.0 → 8.0.0

package/src/page-list/edit.js

@@ -6,29 +6,51 @@ 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;
 
-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 { replaceInnerBlocks, __unstableMarkNextChangeAsNotPersistent } =
+		useDispatch( blockEditorStore );
 
 	const isNavigationChild = 'showSubmenuIcon' in context;
 	const allowConvertToLinks =
@@ -52,6 +74,67 @@ 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',
+	} );
+
 	const getBlockContent = () => {
 		if ( ! hasResolvedPages ) {
 			return (
@@ -81,21 +164,93 @@ 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>;
+		}
 	};
 
+	useEffect( () => {
+		__unstableMarkNextChangeAsNotPersistent();
+		if ( blockList ) {
+			replaceInnerBlocks( clientId, blockList );
+		}
+	}, [ clientId, blockList ] );
+
+	const { replaceBlock, selectBlock } = useDispatch( blockEditorStore );
+
+	const { parentNavBlockClientId } = useSelect( ( select ) => {
+		const { getSelectedBlockClientId, getBlockParentsByBlockName } =
+			select( blockEditorStore );
+
+		const _selectedBlockClientId = getSelectedBlockClientId();
+
+		return {
+			parentNavBlockClientId: getBlockParentsByBlockName(
+				_selectedBlockClientId,
+				'core/navigation',
+				true
+			)[ 0 ],
+		};
+	}, [] );
+
 	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 +269,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 +282,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 +314,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/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;

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

@@ -1,10 +1,28 @@
 /**
  * Internal dependencies
  */
-import { convertSelectedBlockToNavigationLinks } from '../convert-to-links-modal';
+
+import { convertToNavigationLinks } from '../convert-to-navigation-links';
+
+// Mock createBlock to avoid creating the blocks in test environment
+// as convertToNavigationLinks calls this method internally.
+jest.mock( '@wordpress/blocks', () => {
+	const blocks = jest.requireActual( '@wordpress/blocks' );
+
+	return {
+		...blocks,
+		createBlock( name, attributes, innerBlocks ) {
+			return {
+				name,
+				attributes,
+				innerBlocks,
+			};
+		},
+	};
+} );
 
 describe( 'page list convert to links', () => {
-	describe( 'convertSelectedBlockToNavigationLinks', () => {
+	describe( 'convertToNavigationLinks', () => {
 		it( 'Can create submenus', () => {
 			const pages = [
 				{
@@ -88,22 +106,10 @@ describe( 'page list convert to links', () => {
 					type: 'page',
 				},
 			];
-			const replaceBlock = jest.fn();
-			const createBlock = jest.fn(
-				( name, attributes, innerBlocks ) => ( {
-					name,
-					attributes,
-					innerBlocks,
-				} )
-			);
-			const convertLinks = convertSelectedBlockToNavigationLinks( {
-				pages,
-				clientId: 'testId',
-				replaceBlock,
-				createBlock,
-			} );
-			convertLinks();
-			expect( replaceBlock.mock.calls?.[ 0 ]?.[ 1 ] ).toEqual( [
+
+			const convertLinks = convertToNavigationLinks( pages );
+
+			expect( convertLinks ).toEqual( [
 				{
 					attributes: {
 						id: 2,
@@ -280,22 +286,10 @@ describe( 'page list convert to links', () => {
 					type: 'page',
 				},
 			];
-			const replaceBlock = jest.fn();
-			const createBlock = jest.fn(
-				( name, attributes, innerBlocks ) => ( {
-					name,
-					attributes,
-					innerBlocks,
-				} )
-			);
-			const convertLinks = convertSelectedBlockToNavigationLinks( {
-				pages,
-				clientId: 'testId',
-				replaceBlock,
-				createBlock,
-			} );
-			convertLinks();
-			expect( replaceBlock.mock.calls?.[ 0 ]?.[ 1 ] ).toEqual( [
+
+			const convertLinks = convertToNavigationLinks( pages );
+
+			expect( convertLinks ).toEqual( [
 				{
 					attributes: {
 						id: 2,

package/src/page-list-item/block.json

@@ -0,0 +1,51 @@
+{
+	"$schema": "https://schemas.wp.org/trunk/block.json",
+	"apiVersion": 2,
+	"name": "core/page-list-item",
+	"title": "Page List Item",
+	"category": "widgets",
+	"parent": [ "core/page-list" ],
+	"description": "Displays a page inside a list of all pages.",
+	"keywords": [ "page", "menu", "navigation" ],
+	"textdomain": "default",
+	"attributes": {
+		"id": {
+			"type": "number"
+		},
+		"label": {
+			"type": "string"
+		},
+		"title": {
+			"type": "string"
+		},
+		"link": {
+			"type": "string"
+		},
+		"hasChildren": {
+			"type": "boolean"
+		}
+	},
+	"usesContext": [
+		"textColor",
+		"customTextColor",
+		"backgroundColor",
+		"customBackgroundColor",
+		"overlayTextColor",
+		"customOverlayTextColor",
+		"overlayBackgroundColor",
+		"customOverlayBackgroundColor",
+		"fontSize",
+		"customFontSize",
+		"showSubmenuIcon",
+		"style",
+		"openSubmenusOnClick"
+	],
+	"supports": {
+		"reusable": false,
+		"html": false,
+		"lock": false,
+		"inserter": false
+	},
+	"editorStyle": "wp-block-page-list-editor",
+	"style": "wp-block-page-list"
+}

package/src/page-list-item/edit.js

@@ -0,0 +1,94 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
+/**
+ * WordPress dependencies
+ */
+import { InnerBlocks } from '@wordpress/block-editor';
+import { useSelect } from '@wordpress/data';
+import { store as coreStore } from '@wordpress/core-data';
+
+/**
+ * Internal dependencies
+ */
+import { ItemSubmenuIcon } from '../navigation-link/icons';
+
+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;
+	}, [] );
+}
+
+export default function PageListItemEdit( { context, attributes } ) {
+	const { id, label, link, hasChildren } = attributes;
+	const isNavigationChild = 'showSubmenuIcon' in context;
+	const frontPageId = useFrontPageId();
+	return (
+		<li
+			key={ 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': id === frontPageId,
+			} ) }
+		>
+			{ hasChildren && context.openSubmenusOnClick ? (
+				<>
+					<button
+						className="wp-block-navigation-item__content wp-block-navigation-submenu__toggle"
+						aria-expanded="false"
+					>
+						{ label }
+					</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={ link }
+				>
+					{ label }
+				</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,
+						} ) }
+					>
+						<InnerBlocks />
+					</ul>
+				</>
+			) }
+		</li>
+	);
+}

package/src/page-list-item/index.js

@@ -0,0 +1,24 @@
+/**
+ * WordPress dependencies
+ */
+import { pages as icon } from '@wordpress/icons';
+
+/**
+ * Internal dependencies
+ */
+import initBlock from '../utils/init-block';
+import metadata from './block.json';
+import edit from './edit.js';
+
+const { name } = metadata;
+
+export { metadata, name };
+
+export const settings = {
+	__experimentalLabel: ( { label } ) => label,
+	icon,
+	example: {},
+	edit,
+};
+
+export const init = () => initBlock( { name, metadata, settings } );

package/src/page-list-item/init.js

@@ -0,0 +1,6 @@
+/**
+ * Internal dependencies
+ */
+import { init } from './';
+
+export default init();

package/src/paragraph/index.js

@@ -30,12 +30,6 @@ export const settings = {
 			content: __(
 				'In a village of La Mancha, the name of which I have no desire to call to mind, there lived not long since one of those gentlemen that keep a lance in the lance-rack, an old buckler, a lean hack, and a greyhound for coursing.'
 			),
-			style: {
-				typography: {
-					fontSize: 28,
-				},
-			},
-			dropCap: true,
 		},
 	},
 	__experimentalLabel( attributes, { context } ) {

package/src/post-author/edit.js

@@ -62,7 +62,7 @@ function PostAuthorEdit( {
 		attributes;
 	const avatarSizes = [];
 	const authorName = authorDetails?.name || __( 'Post Author' );
-	if ( authorDetails ) {
+	if ( authorDetails?.avatar_urls ) {
 		Object.keys( authorDetails.avatar_urls ).forEach( ( size ) => {
 			avatarSizes.push( {
 				value: size,
@@ -103,6 +103,7 @@ function PostAuthorEdit( {
 						authorOptions.length &&
 						( ( showCombobox && (
 							<ComboboxControl
+								__nextHasNoMarginBottom
 								label={ __( 'Author' ) }
 								options={ authorOptions }
 								value={ authorId }
@@ -172,7 +173,7 @@ function PostAuthorEdit( {
 			</BlockControls>
 
 			<div { ...blockProps }>
-				{ showAvatar && authorDetails && (
+				{ showAvatar && authorDetails?.avatar_urls && (
 					<div className="wp-block-post-author__avatar">
 						<img
 							width={ attributes.avatarSize }

package/src/post-content/index.php

@@ -25,8 +25,7 @@ function render_block_core_post_content( $attributes, $content, $block ) {
 	if ( isset( $seen_ids[ $post_id ] ) ) {
 		// WP_DEBUG_DISPLAY must only be honored when WP_DEBUG. This precedent
 		// is set in `wp_debug_mode()`.
-		$is_debug = defined( 'WP_DEBUG' ) && WP_DEBUG &&
-			defined( 'WP_DEBUG_DISPLAY' ) && WP_DEBUG_DISPLAY;
+		$is_debug = WP_DEBUG && WP_DEBUG_DISPLAY;
 
 		return $is_debug ?
 			// translators: Visible only in the front end, this warning takes the place of a faulty block.