@wordpress/edit-site 5.10.0 → 5.11.0

package/src/components/sidebar-navigation-screen-navigation-menu/index.js

@@ -0,0 +1,157 @@
+/**
+ * WordPress dependencies
+ */
+import { useEntityRecord } from '@wordpress/core-data';
+import {
+	__experimentalUseNavigator as useNavigator,
+	Spinner,
+} from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+import { useCallback, useMemo } from '@wordpress/element';
+import { useSelect } from '@wordpress/data';
+import { privateApis as routerPrivateApis } from '@wordpress/router';
+import { BlockEditorProvider } from '@wordpress/block-editor';
+import { createBlock } from '@wordpress/blocks';
+import { decodeEntities } from '@wordpress/html-entities';
+
+/**
+ * Internal dependencies
+ */
+import { unlock } from '../../private-apis';
+import { store as editSiteStore } from '../../store';
+import {
+	isPreviewingTheme,
+	currentlyPreviewingTheme,
+} from '../../utils/is-previewing-theme';
+import { SidebarNavigationScreenWrapper } from '../sidebar-navigation-screen-navigation-menus';
+import NavigationMenuContent from '../sidebar-navigation-screen-navigation-menus/navigation-menu-content';
+
+const { useHistory } = unlock( routerPrivateApis );
+const noop = () => {};
+
+export default function SidebarNavigationScreenNavigationMenu() {
+	const postType = `wp_navigation`;
+	const {
+		params: { postId },
+	} = useNavigator();
+
+	const { record: navigationMenu, isResolving: isLoading } = useEntityRecord(
+		'postType',
+		postType,
+		postId
+	);
+
+	const menuTitle = navigationMenu?.title?.rendered || navigationMenu?.slug;
+
+	if ( isLoading ) {
+		return (
+			<SidebarNavigationScreenWrapper
+				description={ __(
+					'Navigation menus are a curated collection of blocks that allow visitors to get around your site.'
+				) }
+			>
+				<Spinner className="edit-site-sidebar-navigation-screen-navigation-menus__loading" />
+			</SidebarNavigationScreenWrapper>
+		);
+	}
+
+	if ( ! isLoading && ! navigationMenu ) {
+		return (
+			<SidebarNavigationScreenWrapper
+				description={ __( 'Navigation Menu missing.' ) }
+			/>
+		);
+	}
+
+	if ( ! navigationMenu?.content?.raw ) {
+		return (
+			<SidebarNavigationScreenWrapper
+				title={ decodeEntities( menuTitle ) }
+				description={ __( 'This Navigation Menu is empty.' ) }
+			/>
+		);
+	}
+
+	return (
+		<SidebarNavigationScreenWrapper
+			title={ decodeEntities( menuTitle ) }
+			description={ __(
+				'Navigation menus are a curated collection of blocks that allow visitors to get around your site.'
+			) }
+		>
+			<NavigationMenuEditor navigationMenu={ navigationMenu } />
+		</SidebarNavigationScreenWrapper>
+	);
+}
+
+function NavigationMenuEditor( { navigationMenu } ) {
+	const history = useHistory();
+
+	const onSelect = useCallback(
+		( selectedBlock ) => {
+			const { attributes, name } = selectedBlock;
+			if (
+				attributes.kind === 'post-type' &&
+				attributes.id &&
+				attributes.type &&
+				history
+			) {
+				history.push( {
+					postType: attributes.type,
+					postId: attributes.id,
+					...( isPreviewingTheme() && {
+						theme_preview: currentlyPreviewingTheme(),
+					} ),
+				} );
+			}
+			if ( name === 'core/page-list-item' && attributes.id && history ) {
+				history.push( {
+					postType: 'page',
+					postId: attributes.id,
+					...( isPreviewingTheme() && {
+						theme_preview: currentlyPreviewingTheme(),
+					} ),
+				} );
+			}
+		},
+		[ history ]
+	);
+
+	const { storedSettings } = useSelect( ( select ) => {
+		const { getSettings } = unlock( select( editSiteStore ) );
+
+		return {
+			storedSettings: getSettings( false ),
+		};
+	}, [] );
+
+	const blocks = useMemo( () => {
+		if ( ! NavigationMenuEditor ) {
+			return [];
+		}
+
+		return [
+			createBlock( 'core/navigation', { ref: navigationMenu?.id } ),
+		];
+	}, [ navigationMenu ] );
+
+	if ( ! navigationMenu || ! blocks?.length ) {
+		return null;
+	}
+
+	return (
+		<BlockEditorProvider
+			settings={ storedSettings }
+			value={ blocks }
+			onChange={ noop }
+			onInput={ noop }
+		>
+			<div className="edit-site-sidebar-navigation-screen-navigation-menus__content">
+				<NavigationMenuContent
+					rootClientId={ blocks[ 0 ].clientId }
+					onSelect={ onSelect }
+				/>
+			</div>
+		</BlockEditorProvider>
+	);
+}

