default state for the menu (#17637)

* default state for the menu

* better ordering

* spinner for slow loading items

* memoized the pages getter

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

@@ -3,15 +3,18 @@
  */
 import {
 	Fragment,
+	useMemo,
 } from '@wordpress/element';
 import {
 	InnerBlocks,
 	InspectorControls,
 	BlockControls,
 } from '@wordpress/block-editor';
+import { withSelect } from '@wordpress/data';
 import {
 	CheckboxControl,
 	PanelBody,
+	Spinner,
 	Toolbar,
 } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
@@ -25,8 +28,23 @@ function NavigationMenu( {
 	attributes,
 	setAttributes,
 	clientId,
+	pages,
+	isRequesting,
 } ) {
 	const { navigatorToolbarButton, navigatorModal } = useBlockNavigator( clientId );
+	const defaultMenuItems = useMemo(
+		() => {
+			if ( ! pages ) {
+				return null;
+			}
+			return pages.map( ( page ) => {
+				return [ 'core/navigation-menu-item',
+					{ label: page.title.rendered, destination: page.permalink_template },
+				];
+			} );
+		},
+		[ pages ]
+	);
 
 	return (
 		<Fragment>
@@ -51,12 +69,31 @@ function NavigationMenu( {
 				</PanelBody>
 			</InspectorControls>
 			<div className="wp-block-navigation-menu">
-				<InnerBlocks
-					allowedBlocks={ [ 'core/navigation-menu-item' ] }
-				/>
+				{ isRequesting &&
+					<Spinner />
+				}
+				{ pages &&
+					<InnerBlocks
+						template={ defaultMenuItems ? defaultMenuItems : null }
+						allowedBlocks={ [ 'core/navigation-menu-item' ] }
+					/>
+				}
 			</div>
 		</Fragment>
 	);
 }
 
-export default NavigationMenu;
+export default withSelect( ( select ) => {
+	const { getEntityRecords } = select( 'core' );
+	const { isResolving } = select( 'core/data' );
+	const filterDefaultPages = {
+		parent: 0,
+		order: 'asc',
+		orderby: 'id',
+	};
+	return {
+		pages: getEntityRecords( 'postType', 'page', filterDefaultPages ),
+		isRequesting: isResolving( 'core', 'getEntityRecords', [ 'postType', 'page', filterDefaultPages ] ),
+	};
+} )( NavigationMenu );
+