@wordpress/edit-site 5.11.0 → 5.12.1

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

@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { __ } from '@wordpress/i18n';
+import { __, sprintf } from '@wordpress/i18n';
 import { useEntityRecords } from '@wordpress/core-data';
 
 import { decodeEntities } from '@wordpress/html-entities';
@@ -18,6 +18,27 @@ import SidebarNavigationScreen from '../sidebar-navigation-screen';
 import SidebarNavigationItem from '../sidebar-navigation-item';
 import { PRELOADED_NAVIGATION_MENUS_QUERY } from './constants';
 import { useLink } from '../routes/link';
+import SingleNavigationMenu from '../sidebar-navigation-screen-navigation-menu/single-navigation-menu';
+import useNavigationMenuHandlers from '../sidebar-navigation-screen-navigation-menu/use-navigation-menu-handlers';
+
+// Copied from packages/block-library/src/navigation/edit/navigation-menu-selector.js.
+function buildMenuLabel( title, id, status ) {
+	if ( ! title?.rendered ) {
+		/* translators: %s is the index of the menu in the list of menus. */
+		return sprintf( __( '(no title %s)' ), id );
+	}
+
+	if ( status === 'publish' ) {
+		return decodeEntities( title?.rendered );
+	}
+
+	return sprintf(
+		// translators: %1s: title of the menu; %2s: status of the menu (draft, pending, etc.).
+		__( '%1$s (%2$s)' ),
+		decodeEntities( title?.rendered ),
+		status
+	);
+}
 
 export default function SidebarNavigationScreenNavigationMenus() {
 	const { records: navigationMenus, isResolving: isLoading } =
@@ -27,6 +48,11 @@ export default function SidebarNavigationScreenNavigationMenus() {
 			PRELOADED_NAVIGATION_MENUS_QUERY
 		);
 
+	const firstNavigationMenu = navigationMenus?.[ 0 ];
+
+	const { handleSave, handleDelete, handleDuplicate } =
+		useNavigationMenuHandlers();
+
 	const hasNavigationMenus = !! navigationMenus?.length;
 
 	if ( isLoading ) {
@@ -45,19 +71,29 @@ export default function SidebarNavigationScreenNavigationMenus() {
 		);
 	}
 
+	// if single menu then render it
+	if ( navigationMenus?.length === 1 ) {
+		return (
+			<SingleNavigationMenu
+				navigationMenu={ firstNavigationMenu }
+				handleDelete={ () => handleDelete( firstNavigationMenu ) }
+				handleDuplicate={ () => handleDuplicate( firstNavigationMenu ) }
+				handleSave={ () => handleSave( firstNavigationMenu ) }
+			/>
+		);
+	}
+
 	return (
 		<SidebarNavigationScreenWrapper>
 			<ItemGroup>
-				{ navigationMenus?.map( ( navMenu ) => (
+				{ navigationMenus?.map( ( { id, title, status }, index ) => (
 					<NavMenuItem
-						postId={ navMenu.id }
-						key={ navMenu.id }
+						postId={ id }
+						key={ id }
 						withChevron
 						icon={ navigation }
 					>
-						{ decodeEntities(
-							navMenu.title?.rendered || navMenu.slug
-						) }
+						{ buildMenuLabel( title, index + 1, status ) }
 					</NavMenuItem>
 				) ) }
 			</ItemGroup>

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

@@ -5,16 +5,29 @@
 import { chevronUp, chevronDown, moreVertical } from '@wordpress/icons';
 import { DropdownMenu, MenuItem, MenuGroup } from '@wordpress/components';
 import { useDispatch, useSelect } from '@wordpress/data';
+import { useCallback } from '@wordpress/element';
 import { __, sprintf } from '@wordpress/i18n';
 import { BlockTitle, store as blockEditorStore } from '@wordpress/block-editor';
+import { privateApis as routerPrivateApis } from '@wordpress/router';
 
 const POPOVER_PROPS = {
 	className: 'block-editor-block-settings-menu__popover',
-	position: 'bottom right',
-	variant: 'toolbar',
+	placement: 'bottom-start',
 };
 
+/**
+ * Internal dependencies
+ */
+import {
+	isPreviewingTheme,
+	currentlyPreviewingTheme,
+} from '../../utils/is-previewing-theme';
+import { unlock } from '../../lock-unlock';
+
+const { useHistory } = unlock( routerPrivateApis );
+
 export default function LeafMoreMenu( props ) {
+	const history = useHistory();
 	const { block } = props;
 	const { clientId } = block;
 	const { moveBlocksDown, moveBlocksUp, removeBlocks } =
@@ -26,6 +39,12 @@ export default function LeafMoreMenu( props ) {
 		BlockTitle( { clientId, maximumLength: 25 } )
 	);
 
+	const goToLabel = sprintf(
+		/* translators: %s: block name */
+		__( 'Go to %s' ),
+		BlockTitle( { clientId, maximumLength: 25 } )
+	);
+
 	const rootClientId = useSelect(
 		( select ) => {
 			const { getBlockRootClientId } = select( blockEditorStore );
@@ -35,6 +54,36 @@ export default function LeafMoreMenu( props ) {
 		[ clientId ]
 	);
 
+	const onGoToPage = 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() && {
+						wp_theme_preview: currentlyPreviewingTheme(),
+					} ),
+				} );
+			}
+			if ( name === 'core/page-list-item' && attributes.id && history ) {
+				history.push( {
+					postType: 'page',
+					postId: attributes.id,
+					...( isPreviewingTheme() && {
+						wp_theme_preview: currentlyPreviewingTheme(),
+					} ),
+				} );
+			}
+		},
+		[ history ]
+	);
+
 	return (
 		<DropdownMenu
 			icon={ moreVertical }
@@ -65,6 +114,16 @@ export default function LeafMoreMenu( props ) {
 						>
 							{ __( 'Move down' ) }
 						</MenuItem>
+						{ block.attributes?.id && (
+							<MenuItem
+								onClick={ () => {
+									onGoToPage( block );
+									onClose();
+								} }
+							>
+								{ goToLabel }
+							</MenuItem>
+						) }
 					</MenuGroup>
 					<MenuGroup>
 						<MenuItem

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

@@ -9,16 +9,17 @@ import {
 } from '@wordpress/block-editor';
 import { useDispatch, useSelect } from '@wordpress/data';
 import { createBlock } from '@wordpress/blocks';
-import { VisuallyHidden } from '@wordpress/components';
-import { useCallback, useEffect, useState } from '@wordpress/element';
+import { useCallback } from '@wordpress/element';
 import { store as coreStore } from '@wordpress/core-data';
 
 /**
  * Internal dependencies
  */
-import { unlock } from '../../private-apis';
+import { unlock } from '../../lock-unlock';
 import LeafMoreMenu from './leaf-more-menu';
 
+const { PrivateListView } = unlock( blockEditorPrivateApis );
+
 // 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 = [
@@ -35,37 +36,40 @@ const PAGES_QUERY = [
 	},
 ];
 
-export default function NavigationMenuContent( { rootClientId, onSelect } ) {
-	const [ isLoading, setIsLoading ] = useState( true );
-	const { clientIdsTree, shouldKeepLoading, isSinglePageList } = useSelect(
+export default function NavigationMenuContent( { rootClientId } ) {
+	const { listViewRootClientId, isLoading } = useSelect(
 		( select ) => {
 			const {
-				__unstableGetClientIdsTree,
 				areInnerBlocksControlled,
 				getBlockName,
+				getBlockCount,
+				getBlockOrder,
 			} = select( blockEditorStore );
 			const { isResolving } = select( coreStore );
 
-			const _clientIdsTree = __unstableGetClientIdsTree( rootClientId );
+			const blockClientIds = getBlockOrder( rootClientId );
+
 			const hasOnlyPageListBlock =
-				_clientIdsTree.length === 1 &&
-				getBlockName( _clientIdsTree[ 0 ].clientId ) ===
-					'core/page-list';
+				blockClientIds.length === 1 &&
+				getBlockName( blockClientIds[ 0 ] ) === 'core/page-list';
+			const pageListHasBlocks =
+				hasOnlyPageListBlock &&
+				getBlockCount( blockClientIds[ 0 ] ) > 0;
+
 			const isLoadingPages = isResolving(
 				'getEntityRecords',
 				PAGES_QUERY
 			);
+
 			return {
-				clientIdsTree: _clientIdsTree,
+				listViewRootClientId: pageListHasBlocks
+					? blockClientIds[ 0 ]
+					: rootClientId,
 				// This is a small hack to wait for the navigation block
 				// to actually load its inner blocks.
-				shouldKeepLoading:
+				isLoading:
 					! areInnerBlocksControlled( rootClientId ) ||
 					isLoadingPages,
-				isSinglePageList:
-					hasOnlyPageListBlock &&
-					! isLoadingPages &&
-					_clientIdsTree[ 0 ].innerBlocks.length > 0,
 			};
 		},
 		[ rootClientId ]
@@ -73,26 +77,6 @@ export default function NavigationMenuContent( { rootClientId, onSelect } ) {
 	const { replaceBlock, __unstableMarkNextChangeAsNotPersistent } =
 		useDispatch( blockEditorStore );
 
-	// Delay loading stop by 50ms to avoid flickering.
-	useEffect( () => {
-		let timeoutId;
-		if ( shouldKeepLoading && ! isLoading ) {
-			setIsLoading( true );
-		}
-		if ( ! shouldKeepLoading && isLoading ) {
-			timeoutId = setTimeout( () => {
-				setIsLoading( false );
-				timeoutId = undefined;
-			}, 50 );
-		}
-		return () => {
-			if ( timeoutId ) {
-				clearTimeout( timeoutId );
-			}
-		};
-	}, [ shouldKeepLoading, clientIdsTree, isLoading ] );
-
-	const { PrivateListView } = unlock( blockEditorPrivateApis );
 	const offCanvasOnselect = useCallback(
 		( block ) => {
 			if (
@@ -104,11 +88,9 @@ export default function NavigationMenuContent( { rootClientId, onSelect } ) {
 					block.clientId,
 					createBlock( 'core/navigation-link', block.attributes )
 				);
-			} else {
-				onSelect( block );
 			}
 		},
-		[ onSelect, __unstableMarkNextChangeAsNotPersistent, replaceBlock ]
+		[ __unstableMarkNextChangeAsNotPersistent, replaceBlock ]
 	);
 
 	// The hidden block is needed because it makes block edit side effects trigger.
@@ -117,21 +99,17 @@ export default function NavigationMenuContent( { rootClientId, onSelect } ) {
 		<>
 			{ ! isLoading && (
 				<PrivateListView
-					blocks={
-						isSinglePageList
-							? clientIdsTree[ 0 ].innerBlocks
-							: clientIdsTree
-					}
+					rootClientId={ listViewRootClientId }
 					onSelect={ offCanvasOnselect }
 					blockSettingsMenu={ LeafMoreMenu }
 					showAppender={ false }
 				/>
 			) }
-			<VisuallyHidden aria-hidden="true">
+			<div className="edit-site-sidebar-navigation-screen-navigation-menus__helper-block-editor">
 				<BlockTools>
 					<BlockList />
 				</BlockTools>
-			</VisuallyHidden>
+			</div>
 		</>
 	);
 }

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

@@ -1,5 +1,5 @@
 .edit-site-sidebar-navigation-screen__description {
-	margin: 0 0 $grid-unit-40 $grid-unit-20;
+	margin: 0 0 $grid-unit-40 0;
 }
 
 .edit-site-sidebar-navigation-screen-navigation-menus__content {
@@ -99,3 +99,7 @@
 	margin-right: auto;
 	display: block;
 }
+
+.edit-site-sidebar-navigation-screen-navigation-menus__helper-block-editor {
+	display: none;
+}

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

@@ -2,58 +2,132 @@
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { useDispatch } from '@wordpress/data';
+import { useDispatch, useSelect } from '@wordpress/data';
 import {
 	__experimentalUseNavigator as useNavigator,
+	__experimentalVStack as VStack,
 	ExternalLink,
+	__experimentalTruncate as Truncate,
 } from '@wordpress/components';
-import { useEntityRecord } from '@wordpress/core-data';
+import { store as coreStore, useEntityRecord } from '@wordpress/core-data';
 import { decodeEntities } from '@wordpress/html-entities';
 import { pencil } from '@wordpress/icons';
+import { __unstableStripHTML as stripHTML } from '@wordpress/dom';
+import { escapeAttribute } from '@wordpress/escape-html';
+import { safeDecodeURIComponent, filterURLForDisplay } from '@wordpress/url';
 
 /**
  * Internal dependencies
  */
 import SidebarNavigationScreen from '../sidebar-navigation-screen';
-import { unlock } from '../../private-apis';
+import { unlock } from '../../lock-unlock';
 import { store as editSiteStore } from '../../store';
 import SidebarButton from '../sidebar-button';
+import PageDetails from './page-details';
+import PageActions from '../page-actions';
+import SidebarNavigationScreenDetailsFooter from '../sidebar-navigation-screen-details-footer';
 
 export default function SidebarNavigationScreenPage() {
+	const navigator = useNavigator();
 	const { setCanvasMode } = unlock( useDispatch( editSiteStore ) );
 	const {
 		params: { postId },
 	} = useNavigator();
 	const { record } = useEntityRecord( 'postType', 'page', postId );
 
-	return (
+	const { featuredMediaAltText, featuredMediaSourceUrl } = useSelect(
+		( select ) => {
+			const { getEntityRecord } = select( coreStore );
+			// Featured image.
+			const attachedMedia = record?.featured_media
+				? getEntityRecord(
+						'postType',
+						'attachment',
+						record?.featured_media
+				  )
+				: null;
+
+			return {
+				featuredMediaSourceUrl:
+					attachedMedia?.media_details.sizes?.medium?.source_url ||
+					attachedMedia?.source_url,
+				featuredMediaAltText: escapeAttribute(
+					attachedMedia?.alt_text ||
+						attachedMedia?.description?.raw ||
+						''
+				),
+			};
+		},
+		[ record ]
+	);
+
+	const featureImageAltText = featuredMediaAltText
+		? decodeEntities( featuredMediaAltText )
+		: decodeEntities( record?.title?.rendered || __( 'Featured image' ) );
+
+	return record ? (
 		<SidebarNavigationScreen
-			title={ record ? decodeEntities( record?.title?.rendered ) : null }
+			title={ decodeEntities(
+				record?.title?.rendered || __( '(no title)' )
+			) }
 			actions={
-				<SidebarButton
-					onClick={ () => setCanvasMode( 'edit' ) }
-					label={ __( 'Edit' ) }
-					icon={ pencil }
-				/>
+				<>
+					<PageActions
+						postId={ postId }
+						toggleProps={ { as: SidebarButton } }
+						onRemove={ () => {
+							navigator.goTo( '/page' );
+						} }
+					/>
+					<SidebarButton
+						onClick={ () => setCanvasMode( 'edit' ) }
+						label={ __( 'Edit' ) }
+						icon={ pencil }
+					/>
+				</>
+			}
+			meta={
+				<ExternalLink
+					className="edit-site-sidebar-navigation-screen__page-link"
+					href={ record.link }
+				>
+					{ filterURLForDisplay(
+						safeDecodeURIComponent( record.link )
+					) }
+				</ExternalLink>
 			}
-			description={ __(
-				'Pages are static and are not listed by date. Pages do not use tags or categories.'
-			) }
 			content={
 				<>
-					{ record?.link ? (
-						<ExternalLink
-							className="edit-site-sidebar-navigation-screen__page-link"
-							href={ record.link }
+					{ !! featuredMediaSourceUrl && (
+						<VStack
+							className="edit-site-sidebar-navigation-screen-page__featured-image-wrapper"
+							alignment="left"
+							spacing={ 2 }
+						>
+							<div className="edit-site-sidebar-navigation-screen-page__featured-image has-image">
+								<img
+									alt={ featureImageAltText }
+									src={ featuredMediaSourceUrl }
+								/>
+							</div>
+						</VStack>
+					) }
+					{ !! record?.excerpt?.rendered && (
+						<Truncate
+							className="edit-site-sidebar-navigation-screen-page__excerpt"
+							numberOfLines={ 3 }
 						>
-							{ record.link }
-						</ExternalLink>
-					) : null }
-					{ record
-						? decodeEntities( record?.description?.rendered )
-						: null }
+							{ stripHTML( record.excerpt.rendered ) }
+						</Truncate>
+					) }
+					<PageDetails id={ postId } />
 				</>
 			}
+			footer={
+				<SidebarNavigationScreenDetailsFooter
+					lastModifiedDateTime={ record?.modified }
+				/>
+			}
 		/>
-	);
+	) : null;
 }

package/src/components/sidebar-navigation-screen-page/page-details.js

@@ -0,0 +1,166 @@
+/**
+ * WordPress dependencies
+ */
+import { __, _x, sprintf } from '@wordpress/i18n';
+import { __experimentalTruncate as Truncate } from '@wordpress/components';
+import { count as wordCount } from '@wordpress/wordcount';
+import { useSelect } from '@wordpress/data';
+import { decodeEntities } from '@wordpress/html-entities';
+import { store as coreStore, useEntityRecord } from '@wordpress/core-data';
+import { safeDecodeURIComponent } from '@wordpress/url';
+
+/**
+ * Internal dependencies
+ */
+import StatusLabel from './status-label';
+import { unlock } from '../../lock-unlock';
+import { store as editSiteStore } from '../../store';
+import {
+	SidebarNavigationScreenDetailsPanel,
+	SidebarNavigationScreenDetailsPanelRow,
+	SidebarNavigationScreenDetailsPanelLabel,
+	SidebarNavigationScreenDetailsPanelValue,
+} from '../sidebar-navigation-screen-details-panel';
+
+// Taken from packages/editor/src/components/time-to-read/index.js.
+const AVERAGE_READING_RATE = 189;
+
+function getPageDetails( page ) {
+	if ( ! page ) {
+		return [];
+	}
+
+	const details = [
+		{
+			label: __( 'Status' ),
+			value: (
+				<StatusLabel
+					status={ page?.password ? 'protected' : page.status }
+					date={ page?.date }
+					short
+				/>
+			),
+		},
+		{
+			label: __( 'Slug' ),
+			value: (
+				<Truncate numberOfLines={ 1 }>
+					{ safeDecodeURIComponent( page.slug ) }
+				</Truncate>
+			),
+		},
+	];
+
+	if ( page?.templateTitle ) {
+		details.push( {
+			label: __( 'Template' ),
+			value: decodeEntities( page.templateTitle ),
+		} );
+	}
+
+	if ( page?.parentTitle ) {
+		details.push( {
+			label: __( 'Parent' ),
+			value: decodeEntities( page.parentTitle || __( '(no title)' ) ),
+		} );
+	}
+
+	/*
+	 * translators: If your word count is based on single characters (e.g. East Asian characters),
+	 * enter 'characters_excluding_spaces' or 'characters_including_spaces'. Otherwise, enter 'words'.
+	 * Do not translate into your own language.
+	 */
+	const wordCountType = _x( 'words', 'Word count type. Do not translate!' );
+	const wordsCounted = page?.content?.rendered
+		? wordCount( page.content.rendered, wordCountType )
+		: 0;
+	const readingTime = Math.round( wordsCounted / AVERAGE_READING_RATE );
+
+	if ( wordsCounted ) {
+		details.push(
+			{
+				label: __( 'Words' ),
+				value: wordsCounted.toLocaleString() || __( 'Unknown' ),
+			},
+			{
+				label: __( 'Time to read' ),
+				value:
+					readingTime > 1
+						? sprintf(
+								/* translators: %s: is the number of minutes. */
+								__( '%s mins' ),
+								readingTime.toLocaleString()
+						  )
+						: __( '< 1 min' ),
+			}
+		);
+	}
+	return details;
+}
+
+export default function PageDetails( { id } ) {
+	const { record } = useEntityRecord( 'postType', 'page', id );
+	const { parentTitle, templateTitle } = useSelect(
+		( select ) => {
+			const { getEditedPostContext } = unlock( select( editSiteStore ) );
+			const postContext = getEditedPostContext();
+			const templates = select( coreStore ).getEntityRecords(
+				'postType',
+				'wp_template',
+				{ per_page: -1 }
+			);
+			// Template title.
+			const templateSlug =
+				// Checks that the post type matches the current theme's post type, otherwise
+				// the templateSlug returns 'home'.
+				postContext?.postType === 'page'
+					? postContext?.templateSlug
+					: null;
+			const _templateTitle =
+				templates && templateSlug
+					? templates.find(
+							( template ) => template.slug === templateSlug
+					  )?.title?.rendered
+					: null;
+
+			// Parent page title.
+			const _parentTitle = record?.parent
+				? select( coreStore ).getEntityRecord(
+						'postType',
+						'page',
+						record.parent,
+						{
+							_fields: [ 'title' ],
+						}
+				  )?.title?.rendered
+				: null;
+
+			return {
+				parentTitle: _parentTitle,
+				templateTitle: _templateTitle,
+			};
+		},
+		[ record?.parent ]
+	);
+	return (
+		<SidebarNavigationScreenDetailsPanel
+			spacing={ 5 }
+			title={ __( 'Details' ) }
+		>
+			{ getPageDetails( {
+				parentTitle,
+				templateTitle,
+				...record,
+			} ).map( ( { label, value } ) => (
+				<SidebarNavigationScreenDetailsPanelRow key={ label }>
+					<SidebarNavigationScreenDetailsPanelLabel>
+						{ label }
+					</SidebarNavigationScreenDetailsPanelLabel>
+					<SidebarNavigationScreenDetailsPanelValue>
+						{ value }
+					</SidebarNavigationScreenDetailsPanelValue>
+				</SidebarNavigationScreenDetailsPanelRow>
+			) ) }
+		</SidebarNavigationScreenDetailsPanel>
+	);
+}