Enable page list to expand in list view

docs/reference-guides/core-blocks.md

@@ -431,6 +431,15 @@ Display a list of all pages. ([Source](https://github.com/WordPress/gutenberg/tr
 -	**Supports:** ~~html~~, ~~reusable~~
 -	**Attributes:** parentPageID
 
+## Page List Item
+
+Displays a page inside a list of all pages. ([Source](https://github.com/WordPress/gutenberg/tree/trunk/packages/block-library/src/page-list-item))
+
+-	**Name:** core/page-list-item
+-	**Category:** widgets
+-	**Supports:** ~~html~~, ~~inserter~~, ~~lock~~, ~~reusable~~
+-	**Attributes:** hasChildren, id, label, link, title
+
 ## Paragraph
 
 Start with the basic building block of all narrative. ([Source](https://github.com/WordPress/gutenberg/tree/trunk/packages/block-library/src/paragraph))

packages/block-library/src/index.js

@@ -67,6 +67,7 @@ import * as navigationSubmenu from './navigation-submenu';
 import * as nextpage from './nextpage';
 import * as pattern from './pattern';
 import * as pageList from './page-list';
+import * as pageListItem from './page-list-item';
 import * as paragraph from './paragraph';
 import * as postAuthor from './post-author';
 import * as postAuthorName from './post-author-name';
@@ -155,6 +156,7 @@ const getAllBlocks = () =>
 		more,
 		nextpage,
 		pageList,
+		pageListItem,
 		pattern,
 		preformatted,
 		pullquote,

packages/block-library/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"
+}

packages/block-library/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>
+	);
+}

packages/block-library/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 } );

packages/block-library/src/page-list-item/init.js

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