From cbb720ec3b50108dceb4b6c1c68164b7dff22aaa Mon Sep 17 00:00:00 2001
From: Andrei Draganescu <andrei.draganescu@automattic.com>
Date: Tue, 15 Nov 2022 18:09:02 +0200
Subject: [PATCH 1/7] adds page list item to enable expansion in list view

---
 docs/reference-guides/core-blocks.md          |   9 ++
 packages/block-library/src/index.js           |   2 +
 .../src/page-list-item/block.json             |  49 ++++++
 .../block-library/src/page-list-item/edit.js  |  94 +++++++++++
 .../src/page-list-item/editor.scss            |  59 +++++++
 .../block-library/src/page-list-item/index.js |  24 +++
 .../block-library/src/page-list-item/init.js  |   6 +
 .../src/page-list-item/style.scss             |  17 ++
 packages/block-library/src/page-list/edit.js  | 146 ++++--------------
 9 files changed, 294 insertions(+), 112 deletions(-)
 create mode 100644 packages/block-library/src/page-list-item/block.json
 create mode 100644 packages/block-library/src/page-list-item/edit.js
 create mode 100644 packages/block-library/src/page-list-item/editor.scss
 create mode 100644 packages/block-library/src/page-list-item/index.js
 create mode 100644 packages/block-library/src/page-list-item/init.js
 create mode 100644 packages/block-library/src/page-list-item/style.scss

diff --git a/docs/reference-guides/core-blocks.md b/docs/reference-guides/core-blocks.md
index 09e48ebda0f65e..5fab7070a38e70 100644
--- a/docs/reference-guides/core-blocks.md
+++ b/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
+
+Display 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:** design
+-	**Supports:** ~~html~~, ~~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))
diff --git a/packages/block-library/src/index.js b/packages/block-library/src/index.js
index 88d2c26f02403a..34ba9fd5a2c8f1 100644
--- a/packages/block-library/src/index.js
+++ b/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,
diff --git a/packages/block-library/src/page-list-item/block.json b/packages/block-library/src/page-list-item/block.json
new file mode 100644
index 00000000000000..9aa67e97bae15b
--- /dev/null
+++ b/packages/block-library/src/page-list-item/block.json
@@ -0,0 +1,49 @@
+{
+	"$schema": "https://schemas.wp.org/trunk/block.json",
+	"apiVersion": 2,
+	"name": "core/page-list-item",
+	"title": "Page List Item",
+	"category": "design",
+	"parent": [ "core/page-list" ],
+	"description": "Display a list of all pages.",
+	"keywords": [ "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
+	},
+	"editorStyle": "wp-block-page-list-editor",
+	"style": "wp-block-page-list"
+}
diff --git a/packages/block-library/src/page-list-item/edit.js b/packages/block-library/src/page-list-item/edit.js
new file mode 100644
index 00000000000000..db8e0a5c173736
--- /dev/null
+++ b/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>
+	);
+}
diff --git a/packages/block-library/src/page-list-item/editor.scss b/packages/block-library/src/page-list-item/editor.scss
new file mode 100644
index 00000000000000..83a70bafd94853
--- /dev/null
+++ b/packages/block-library/src/page-list-item/editor.scss
@@ -0,0 +1,59 @@
+.wp-block-navigation {
+	// Block wrapper gets the classes in the editor, and there's an extra div wrapper for now, so background styles need to be inherited.
+	.wp-block-page-list > div,
+	.wp-block-page-list {
+		background-color: inherit;
+	}
+
+	// space-between justification.
+	&.items-justified-space-between {
+		.wp-block-page-list > div,
+		.wp-block-page-list {
+			display: contents;
+			flex: 1;
+		}
+
+		&.has-child-selected .wp-block-page-list > div,
+		&.has-child-selected .wp-block-page-list,
+		&.is-selected .wp-block-page-list > div,
+		&.is-selected .wp-block-page-list {
+			flex: inherit;
+		}
+	}
+}
+
+// Make links unclickable in the editor.
+.wp-block-pages-list__item__link {
+	pointer-events: none;
+}
+
+// Modal that shows conversion option.
+.wp-block-page-list-modal {
+	@include break-small() {
+		max-width: $break-mobile;
+	}
+}
+
+.wp-block-page-list-modal-buttons {
+	display: flex;
+	justify-content: flex-end;
+	gap: $grid-unit-15;
+}
+
+// Simulate open on click behaviour in the editor by opening on focus instead.
+
+.wp-block-page-list {
+	.open-on-click:focus-within {
+		> .wp-block-navigation__submenu-container {
+			visibility: visible;
+			opacity: 1;
+			width: auto;
+			height: auto;
+			min-width: 200px;
+		}
+	}
+}
+
+.wp-block-page-list .components-notice {
+	margin-left: 0;
+}
diff --git a/packages/block-library/src/page-list-item/index.js b/packages/block-library/src/page-list-item/index.js
new file mode 100644
index 00000000000000..18b7fe2e40e9ea
--- /dev/null
+++ b/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 } );
diff --git a/packages/block-library/src/page-list-item/init.js b/packages/block-library/src/page-list-item/init.js
new file mode 100644
index 00000000000000..79f0492c2cb2f8
--- /dev/null
+++ b/packages/block-library/src/page-list-item/init.js
@@ -0,0 +1,6 @@
+/**
+ * Internal dependencies
+ */
+import { init } from './';
+
+export default init();
diff --git a/packages/block-library/src/page-list-item/style.scss b/packages/block-library/src/page-list-item/style.scss
new file mode 100644
index 00000000000000..d06a6142573bec
--- /dev/null
+++ b/packages/block-library/src/page-list-item/style.scss
@@ -0,0 +1,17 @@
+// The Page List block should inherit navigation styles when nested within it
+.wp-block-navigation {
+	.wp-block-page-list {
+		display: flex;
+		flex-direction: var(--navigation-layout-direction, initial);
+		justify-content: var(--navigation-layout-justify, initial);
+		align-items: var(--navigation-layout-align, initial);
+		flex-wrap: var(--navigation-layout-wrap, wrap);
+		background-color: inherit;
+	}
+
+	// Menu items generated by the page list do not get `has-[x]-background-color`,
+	// and must therefore inherit from the parent.
+	.wp-block-navigation-item {
+		background-color: inherit;
+	}
+}
diff --git a/packages/block-library/src/page-list/edit.js b/packages/block-library/src/page-list/edit.js
index ac7ed6162cf975..d3a237004defdc 100644
--- a/packages/block-library/src/page-list/edit.js
+++ b/packages/block-library/src/page-list/edit.js
@@ -9,6 +9,7 @@ import classnames from 'classnames';
 import {
 	InspectorControls,
 	BlockControls,
+	InnerBlocks,
 	useBlockProps,
 	getColorClassName,
 } from '@wordpress/block-editor';