package/src/components/sidebar-navigation-screen-navigation-menus/constants.js

@@ -0,0 +1,9 @@
+// This requested is preloaded in `gutenberg_preload_navigation_posts`.
+// As unbounded queries are limited to 100 by `fetchAllMiddleware`
+// on apiFetch this query is limited to 100.
+export const PRELOADED_NAVIGATION_MENUS_QUERY = {
+	per_page: 100,
+	status: 'publish',
+	order: 'desc',
+	orderby: 'date',
+};

package/src/components/sidebar-navigation-screen-navigation-menus/index.js

@@ -2,143 +2,89 @@
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { useCallback, useMemo } from '@wordpress/element';
-import { useSelect } from '@wordpress/data';
-import { store as coreStore } from '@wordpress/core-data';
-import { BlockEditorProvider } from '@wordpress/block-editor';
-import { createBlock } from '@wordpress/blocks';
-import { privateApis as routerPrivateApis } from '@wordpress/router';
+import { useEntityRecords } from '@wordpress/core-data';
+
+import { decodeEntities } from '@wordpress/html-entities';
+import {
+	__experimentalItemGroup as ItemGroup,
+	Spinner,
+} from '@wordpress/components';
+import { navigation } from '@wordpress/icons';
 
 /**
  * Internal dependencies
  */
 import SidebarNavigationScreen from '../sidebar-navigation-screen';
