Add basic pages block (#28265)

* Add basic pages block

* Add dropdowns and indicators

* Inherit settings from parent Nav block

* Add pages button adds the block and styling improvements

* Change name to page list

* Add pages icon

* Add page list fixture

* Update nav screen snapshot

* Fix placeholder and dropdown background

* Use context and add keywords

* Fix clickability and remove extra classname.

* Test presence of pages block items

* Replace walker with manual iteration

* Fix tests

* Address review feedback

* Order menu items and de-indent comment.

lib/blocks.php

@@ -63,6 +63,7 @@ function gutenberg_reregister_core_block_types() {
 					'shortcode.php'                 => 'core/shortcode',
 					'social-link.php'               => 'core/social-link',
 					'tag-cloud.php'                 => 'core/tag-cloud',
+					'page-list.php'                 => 'core/page-list',
 					'post-author.php'               => 'core/post-author',
 					'post-comment.php'              => 'core/post-comment',
 					'post-comment-author.php'       => 'core/post-comment-author',

packages/block-library/src/editor.scss

@@ -27,6 +27,7 @@
 @import "./navigation/editor.scss";
 @import "./navigation-link/editor.scss";
 @import "./nextpage/editor.scss";
+@import "./page-list/editor.scss";
 @import "./paragraph/editor.scss";
 @import "./post-content/editor.scss";
 @import "./post-excerpt/editor.scss";

packages/block-library/src/index.js

@@ -42,6 +42,7 @@ import * as list from './list';
 import * as missing from './missing';
 import * as more from './more';
 import * as nextpage from './nextpage';
+import * as pageList from './page-list';
 import * as preformatted from './preformatted';
 import * as pullquote from './pullquote';
 import * as reusableBlock from './block';
@@ -149,6 +150,7 @@ export const __experimentalGetCoreBlocks = () => [
 	missing,
 	more,
 	nextpage,
+	pageList,
 	preformatted,
 	pullquote,
 	rss,

packages/block-library/src/navigation/edit.js

@@ -68,6 +68,7 @@ function Navigation( {
 				'core/navigation-link',
 				'core/search',
 				'core/social-links',
+				'core/page-list',
 			],
 			orientation: attributes.orientation || 'horizontal',
 			renderAppender:

packages/block-library/src/navigation/placeholder.js

@@ -97,29 +97,6 @@ function convertMenuItemsToBlocks( menuItems ) {
 	return mapMenuItemsToBlocks( menuTree );
 }
 
-/**
- * Convert pages to blocks.
- *
- * @param {Object[]} pages An array of pages.
- *
- * @return {WPBlock[]} An array of blocks.
- */
-function convertPagesToBlocks( pages ) {
-	if ( ! pages ) {
-		return null;
-	}
-
-	return pages.map( ( { title, type, link: url, id } ) =>
-		createBlock( 'core/navigation-link', {
-			type,
-			id,
-			url,
-			label: ! title.rendered ? __( '(no title)' ) : title.rendered,
-			opensInNewTab: false,
-		} )
-	);
-}
-
 function NavigationPlaceholder( { onCreate }, ref ) {
 	const [ selectedMenu, setSelectedMenu ] = useState();
 
@@ -220,9 +197,9 @@ function NavigationPlaceholder( { onCreate }, ref ) {
 	};
 
 	const onCreateAllPages = () => {
-		const blocks = convertPagesToBlocks( pages );
+		const block = [ createBlock( 'core/page-list' ) ];
 		const selectNavigationBlock = true;
-		onCreate( blocks, selectNavigationBlock );
+		onCreate( block, selectNavigationBlock );
 	};
 
 	useEffect( () => {

packages/block-library/src/page-list/block.json

@@ -0,0 +1,20 @@
+{
+	"apiVersion": 2,
+	"name": "core/page-list",
+	"category": "widgets",
+	"usesContext": [
+		"textColor",
+		"customTextColor",
+		"backgroundColor",
+		"customBackgroundColor",
+		"fontSize",
+		"customFontSize",
+		"showSubmenuIcon"
+	],
+	"supports": {
+		"reusable": false,
+		"html": false
+	},
+	"editorStyle": "wp-block-page-list-editor",
+	"style": "wp-block-page-list"
+}

packages/block-library/src/page-list/edit.js

@@ -0,0 +1,31 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
+/**
+ * WordPress dependencies
+ */
+
+import { useBlockProps } from '@wordpress/block-editor';
+import ServerSideRender from '@wordpress/server-side-render';
+
+export default function PageListEdit( { context } ) {
+	const { textColor, backgroundColor, showSubmenuIcon } = context || {};
+
+	const blockProps = useBlockProps( {
+		className: classnames( {
+			'has-text-color': !! textColor,
+			[ `has-${ textColor }-color` ]: !! textColor,
+			'has-background': !! backgroundColor,
+			[ `has-${ backgroundColor }-background-color` ]: !! backgroundColor,
+			'show-submenu-icons': !! showSubmenuIcon,
+		} ),
+	} );
+
+	return (
+		<div { ...blockProps }>
+			<ServerSideRender block="core/page-list" />
+		</div>
+	);
+}

packages/block-library/src/page-list/editor.scss

@@ -0,0 +1,29 @@
+.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;
+	}
+	// Make the dropdown background white if there's no background color set.
+	&:not(.has-background) {
+		.submenu-container {
+			color: $gray-900;
+			background-color: $white;
+		}
+	}
+}
+
+// Make links unclickable in the editor
+.wp-block-pages-list__item__link {
+	pointer-events: none;
+}
+
+.wp-block-page-list .components-placeholder {
+	min-height: 0;
+	padding: 0;
+	background-color: inherit;
+
+	.components-spinner {
+		margin-top: 0;
+	}
+}

packages/block-library/src/page-list/index.js

@@ -0,0 +1,24 @@
+/**
+ * WordPress dependencies
+ */
+import { pages as icon } from '@wordpress/icons';
+import { __, _x } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import metadata from './block.json';
+import edit from './edit.js';
+
+const { name } = metadata;
+
+export { metadata, name };
+
+export const settings = {
+	title: _x( 'Page List', 'block title' ),
+	description: __( 'Display a list of all pages.' ),
+	keywords: [ __( 'menu' ), __( 'navigation' ) ],
+	icon,
+	example: {},
+	edit,
+};