@@ -20,15 +21,13 @@ import {
 	ComboboxControl,
 } 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 { useMemo, useState } from '@wordpress/element';
+import { useEntityRecords } from '@wordpress/core-data';
 
 /**
  * Internal dependencies
  */
 import ConvertToLinksModal from './convert-to-links-modal';
-import { ItemSubmenuIcon } from '../navigation-link/icons';
 
 // We only show the edit option when page count is <= MAX_PAGE_COUNT
 // Performance of Navigation Links is not good past this value.
@@ -65,6 +64,34 @@ export default function PageListEdit( {
 		style: { ...context.style?.color },
 	} );
 
+	const makeBlockTemplate = ( parentId = 0 ) => {
+		const pages = pagesByParentId.get( parentId );
+
+		if ( ! pages?.length ) {
+			return [];
+		}
+
+		return pages.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 = makeBlockTemplate( page.id );
+			item = [ 'core/page-list-item', pageProps, children ];
+
+			template.push( item );
+
+			return template;
+		}, [] );
+	};
+
+	const pagesTemplate = makeBlockTemplate( parentPageID );
+
 	const getBlockContent = () => {
 		if ( ! hasResolvedPages ) {
 			return (
@@ -97,10 +124,9 @@ export default function PageListEdit( {
 		if ( totalPages > 0 ) {
 			return (
 				<ul { ...blockProps }>
-					<PageItems
-						context={ context }
-						parentId={ parentPageID }
-						pagesByParentId={ pagesByParentId }
+					<InnerBlocks
+						template={ pagesTemplate }
+						templateLock="all"
 					/>
 				</ul>
 			);
@@ -155,21 +181,6 @@ export default function PageListEdit( {
 	);
 }
 
-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 useGetPages() {
 	const { records: pages, hasResolved: hasResolvedPages } = useEntityRecords(
 		'postType',
@@ -221,92 +232,3 @@ function usePageData( pageId = 0 ) {
 		};
 	}, [ pageId, pages, hasResolvedPages ] );
 }
-
-const PageItems = memo( function PageItems( {
-	context,
-	pagesByParentId,
-	parentId = 0,
-	depth = 0,
-} ) {
-	const parentPage = usePageData( parentId );
-	const pages = pagesByParentId.get( parentId )
-		? pagesByParentId.get( parentId )
-		: [ parentPage ];
-	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>
-		);
-	} );
-} );

From f8b919bf8167a3a69b8c323c70a2c59dc7946549 Mon Sep 17 00:00:00 2001
From: Andrei Draganescu <andrei.draganescu@automattic.com>
Date: Wed, 16 Nov 2022 14:17:23 +0200
Subject: [PATCH 2/7] fixes the readme of the page list item block

---
 docs/reference-guides/core-blocks.md | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/docs/reference-guides/core-blocks.md b/docs/reference-guides/core-blocks.md
index 5fab7070a38e70..877c925bf5e3b8 100644
--- a/docs/reference-guides/core-blocks.md
+++ b/docs/reference-guides/core-blocks.md
@@ -60,7 +60,7 @@ Prompt visitors to take action with a group of button-style links. ([Source](htt
 -	**Name:** core/buttons
 -	**Category:** design
 -	**Supports:** align (full, wide), anchor, spacing (blockGap, margin), typography (fontSize, lineHeight)
--	**Attributes:** 
+-	**Attributes:**
 
 ## Calendar
 
@@ -168,7 +168,7 @@ Contains the block elements used to display a comment, like the title, date, aut
 -	**Name:** core/comment-template
 -	**Category:** design
 -	**Supports:** align, spacing (margin, padding), typography (fontSize, lineHeight), ~~html~~, ~~reusable~~
--	**Attributes:** 
+-	**Attributes:**
 
 ## Comments
 
@@ -204,7 +204,7 @@ Displays a list of page numbers for comments pagination. ([Source](https://githu
 -	**Name:** core/comments-pagination-numbers
 -	**Category:** theme
 -	**Supports:** color (background, gradients, ~~text~~), typography (fontSize, lineHeight), ~~html~~, ~~reusable~~
--	**Attributes:** 
+-	**Attributes:**
 
 ## Comments Previous Page
 
@@ -420,7 +420,7 @@ Separate your content into a multi-page experience. ([Source](https://github.com
 -	**Name:** core/nextpage
 -	**Category:** design
 -	**Supports:** ~~className~~, ~~customClassName~~, ~~html~~
--	**Attributes:** 
+-	**Attributes:**
 
 ## Page List
 
@@ -433,7 +433,7 @@ Display a list of all pages. ([Source](https://github.com/WordPress/gutenberg/tr
 
 ## Page List Item
 
-Display a list of all pages. ([Source](https://github.com/WordPress/gutenberg/tree/trunk/packages/block-library/src/page-list-item))
+Display a page inside a Page List block. ([Source](https://github.com/WordPress/gutenberg/tree/trunk/packages/block-library/src/page-list-item))
 
 -	**Name:** core/page-list-item
 -	**Category:** design
@@ -528,7 +528,7 @@ Displays the contents of a post or page. ([Source](https://github.com/WordPress/
 -	**Name:** core/post-content
 -	**Category:** theme
 -	**Supports:** align (full, wide), dimensions (minHeight), typography (fontSize, lineHeight), ~~html~~
--	**Attributes:** 
+-	**Attributes:**
 
 ## Post Date
 
@@ -573,7 +573,7 @@ Contains the block elements used to render a post, like the title, date, feature
 -	**Name:** core/post-template
 -	**Category:** theme
 -	**Supports:** align, typography (fontSize, lineHeight), ~~html~~, ~~reusable~~
--	**Attributes:** 
+-	**Attributes:**
 
 ## Post Terms
 
@@ -627,7 +627,7 @@ Contains the block elements used to render content when no query results are fou
 -	**Name:** core/query-no-results
 -	**Category:** theme
 -	**Supports:** align, color (background, gradients, link, text), typography (fontSize, lineHeight), ~~html~~, ~~reusable~~
--	**Attributes:** 
+-	**Attributes:**
 
 ## Pagination
 
@@ -654,7 +654,7 @@ Displays a list of page numbers for pagination ([Source](https://github.com/Word
 -	**Name:** core/query-pagination-numbers
 -	**Category:** theme
 -	**Supports:** color (background, gradients, ~~text~~), typography (fontSize, lineHeight), ~~html~~, ~~reusable~~
--	**Attributes:** 
+-	**Attributes:**
 
 ## Previous Page
 

From ea7cf5d30e7f3e44ae49ff94e1474dd1592a3f0c Mon Sep 17 00:00:00 2001
From: Andrei Draganescu <andrei.draganescu@automattic.com>
Date: Wed, 16 Nov 2022 14:47:33 +0200
Subject: [PATCH 3/7] disable locking UI for page list item

---
 docs/reference-guides/core-blocks.md                 | 4 ++--
 packages/block-library/src/page-list-item/block.json | 3 ++-
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/docs/reference-guides/core-blocks.md b/docs/reference-guides/core-blocks.md
index 877c925bf5e3b8..506a8ac839032f 100644
--- a/docs/reference-guides/core-blocks.md
+++ b/docs/reference-guides/core-blocks.md
@@ -433,11 +433,11 @@ Display a list of all pages. ([Source](https://github.com/WordPress/gutenberg/tr
 
 ## Page List Item
 
-Display a page inside a Page List block. ([Source](https://github.com/WordPress/gutenberg/tree/trunk/packages/block-library/src/page-list-item))
+Display 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:** design
--	**Supports:** ~~html~~, ~~reusable~~
+-	**Supports:** ~~html~~, ~~lock~~, ~~reusable~~
 -	**Attributes:** hasChildren, id, label, link, title
 
 ## Paragraph
diff --git a/packages/block-library/src/page-list-item/block.json b/packages/block-library/src/page-list-item/block.json
index 9aa67e97bae15b..a9ee0c3c532732 100644
--- a/packages/block-library/src/page-list-item/block.json
+++ b/packages/block-library/src/page-list-item/block.json
@@ -42,7 +42,8 @@
 	],
 	"supports": {
 		"reusable": false,
-		"html": false
+		"html": false,
+		"lock": false
 	},
 	"editorStyle": "wp-block-page-list-editor",
 	"style": "wp-block-page-list"

From 725691c256e67d4609d70d7942633055bbda87b0 Mon Sep 17 00:00:00 2001
From: Andrei Draganescu <andrei.draganescu@automattic.com>
Date: Thu, 17 Nov 2022 09:11:11 +0200
Subject: [PATCH 4/7] memoize the template and remove useless markup in page
 list

---
 packages/block-library/src/page-list/edit.js | 18 ++++++++----------
 1 file changed, 8 insertions(+), 10 deletions(-)

diff --git a/packages/block-library/src/page-list/edit.js b/packages/block-library/src/page-list/edit.js
index d3a237004defdc..d9e541305b6976 100644
--- a/packages/block-library/src/page-list/edit.js
+++ b/packages/block-library/src/page-list/edit.js
@@ -9,8 +9,8 @@ import classnames from 'classnames';
 import {
 	InspectorControls,
 	BlockControls,
-	InnerBlocks,
 	useBlockProps,
+	useInnerBlocksProps,
 	getColorClassName,
 } from '@wordpress/block-editor';
 import {
@@ -90,7 +90,12 @@ export default function PageListEdit( {
 		}, [] );
 	};
 
-	const pagesTemplate = makeBlockTemplate( parentPageID );
+	const pagesTemplate = useMemo( makeBlockTemplate, [ pagesByParentId ] );
+
+	const innerBlocksProps = useInnerBlocksProps( blockProps, {
+		template: pagesTemplate,
+		templateLock: 'all',
+	} );
 
 	const getBlockContent = () => {
 		if ( ! hasResolvedPages ) {
@@ -122,14 +127,7 @@ export default function PageListEdit( {
 		}
 
 		if ( totalPages > 0 ) {
-			return (
-				<ul { ...blockProps }>
-					<InnerBlocks
-						template={ pagesTemplate }
-						templateLock="all"
-					/>
-				</ul>
-			);
+			return <ul { ...innerBlocksProps }></ul>;
 		}
 	};
 

From 4f22049c768e176c9671a6897f765bdd838cd4d2 Mon Sep 17 00:00:00 2001
From: Andrei Draganescu <andrei.draganescu@automattic.com>
Date: Thu, 17 Nov 2022 09:39:26 +0200
Subject: [PATCH 5/7] page list item fixtures

---
 .../fixtures/blocks/core__page-list-item.html      |  1 +
 .../fixtures/blocks/core__page-list-item.json      | 11 +++++++++++
 .../blocks/core__page-list-item.parsed.json        | 14 ++++++++++++++
 .../blocks/core__page-list-item.serialized.html    |  1 +
 4 files changed, 27 insertions(+)
 create mode 100644 test/integration/fixtures/blocks/core__page-list-item.html
 create mode 100644 test/integration/fixtures/blocks/core__page-list-item.json
 create mode 100644 test/integration/fixtures/blocks/core__page-list-item.parsed.json
 create mode 100644 test/integration/fixtures/blocks/core__page-list-item.serialized.html

diff --git a/test/integration/fixtures/blocks/core__page-list-item.html b/test/integration/fixtures/blocks/core__page-list-item.html
new file mode 100644
index 00000000000000..2b1b33d71231cf
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__page-list-item.html
@@ -0,0 +1 @@
+<!-- wp:core/page-list-item {"id":"1","label":"Page","link":"https://example.com","hasChildren":"false"} /-->
diff --git a/test/integration/fixtures/blocks/core__page-list-item.json b/test/integration/fixtures/blocks/core__page-list-item.json
new file mode 100644
index 00000000000000..5e6f09eb971eb7
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__page-list-item.json
@@ -0,0 +1,11 @@
+[
+	{
+		"name": "core/page-list-item",
+		"isValid": true,
+		"attributes": {
+			"label": "Page",
+			"link": "https://example.com"
+		},
+		"innerBlocks": []
+	}
+]
diff --git a/test/integration/fixtures/blocks/core__page-list-item.parsed.json b/test/integration/fixtures/blocks/core__page-list-item.parsed.json
new file mode 100644
index 00000000000000..e93cff97dd385e
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__page-list-item.parsed.json
@@ -0,0 +1,14 @@
+[
+	{
+		"blockName": "core/page-list-item",
+		"attrs": {
+			"id": "1",
+			"label": "Page",
+			"link": "https://example.com",
+			"hasChildren": "false"
+		},
+		"innerBlocks": [],
+		"innerHTML": "",
+		"innerContent": []
+	}
+]
diff --git a/test/integration/fixtures/blocks/core__page-list-item.serialized.html b/test/integration/fixtures/blocks/core__page-list-item.serialized.html
new file mode 100644
index 00000000000000..d61659fe1899a9
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__page-list-item.serialized.html
@@ -0,0 +1 @@
+<!-- wp:page-list-item {"label":"Page","link":"https://example.com"} /-->

From 86d80e0d98d53d369bcf61555fac633cec5db764 Mon Sep 17 00:00:00 2001
From: Andrei Draganescu <andrei.draganescu@automattic.com>
Date: Mon, 21 Nov 2022 17:40:47 +0200
Subject: [PATCH 6/7] Removed copied over CSS, added better configuration to
 page list item json configuration.

Co-authored-by: Ben Dwyer <275961+scruffian@users.noreply.github.com>
---
 docs/reference-guides/core-blocks.md          |  6 +-
 .../src/page-list-item/block.json             |  9 +--
 .../src/page-list-item/editor.scss            | 59 -------------------
 .../src/page-list-item/style.scss             | 17 ------
 4 files changed, 8 insertions(+), 83 deletions(-)
 delete mode 100644 packages/block-library/src/page-list-item/editor.scss
 delete mode 100644 packages/block-library/src/page-list-item/style.scss

diff --git a/docs/reference-guides/core-blocks.md b/docs/reference-guides/core-blocks.md
index 506a8ac839032f..fa5dcb7bd6f129 100644
--- a/docs/reference-guides/core-blocks.md
+++ b/docs/reference-guides/core-blocks.md
@@ -433,11 +433,11 @@ Display a list of all pages. ([Source](https://github.com/WordPress/gutenberg/tr
 
 ## Page List Item
 
-Display a list of all pages. ([Source](https://github.com/WordPress/gutenberg/tree/trunk/packages/block-library/src/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:** design
--	**Supports:** ~~html~~, ~~lock~~, ~~reusable~~
+-	**Category:** widgets
+-	**Supports:** ~~html~~, ~~inserter~~, ~~lock~~, ~~reusable~~
 -	**Attributes:** hasChildren, id, label, link, title
 
 ## Paragraph
diff --git a/packages/block-library/src/page-list-item/block.json b/packages/block-library/src/page-list-item/block.json
index a9ee0c3c532732..97c312d1b7960e 100644
--- a/packages/block-library/src/page-list-item/block.json
+++ b/packages/block-library/src/page-list-item/block.json
@@ -3,10 +3,10 @@
 	"apiVersion": 2,
 	"name": "core/page-list-item",
 	"title": "Page List Item",
-	"category": "design",
+	"category": "widgets",
 	"parent": [ "core/page-list" ],
-	"description": "Display a list of all pages.",
-	"keywords": [ "menu", "navigation" ],
+	"description": "Displays a page inside a list of all pages.",
+	"keywords": [ "page", "menu", "navigation" ],
 	"textdomain": "default",
 	"attributes": {
 		"id": {
@@ -43,7 +43,8 @@
 	"supports": {
 		"reusable": false,
 		"html": false,
-		"lock": false
+		"lock": false,
+		"inserter": false
 	},
 	"editorStyle": "wp-block-page-list-editor",
 	"style": "wp-block-page-list"
diff --git a/packages/block-library/src/page-list-item/editor.scss b/packages/block-library/src/page-list-item/editor.scss
deleted file mode 100644
index 83a70bafd94853..00000000000000
--- a/packages/block-library/src/page-list-item/editor.scss
+++ /dev/null
@@ -1,59 +0,0 @@
-.wp-block-navigation {
-	// Block wrapper gets the classes in the editor, and there's an extra div wrapper for now, so background styles need to be inherited.
-	.wp-block-page-list > div,
-	.wp-block-page-list {
-		background-color: inherit;
-	}
-
-	// space-between justification.
-	&.items-justified-space-between {
-		.wp-block-page-list > div,
-		.wp-block-page-list {
-			display: contents;
-			flex: 1;
-		}
-
-		&.has-child-selected .wp-block-page-list > div,
-		&.has-child-selected .wp-block-page-list,
-		&.is-selected .wp-block-page-list > div,
-		&.is-selected .wp-block-page-list {
-			flex: inherit;
-		}
-	}
-}
-
-// Make links unclickable in the editor.
-.wp-block-pages-list__item__link {
-	pointer-events: none;
-}
-
-// Modal that shows conversion option.
-.wp-block-page-list-modal {
-	@include break-small() {
-		max-width: $break-mobile;
-	}
-}
-
-.wp-block-page-list-modal-buttons {
-	display: flex;
-	justify-content: flex-end;
-	gap: $grid-unit-15;
-}
-
-// Simulate open on click behaviour in the editor by opening on focus instead.
-
-.wp-block-page-list {
-	.open-on-click:focus-within {
-		> .wp-block-navigation__submenu-container {
-			visibility: visible;
-			opacity: 1;
-			width: auto;
-			height: auto;
-			min-width: 200px;
-		}
-	}
-}
-
-.wp-block-page-list .components-notice {
-	margin-left: 0;
-}
diff --git a/packages/block-library/src/page-list-item/style.scss b/packages/block-library/src/page-list-item/style.scss
deleted file mode 100644
index d06a6142573bec..00000000000000
--- a/packages/block-library/src/page-list-item/style.scss
+++ /dev/null
@@ -1,17 +0,0 @@
-// The Page List block should inherit navigation styles when nested within it
-.wp-block-navigation {
-	.wp-block-page-list {
-		display: flex;
-		flex-direction: var(--navigation-layout-direction, initial);
-		justify-content: var(--navigation-layout-justify, initial);
-		align-items: var(--navigation-layout-align, initial);
-		flex-wrap: var(--navigation-layout-wrap, wrap);
-		background-color: inherit;
-	}
-
-	// Menu items generated by the page list do not get `has-[x]-background-color`,
-	// and must therefore inherit from the parent.
-	.wp-block-navigation-item {
-		background-color: inherit;
-	}
-}

From f82d6d3df85a9413c34ca3fd5d56d4f4f86dabb5 Mon Sep 17 00:00:00 2001
From: Andrei Draganescu <andrei.draganescu@automattic.com>
Date: Fri, 25 Nov 2022 16:31:01 +0200
Subject: [PATCH 7/7] removed manual editing of core blocks docs

---
 docs/reference-guides/core-blocks.md | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/docs/reference-guides/core-blocks.md b/docs/reference-guides/core-blocks.md
index fa5dcb7bd6f129..7e359ae4bc7476 100644
--- a/docs/reference-guides/core-blocks.md
+++ b/docs/reference-guides/core-blocks.md
@@ -60,7 +60,7 @@ Prompt visitors to take action with a group of button-style links. ([Source](htt
 -	**Name:** core/buttons
 -	**Category:** design
 -	**Supports:** align (full, wide), anchor, spacing (blockGap, margin), typography (fontSize, lineHeight)
--	**Attributes:**
+-	**Attributes:** 
 
 ## Calendar
 
@@ -168,7 +168,7 @@ Contains the block elements used to display a comment, like the title, date, aut
 -	**Name:** core/comment-template
 -	**Category:** design
 -	**Supports:** align, spacing (margin, padding), typography (fontSize, lineHeight), ~~html~~, ~~reusable~~
--	**Attributes:**
+-	**Attributes:** 
 
 ## Comments
 
@@ -204,7 +204,7 @@ Displays a list of page numbers for comments pagination. ([Source](https://githu
 -	**Name:** core/comments-pagination-numbers
 -	**Category:** theme
 -	**Supports:** color (background, gradients, ~~text~~), typography (fontSize, lineHeight), ~~html~~, ~~reusable~~
--	**Attributes:**
+-	**Attributes:** 
 
 ## Comments Previous Page
 
@@ -420,7 +420,7 @@ Separate your content into a multi-page experience. ([Source](https://github.com
 -	**Name:** core/nextpage
 -	**Category:** design
 -	**Supports:** ~~className~~, ~~customClassName~~, ~~html~~
--	**Attributes:**
+-	**Attributes:** 
 
 ## Page List
 
@@ -528,7 +528,7 @@ Displays the contents of a post or page. ([Source](https://github.com/WordPress/
 -	**Name:** core/post-content
 -	**Category:** theme
 -	**Supports:** align (full, wide), dimensions (minHeight), typography (fontSize, lineHeight), ~~html~~
--	**Attributes:**
+-	**Attributes:** 
 
 ## Post Date
 
@@ -573,7 +573,7 @@ Contains the block elements used to render a post, like the title, date, feature
 -	**Name:** core/post-template
 -	**Category:** theme
 -	**Supports:** align, typography (fontSize, lineHeight), ~~html~~, ~~reusable~~
--	**Attributes:**
+-	**Attributes:** 
 
 ## Post Terms
 
@@ -627,7 +627,7 @@ Contains the block elements used to render content when no query results are fou
 -	**Name:** core/query-no-results
 -	**Category:** theme
 -	**Supports:** align, color (background, gradients, link, text), typography (fontSize, lineHeight), ~~html~~, ~~reusable~~
--	**Attributes:**
+-	**Attributes:** 
 
 ## Pagination
 
@@ -654,7 +654,7 @@ Displays a list of page numbers for pagination ([Source](https://github.com/Word
 -	**Name:** core/query-pagination-numbers
 -	**Category:** theme
 -	**Supports:** color (background, gradients, ~~text~~), typography (fontSize, lineHeight), ~~html~~, ~~reusable~~
--	**Attributes:**
+-	**Attributes:** 
 
 ## Previous Page