-import NavigationMenuContent from './navigation-menu-content';
-import { NavigationMenuLoader } from './loader';
-import { unlock } from '../../private-apis';
-import { store as editSiteStore } from '../../store';
-import {
-	isPreviewingTheme,
-	currentlyPreviewingTheme,
-} from '../../utils/is-previewing-theme';
-
-const { useHistory } = unlock( routerPrivateApis );
-
-const noop = () => {};
-const NAVIGATION_MENUS_QUERY = {
-	per_page: 1,
-	status: 'publish',
-	order: 'desc',
-	orderby: 'date',
-};
-
-function SidebarNavigationScreenWrapper( { children, actions } ) {
-	return (
-		<SidebarNavigationScreen
-			title={ __( 'Navigation' ) }
-			actions={ actions }
-			description={ __(
-				'Browse your site, edit pages, and manage your primary navigation menu.'
-			) }
-			content={ children }
-		/>
-	);
-}
+import SidebarNavigationItem from '../sidebar-navigation-item';
+import { PRELOADED_NAVIGATION_MENUS_QUERY } from './constants';
+import { useLink } from '../routes/link';
 
 export default function SidebarNavigationScreenNavigationMenus() {
-	const history = useHistory();
-	const { navigationMenus, hasResolvedNavigationMenus, storedSettings } =
-		useSelect( ( select ) => {
-			const { getSettings } = unlock( select( editSiteStore ) );
-			const { getEntityRecords, hasFinishedResolution } =
-				select( coreStore );
-
-			const navigationMenusQuery = [
-				'postType',
-				'wp_navigation',
-				NAVIGATION_MENUS_QUERY,
-			];
-			return {
-				storedSettings: getSettings( false ),
-				navigationMenus: getEntityRecords( ...navigationMenusQuery ),
-				hasResolvedNavigationMenus: hasFinishedResolution(
-					'getEntityRecords',
-					navigationMenusQuery
-				),
-			};
-		}, [] );
-
-	const firstNavigationMenu = navigationMenus?.[ 0 ]?.id;
-	const blocks = useMemo( () => {
-		return [
-			createBlock( 'core/navigation', { ref: firstNavigationMenu } ),
-		];
-	}, [ firstNavigationMenu ] );
+	const { records: navigationMenus, isResolving: isLoading } =
+		useEntityRecords(
+			'postType',
+			`wp_navigation`,
+			PRELOADED_NAVIGATION_MENUS_QUERY
+		);
 
-	const isLoading = ! hasResolvedNavigationMenus;
 	const hasNavigationMenus = !! navigationMenus?.length;
 
-	const onSelect = useCallback(
-		( selectedBlock ) => {
-			const { attributes, name } = selectedBlock;
-			if (
-				attributes.kind === 'post-type' &&
-				attributes.id &&
-				attributes.type &&
-				history
-			) {
-				history.push( {
-					postType: attributes.type,
-					postId: attributes.id,
-					...( isPreviewingTheme() && {
-						theme_preview: currentlyPreviewingTheme(),
-					} ),
-				} );
-			}
-			if ( name === 'core/page-list-item' && attributes.id && history ) {
-				history.push( {
-					postType: 'page',
-					postId: attributes.id,
-					...( isPreviewingTheme() && {
-						theme_preview: currentlyPreviewingTheme(),
-					} ),
-				} );
-			}
-		},
-		[ history ]
-	);
-
-	if ( hasResolvedNavigationMenus && ! hasNavigationMenus ) {
+	if ( isLoading ) {
 		return (
 			<SidebarNavigationScreenWrapper>
-				{ __( 'There are no Navigation Menus.' ) }
+				<Spinner className="edit-site-sidebar-navigation-screen-navigation-menus__loading" />
 			</SidebarNavigationScreenWrapper>
 		);
 	}
 
-	if ( ! hasResolvedNavigationMenus || isLoading ) {
+	if ( ! isLoading && ! hasNavigationMenus ) {
 		return (
-			<SidebarNavigationScreenWrapper>
-				<NavigationMenuLoader />
-			</SidebarNavigationScreenWrapper>
+			<SidebarNavigationScreenWrapper
+				description={ __( 'No Navigation Menus found.' ) }
+			/>
 		);
 	}
 
 	return (
-		<BlockEditorProvider
-			settings={ storedSettings }
-			value={ blocks }
-			onChange={ noop }
-			onInput={ noop }
-		>
-			<SidebarNavigationScreenWrapper>
-				<div className="edit-site-sidebar-navigation-screen-navigation-menus__content">
-					<NavigationMenuContent
-						rootClientId={ blocks[ 0 ].clientId }
-						onSelect={ onSelect }
-					/>
-				</div>
-			</SidebarNavigationScreenWrapper>
-		</BlockEditorProvider>
+		<SidebarNavigationScreenWrapper>
+			<ItemGroup>
+				{ navigationMenus?.map( ( navMenu ) => (
+					<NavMenuItem
+						postId={ navMenu.id }
+						key={ navMenu.id }
+						withChevron
+						icon={ navigation }
+					>
+						{ decodeEntities(
+							navMenu.title?.rendered || navMenu.slug
+						) }
+					</NavMenuItem>
+				) ) }
+			</ItemGroup>
+		</SidebarNavigationScreenWrapper>
+	);
+}
+
+export function SidebarNavigationScreenWrapper( {
+	children,
+	actions,
+	title,
+	description,
+} ) {
+	return (
+		<SidebarNavigationScreen
+			title={ title || __( 'Navigation' ) }
+			actions={ actions }
+			description={ description || __( 'Manage your Navigation menus.' ) }
+			content={ children }
+		/>
 	);
 }
+
+const NavMenuItem = ( { postId, ...props } ) => {
+	const linkInfo = useLink( {
+		postId,
+		postType: 'wp_navigation',
+	} );
+	return <SidebarNavigationItem { ...linkInfo } { ...props } />;
+};

package/src/components/sidebar-navigation-screen-navigation-menus/leaf-more-menu.js

@@ -0,0 +1,83 @@
+/**
+ * WordPress dependencies
+ */
+
+import { chevronUp, chevronDown, moreVertical } from '@wordpress/icons';
+import { DropdownMenu, MenuItem, MenuGroup } from '@wordpress/components';
+import { useDispatch, useSelect } from '@wordpress/data';
+import { __, sprintf } from '@wordpress/i18n';
+import { BlockTitle, store as blockEditorStore } from '@wordpress/block-editor';
+
+const POPOVER_PROPS = {
+	className: 'block-editor-block-settings-menu__popover',
+	position: 'bottom right',
+	variant: 'toolbar',
+};
+
+export default function LeafMoreMenu( props ) {
+	const { block } = props;
+	const { clientId } = block;
+	const { moveBlocksDown, moveBlocksUp, removeBlocks } =
+		useDispatch( blockEditorStore );
+
+	const removeLabel = sprintf(
+		/* translators: %s: block name */
+		__( 'Remove %s' ),
+		BlockTitle( { clientId, maximumLength: 25 } )
+	);
+
+	const rootClientId = useSelect(
+		( select ) => {
+			const { getBlockRootClientId } = select( blockEditorStore );
+
+			return getBlockRootClientId( clientId );
+		},
+		[ clientId ]
+	);
+
+	return (
+		<DropdownMenu
+			icon={ moreVertical }
+			label={ __( 'Options' ) }
+			className="block-editor-block-settings-menu"
+			popoverProps={ POPOVER_PROPS }
+			noIcons
+			{ ...props }
+		>
+			{ ( { onClose } ) => (
+				<>
+					<MenuGroup>
+						<MenuItem
+							icon={ chevronUp }
+							onClick={ () => {
+								moveBlocksUp( [ clientId ], rootClientId );
+								onClose();
+							} }
+						>
+							{ __( 'Move up' ) }
+						</MenuItem>
+						<MenuItem
+							icon={ chevronDown }
+							onClick={ () => {
+								moveBlocksDown( [ clientId ], rootClientId );
+								onClose();
+							} }
+						>
+							{ __( 'Move down' ) }
+						</MenuItem>
+					</MenuGroup>
+					<MenuGroup>
+						<MenuItem
+							onClick={ () => {
+								removeBlocks( [ clientId ], false );
+								onClose();
+							} }
+						>
+							{ removeLabel }
+						</MenuItem>
+					</MenuGroup>
+				</>
+			) }
+		</DropdownMenu>
+	);
+}

package/src/components/sidebar-navigation-screen-navigation-menus/navigation-menu-content.js

@@ -6,12 +6,10 @@ import {
 	store as blockEditorStore,
 	BlockList,
 	BlockTools,
-	__experimentalLinkControl as LinkControl,
 } from '@wordpress/block-editor';
 import { useDispatch, useSelect } from '@wordpress/data';
 import { createBlock } from '@wordpress/blocks';
-import { Popover } from '@wordpress/components';
-import { __unstableStripHTML as stripHTML } from '@wordpress/dom';
+import { VisuallyHidden } from '@wordpress/components';
 import { useCallback, useEffect, useState } from '@wordpress/element';
 import { store as coreStore } from '@wordpress/core-data';
 
@@ -19,35 +17,8 @@ import { store as coreStore } from '@wordpress/core-data';
  * Internal dependencies
  */
 import { unlock } from '../../private-apis';
-import { NavigationMenuLoader } from './loader';
+import LeafMoreMenu from './leaf-more-menu';
 
-function CustomLinkAdditionalBlockUI( { block, onClose } ) {
-	const { updateBlockAttributes } = useDispatch( blockEditorStore );
-	const { label, url, opensInNewTab } = block.attributes;
-	const link = {
-		url,
-		opensInNewTab,
-		title: label && stripHTML( label ),
-	};
-	return (
-		<Popover placement="bottom" shift onClose={ onClose }>
-			<LinkControl
-				hasTextControl
-				hasRichPreviews
-				value={ link }
-				onChange={ ( updatedValue ) => {
-					updateBlockAttributes( block.clientId, {
-						label: updatedValue.title,
-						url: updatedValue.url,
-						opensInNewTab: updatedValue.opensInNewTab,
-					} );
-					onClose();
-				} }
-				onCancel={ onClose }
-			/>
-		</Popover>
-	);
-}
 // Needs to be kept in sync with the query used at packages/block-library/src/page-list/edit.js.
 const MAX_PAGE_COUNT = 100;
 const PAGES_QUERY = [
@@ -102,29 +73,6 @@ export default function NavigationMenuContent( { rootClientId, onSelect } ) {
 	const { replaceBlock, __unstableMarkNextChangeAsNotPersistent } =
 		useDispatch( blockEditorStore );
 
-	const [ customLinkEditPopoverOpenId, setIsCustomLinkEditPopoverOpenId ] =
-		useState( false );
-
-	const renderAdditionalBlockUICallback = useCallback(
-		( block ) => {
-			if (
-				customLinkEditPopoverOpenId &&
-				block.clientId === customLinkEditPopoverOpenId
-			) {
-				return (
-					<CustomLinkAdditionalBlockUI
-						block={ block }
-						onClose={ () => {
-							setIsCustomLinkEditPopoverOpenId( false );
-						} }
-					/>
-				);
-			}
-			return null;
-		},
-		[ customLinkEditPopoverOpenId, setIsCustomLinkEditPopoverOpenId ]
-	);
-
 	// Delay loading stop by 50ms to avoid flickering.
 	useEffect( () => {
 		let timeoutId;
@@ -144,8 +92,7 @@ export default function NavigationMenuContent( { rootClientId, onSelect } ) {
 		};
 	}, [ shouldKeepLoading, clientIdsTree, isLoading ] );
 
-	const { PrivateListView, LeafMoreMenu } = unlock( blockEditorPrivateApis );
-
+	const { PrivateListView } = unlock( blockEditorPrivateApis );
 	const offCanvasOnselect = useCallback(
 		( block ) => {
 			if (
@@ -157,29 +104,17 @@ export default function NavigationMenuContent( { rootClientId, onSelect } ) {
 					block.clientId,
 					createBlock( 'core/navigation-link', block.attributes )
 				);
-			} else if (
-				block.name === 'core/navigation-link' &&
-				block.attributes.kind === 'custom' &&
-				block.attributes.url
-			) {
-				setIsCustomLinkEditPopoverOpenId( block.clientId );
 			} else {
 				onSelect( block );
 			}
 		},
-		[
-			onSelect,
-			__unstableMarkNextChangeAsNotPersistent,
-			replaceBlock,
-			setIsCustomLinkEditPopoverOpenId,
-		]
+		[ onSelect, __unstableMarkNextChangeAsNotPersistent, replaceBlock ]
 	);
 
 	// The hidden block is needed because it makes block edit side effects trigger.
 	// For example a navigation page list load its items has an effect on edit to load its items.
 	return (
 		<>
-			{ isLoading && <NavigationMenuLoader /> }
 			{ ! isLoading && (
 				<PrivateListView
 					blocks={
@@ -190,14 +125,13 @@ export default function NavigationMenuContent( { rootClientId, onSelect } ) {
 					onSelect={ offCanvasOnselect }
 					blockSettingsMenu={ LeafMoreMenu }
 					showAppender={ false }
-					renderAdditionalBlockUI={ renderAdditionalBlockUICallback }
 				/>
 			) }
-			<div style={ { visibility: 'hidden' } }>
+			<VisuallyHidden aria-hidden="true">
 				<BlockTools>
 					<BlockList />
 				</BlockTools>
-			</div>
+			</VisuallyHidden>
 		</>
 	);
 }

package/src/components/sidebar-navigation-screen-navigation-menus/navigator-button.js

@@ -0,0 +1,47 @@
+/**
+ * WordPress dependencies
+ */
+
+import { __experimentalNavigatorButton as NavigatorButton } from '@wordpress/components';
+import { useEntityRecords } from '@wordpress/core-data';
+
+/**
+ * Internal dependencies
+ */
+import { PRELOADED_NAVIGATION_MENUS_QUERY } from './constants';
+
+export default function SidebarNavigationScreenNavigationMenuButton( {
+	children,
+	...props
+} ) {
+	const { records: navigationMenus, isResolving: isLoading } =
+		useEntityRecords(
+			'postType',
+			`wp_navigation`,
+			PRELOADED_NAVIGATION_MENUS_QUERY
+		);
+
+	const hasNavigationMenus = !! navigationMenus?.length;
+	const hasSingleNavigationMenu = navigationMenus?.length === 1;
+	const firstNavigationMenu = navigationMenus?.[ 0 ];
+
+	const showNavigationScreen = process.env.IS_GUTENBERG_PLUGIN
+		? hasNavigationMenus
+		: false;
+
+	// If there is a single menu then we can go directly to that menu.
+	// Otherwise we go to the navigation listing screen.
+	const path = hasSingleNavigationMenu
+		? `/navigation/wp_navigation/${ firstNavigationMenu?.id }`
+		: '/navigation';
+
+	if ( ! showNavigationScreen ) {
+		return null;
+	}
+
+	return (
+		<NavigatorButton { ...props } disabled={ isLoading } path={ path }>
+			{ children }
+		</NavigatorButton>
+	);
+}

package/src/components/sidebar-navigation-screen-navigation-menus/style.scss

@@ -2,26 +2,6 @@
 	margin: 0 0 $grid-unit-40 $grid-unit-20;
 }
 
-.edit-site-sidebar-navigation-screen-navigation-menus__placeholder {
-	padding: $grid-unit-10;
-	margin: $grid-unit-10;
-	background-color: $gray-100;
-	animation: loadingpulse 1s linear infinite;
-	animation-delay: 0.5s; // avoid animating for fast network responses
-}
-
-@keyframes loadingpulse {
-	0% {
-		opacity: 1;
-	}
-	50% {
-		opacity: 0.5;
-	}
-	100% {
-		opacity: 1;
-	}
-}
-
 .edit-site-sidebar-navigation-screen-navigation-menus__content {
 	.offcanvas-editor-list-view-leaf {
 		max-width: calc(100% - #{ $grid-unit-05 });
@@ -113,3 +93,9 @@
 .edit-site-sidebar-navigation-screen-navigation-menus__content .popover-slot .wp-block-navigation-submenu {
 	display: none;
 }
+
+.edit-site-sidebar-navigation-screen-navigation-menus__loading.components-spinner {
+	margin-left: auto;
+	margin-right: auto;
+	display: block;
+}