@wordpress/edit-site 5.11.0 → 5.12.1

package/src/components/sidebar-navigation-screen-page/status-label.js

@@ -0,0 +1,105 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
+/**
+ * WordPress dependencies
+ */
+import { __, sprintf } from '@wordpress/i18n';
+import { dateI18n, getDate, humanTimeDiff } from '@wordpress/date';
+import { createInterpolateElement } from '@wordpress/element';
+import { Path, SVG } from '@wordpress/primitives';
+
+const publishedIcon = (
+	<SVG fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
+		<Path
+			fillRule="evenodd"
+			clipRule="evenodd"
+			d="M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16Zm-1.067-5.6 4.2-5.667.8.6-4.8 6.467-3-2.267.6-.8 2.2 1.667Z"
+		/>
+	</SVG>
+);
+
+const draftIcon = (
+	<SVG fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
+		<Path
+			fillRule="evenodd"
+			clipRule="evenodd"
+			d="M14.5 8a6.5 6.5 0 1 1-13 0 6.5 6.5 0 0 1 13 0ZM16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0Zm-8 4a4 4 0 0 0 0-8v8Z"
+		/>
+	</SVG>
+);
+
+const pendingIcon = (
+	<SVG fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
+		<Path
+			fillRule="evenodd"
+			clipRule="evenodd"
+			d="M14.5 8a6.5 6.5 0 1 1-13 0 6.5 6.5 0 0 1 13 0ZM16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0ZM8 4a4 4 0 1 0 0 8 4 4 0 0 0 0-8Z"
+		/>
+	</SVG>
+);
+
+export default function StatusLabel( { status, date, short } ) {
+	const relateToNow = humanTimeDiff( date );
+	let statusLabel = '';
+	let statusIcon = pendingIcon;
+	switch ( status ) {
+		case 'publish':
+			statusLabel = date
+				? createInterpolateElement(
+						sprintf(
+							/* translators: %s: is the relative time when the post was published. */
+							__( 'Published <time>%s</time>' ),
+							relateToNow
+						),
+						{ time: <time dateTime={ date } /> }
+				  )
+				: __( 'Published' );
+			statusIcon = publishedIcon;
+			break;
+		case 'future':
+			const formattedDate = dateI18n(
+				short ? 'M j' : 'F j',
+				getDate( date )
+			);
+			statusLabel = date
+				? createInterpolateElement(
+						sprintf(
+							/* translators: %s: is the formatted date and time on which the post is scheduled to be published. */
+							__( 'Scheduled: <time>%s</time>' ),
+							formattedDate
+						),
+						{ time: <time dateTime={ date } /> }
+				  )
+				: __( 'Scheduled' );
+			break;
+		case 'draft':
+			statusLabel = __( 'Draft' );
+			statusIcon = draftIcon;
+			break;
+		case 'pending':
+			statusLabel = __( 'Pending' );
+			break;
+		case 'private':
+			statusLabel = __( 'Private' );
+			break;
+		case 'protected':
+			statusLabel = __( 'Password protected' );
+			break;
+	}
+
+	return (
+		<div
+			className={ classnames(
+				'edit-site-sidebar-navigation-screen-page__status',
+				{
+					[ `has-status has-${ status }-status` ]: !! status,
+				}
+			) }
+		>
+			{ statusIcon } { statusLabel }
+		</div>
+	);
+}

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

@@ -0,0 +1,63 @@
+.edit-site-sidebar-navigation-screen-page__featured-image-wrapper {
+	background-color: $gray-800;
+	margin-bottom: $grid-unit-20;
+	min-height: 128px;
+	border-radius: $grid-unit-05;
+}
+
+.edit-site-sidebar-navigation-screen-page__featured-image {
+	border-radius: 2px;
+	height: 128px;
+	overflow: hidden;
+	width: 100%;
+	background-size: cover;
+	background-position: 50% 50%;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	color: $gray-600;
+	img {
+		object-fit: cover;
+		height: 100%;
+		width: 100%;
+		object-position: 50% 50%;
+	}
+}
+
+.edit-site-sidebar-navigation-screen-page__featured-image-description {
+	font-size: $helptext-font-size;
+}
+
+.edit-site-sidebar-navigation-screen-page__excerpt {
+	font-size: $helptext-font-size;
+	margin-bottom: $grid-unit-30;
+}
+
+.edit-site-sidebar-navigation-screen-page__modified {
+	margin: 0 0 $grid-unit-20 0;
+	color: $gray-600;
+	margin-left: $grid-unit-20;
+	.components-text {
+		color: $gray-600;
+	}
+}
+
+.edit-site-sidebar-navigation-screen-page__status {
+	display: inline-flex;
+
+	time {
+		display: contents;
+	}
+
+	svg {
+		height: 16px;
+		width: 16px;
+		margin-right: $grid-unit-10;
+		fill: $alert-yellow;
+	}
+
+	&.has-publish-status svg,
+	&.has-future-status svg {
+		fill: $alert-green;
+	}
+}

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

@@ -4,10 +4,16 @@
 import {
 	__experimentalItemGroup as ItemGroup,
 	__experimentalItem as Item,
+	__experimentalTruncate as Truncate,
+	__experimentalVStack as VStack,
 } from '@wordpress/components';
+import { useState } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
-import { useEntityRecords } from '@wordpress/core-data';
+import { useEntityRecords, store as coreStore } from '@wordpress/core-data';
 import { decodeEntities } from '@wordpress/html-entities';
+import { privateApis as routerPrivateApis } from '@wordpress/router';
+import { layout, page, home, loop, plus } from '@wordpress/icons';
+import { useSelect } from '@wordpress/data';
 
 /**
  * Internal dependencies
@@ -15,68 +21,199 @@ import { decodeEntities } from '@wordpress/html-entities';
 import SidebarNavigationScreen from '../sidebar-navigation-screen';
 import { useLink } from '../routes/link';
 import SidebarNavigationItem from '../sidebar-navigation-item';
-import SidebarNavigationSubtitle from '../sidebar-navigation-subtitle';
+import SidebarButton from '../sidebar-button';
+import AddNewPageModal from '../add-new-page';
+import { unlock } from '../../lock-unlock';
 
-const PageItem = ( { postId, ...props } ) => {
+const { useHistory } = unlock( routerPrivateApis );
+
+const PageItem = ( { postType = 'page', postId, ...props } ) => {
 	const linkInfo = useLink( {
-		postType: 'page',
+		postType,
 		postId,
 	} );
 	return <SidebarNavigationItem { ...linkInfo } { ...props } />;
 };
 
 export default function SidebarNavigationScreenPages() {
-	const { records: pages, isResolving: isLoading } = useEntityRecords(
+	const { records: pages, isResolving: isLoadingPages } = useEntityRecords(
 		'postType',
-		'page'
+		'page',
+		{
+			status: 'any',
+			per_page: -1,
+		}
+	);
+	const { records: templates, isResolving: isLoadingTemplates } =
+		useEntityRecords( 'postType', 'wp_template', {
+			per_page: -1,
+		} );
+
+	const dynamicPageTemplates = templates?.filter( ( { slug } ) =>
+		[ '404', 'search' ].includes( slug )
 	);
 
+	const homeTemplate =
+		templates?.find( ( template ) => template.slug === 'front-page' ) ||
+		templates?.find( ( template ) => template.slug === 'home' ) ||
+		templates?.find( ( template ) => template.slug === 'index' );
+
+	const pagesAndTemplates = pages?.concat( dynamicPageTemplates, [
+		homeTemplate,
+	] );
+
+	const { frontPage, postsPage } = useSelect( ( select ) => {
+		const { getEntityRecord } = select( coreStore );
+
+		const siteSettings = getEntityRecord( 'root', 'site' );
+		return {
+			frontPage: siteSettings?.page_on_front,
+			postsPage: siteSettings?.page_for_posts,
+		};
+	}, [] );
+
+	const isHomePageBlog = frontPage === postsPage;
+
+	const reorderedPages = pages && [ ...pages ];
+
+	if ( ! isHomePageBlog && reorderedPages?.length ) {
+		const homePageIndex = reorderedPages.findIndex(
+			( item ) => item.id === frontPage
+		);
+		const homePage = reorderedPages.splice( homePageIndex, 1 );
+		reorderedPages?.splice( 0, 0, ...homePage );
+
+		const postsPageIndex = reorderedPages.findIndex(
+			( item ) => item.id === postsPage
+		);
+
+		const blogPage = reorderedPages.splice( postsPageIndex, 1 );
+
+		reorderedPages.splice( 1, 0, ...blogPage );
+	}
+
+	const [ showAddPage, setShowAddPage ] = useState( false );
+
+	const history = useHistory();
+
+	const handleNewPage = ( { type, id } ) => {
+		// Navigate to the created template editor.
+		history.push( {
+			postId: id,
+			postType: type,
+			canvas: 'edit',
+		} );
+		setShowAddPage( false );
+	};
+
 	return (
-		<SidebarNavigationScreen
-			title={ __( 'Pages' ) }
-			description={ __( 'Browse and edit pages on your site.' ) }
-			content={
-				<>
-					{ isLoading && (
-						<ItemGroup>
-							<Item>{ __( 'Loading pages' ) }</Item>
-						</ItemGroup>
-					) }
-					{ ! isLoading && (
-						<>
-							<SidebarNavigationSubtitle>
-								{ __( 'Recent' ) }
-							</SidebarNavigationSubtitle>
+		<>
+			{ showAddPage && (
+				<AddNewPageModal
+					onSave={ handleNewPage }
+					onClose={ () => setShowAddPage( false ) }
+				/>
+			) }
+			<SidebarNavigationScreen
+				title={ __( 'Pages' ) }
+				description={ __( 'Browse and edit pages on your site.' ) }
+				actions={
+					<SidebarButton
+						icon={ plus }
+						label={ __( 'Draft a new page' ) }
+						onClick={ () => setShowAddPage( true ) }
+					/>
+				}
+				content={
+					<>
+						{ ( isLoadingPages || isLoadingTemplates ) && (
+							<ItemGroup>
+								<Item>{ __( 'Loading pages' ) }</Item>
+							</ItemGroup>
+						) }
+						{ ! ( isLoadingPages || isLoadingTemplates ) && (
 							<ItemGroup>
-								{ ! pages?.length && (
+								{ ! pagesAndTemplates?.length && (
 									<Item>{ __( 'No page found' ) }</Item>
 								) }
-								{ pages?.map( ( page ) => (
+								{ isHomePageBlog && homeTemplate && (
 									<PageItem
-										postId={ page.id }
-										key={ page.id }
+										postType="wp_template"
+										postId={ homeTemplate.id }
+										key={ homeTemplate.id }
+										icon={ home }
 										withChevron
 									>
-										{ decodeEntities(
-											page.title?.rendered
-										) ?? __( '(no title)' ) }
+										<Truncate numberOfLines={ 1 }>
+											{ decodeEntities(
+												homeTemplate.title?.rendered ||
+													__( '(no title)' )
+											) }
+										</Truncate>
 									</PageItem>
-								) ) }
-								<SidebarNavigationItem
-									className="edit-site-sidebar-navigation-screen-pages__see-all"
-									href="edit.php?post_type=page"
-									onClick={ () => {
-										document.location =
-											'edit.php?post_type=page';
-									} }
-								>
-									{ __( 'Manage all pages' ) }
-								</SidebarNavigationItem>
+								) }
+								{ reorderedPages?.map( ( item ) => {
+									let itemIcon;
+									switch ( item.id ) {
+										case frontPage:
+											itemIcon = home;
+											break;
+										case postsPage:
+											itemIcon = loop;
+											break;
+										default:
+											itemIcon = page;
+									}
+									return (
+										<PageItem
+											postId={ item.id }
+											key={ item.id }
+											icon={ itemIcon }
+											withChevron
+										>
+											<Truncate numberOfLines={ 1 }>
+												{ decodeEntities(
+													item?.title?.rendered ||
+														__( '(no title)' )
+												) }
+											</Truncate>
+										</PageItem>
+									);
+								} ) }
 							</ItemGroup>
-						</>
-					) }
-				</>
-			}
-		/>
+						) }
+					</>
+				}
+				footer={
+					<VStack spacing={ 0 }>
+						{ dynamicPageTemplates?.map( ( item ) => (
+							<PageItem
+								postType="wp_template"
+								postId={ item.id }
+								key={ item.id }
+								icon={ layout }
+								withChevron
+							>
+								<Truncate numberOfLines={ 1 }>
+									{ decodeEntities(
+										item.title?.rendered ||
+											__( '(no title)' )
+									) }
+								</Truncate>
+							</PageItem>
+						) ) }
+						<SidebarNavigationItem
+							className="edit-site-sidebar-navigation-screen-pages__see-all"
+							href="edit.php?post_type=page"
+							onClick={ () => {
+								document.location = 'edit.php?post_type=page';
+							} }
+						>
+							{ __( 'Manage all pages' ) }
+						</SidebarNavigationItem>
+					</VStack>
+				}
+			/>
+		</>
 	);
 }

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

@@ -0,0 +1,44 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { useDispatch } from '@wordpress/data';
+import { pencil } from '@wordpress/icons';
+import { __experimentalUseNavigator as useNavigator } from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import SidebarButton from '../sidebar-button';
+import SidebarNavigationScreen from '../sidebar-navigation-screen';
+import useInitEditedEntityFromURL from '../sync-state-with-url/use-init-edited-entity-from-url';
+import usePatternDetails from './use-pattern-details';
+import useNavigationMenuContent from './use-navigation-menu-content';
+import { store as editSiteStore } from '../../store';
+import { unlock } from '../../lock-unlock';
+
+export default function SidebarNavigationScreenPattern() {
+	const { params } = useNavigator();
+	const { postType, postId } = params;
+	const { setCanvasMode } = unlock( useDispatch( editSiteStore ) );
+
+	useInitEditedEntityFromURL();
+
+	const patternDetails = usePatternDetails( postType, postId );
+	const content = useNavigationMenuContent( postType, postId );
+
+	return (
+		<SidebarNavigationScreen
+			actions={
+				<SidebarButton
+					onClick={ () => setCanvasMode( 'edit' ) }
+					label={ __( 'Edit' ) }
+					icon={ pencil }
+				/>
+			}
+			backPath={ '/library' }
+			content={ content }
+			{ ...patternDetails }
+		/>
+	);
+}

package/src/components/sidebar-navigation-screen-pattern/template-part-navigation-menu-list-item.js

@@ -0,0 +1,28 @@
+/**
+ * WordPress dependencies
+ */
+import { useEntityProp } from '@wordpress/core-data';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import SidebarNavigationItem from '../sidebar-navigation-item';
+import { useLink } from '../routes/link';
+
+export default function TemplatePartNavigationMenuListItem( { id } ) {
+	const [ title ] = useEntityProp( 'postType', 'wp_navigation', 'title', id );
+
+	const linkInfo = useLink( {
+		postId: id,
+		postType: 'wp_navigation',
+	} );
+
+	if ( ! id ) return null;
+
+	return (
+		<SidebarNavigationItem withChevron { ...linkInfo }>
+			{ title || __( '(no title)' ) }
+		</SidebarNavigationItem>
+	);
+}

package/src/components/sidebar-navigation-screen-pattern/template-part-navigation-menu-list.js

@@ -0,0 +1,21 @@
+/**
+ * WordPress dependencies
+ */
+import { __experimentalItemGroup as ItemGroup } from '@wordpress/components';
+/**
+ * Internal dependencies
+ */
+import TemplatePartNavigationMenuListItem from './template-part-navigation-menu-list-item';
+
+export default function TemplatePartNavigationMenuList( { menus } ) {
+	return (
+		<ItemGroup className="edit-site-sidebar-navigation-screen-template-part-navigation-menu-list">
+			{ menus.map( ( menuId ) => (
+				<TemplatePartNavigationMenuListItem
+					key={ menuId }
+					id={ menuId }
+				/>
+			) ) }
+		</ItemGroup>
+	);
+}

package/src/components/sidebar-navigation-screen-pattern/template-part-navigation-menu.js

@@ -0,0 +1,30 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { __experimentalHeading as Heading } from '@wordpress/components';
+import { useEntityProp } from '@wordpress/core-data';
+
+/**
+ * Internal dependencies
+ */
+import NavigationMenuEditor from '../sidebar-navigation-screen-navigation-menu/navigation-menu-editor';
+
+export default function TemplatePartNavigationMenu( { id } ) {
+	const [ title ] = useEntityProp( 'postType', 'wp_navigation', 'title', id );
+
+	if ( ! id ) return null;
+
+	return (
+		<>
+			<Heading
+				className="edit-site-sidebar-navigation-screen-template-part-navigation-menu__title"
+				size="12"
+				upperCase={ true }
+			>
+				{ title?.rendered || __( 'Navigation' ) }
+			</Heading>
+			<NavigationMenuEditor navigationMenuId={ id } />
+		</>
+	);
+}

package/src/components/sidebar-navigation-screen-pattern/template-part-navigation-menus.js

@@ -0,0 +1,33 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { __experimentalHeading as Heading } from '@wordpress/components';
+/**
+ * Internal dependencies
+ */
+import TemplatePartNavigationMenu from './template-part-navigation-menu';
+import TemplatePartNavigationMenuList from './template-part-navigation-menu-list';
+
+export default function TemplatePartNavigationMenus( { menus } ) {
+	if ( ! menus.length ) return null;
+
+	// if there is a single menu then render TemplatePartNavigationMenu
+	if ( menus.length === 1 ) {
+		return <TemplatePartNavigationMenu id={ menus[ 0 ] } />;
+	}
+
+	// if there are multiple menus then render TemplatePartNavigationMenuList
+	return (
+		<>
+			<Heading
+				className="edit-site-sidebar-navigation-screen-template-part-navigation-menu__title"
+				size="12"
+				upperCase={ true }
+			>
+				{ __( 'Navigation' ) }
+			</Heading>
+			<TemplatePartNavigationMenuList menus={ menus } />
+		</>
+	);
+}

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

@@ -0,0 +1,71 @@
+/**
+ * Internal dependencies
+ */
+import TemplatePartNavigationMenus from './template-part-navigation-menus';
+import useEditedEntityRecord from '../use-edited-entity-record';
+
+/**
+ * Retrieves a list of specific blocks from a given tree of blocks.
+ *
+ * @param {string} targetBlockType The name of the block type to find.
+ * @param {Array}  blocks          A list of blocks from a template part entity.
+ *
+ * @return {Array} A list of any navigation blocks found in the blocks.
+ */
+function getBlocksOfTypeFromBlocks( targetBlockType, blocks ) {
+	if ( ! targetBlockType || ! blocks?.length ) {
+		return [];
+	}
+
+	const findInBlocks = ( _blocks ) => {
+		if ( ! _blocks ) {
+			return [];
+		}
+
+		const navigationBlocks = [];
+
+		for ( const block of _blocks ) {
+			if ( block.name === targetBlockType ) {
+				navigationBlocks.push( block );
+			}
+
+			if ( block?.innerBlocks ) {
+				const innerNavigationBlocks = findInBlocks( block.innerBlocks );
+
+				if ( innerNavigationBlocks.length ) {
+					navigationBlocks.push( ...innerNavigationBlocks );
+				}
+			}
+		}
+
+		return navigationBlocks;
+	};
+
+	return findInBlocks( blocks );
+}
+
+export default function useNavigationMenuContent( postType, postId ) {
+	const { record } = useEditedEntityRecord( postType, postId );
+
+	// Only managing navigation menus in template parts is supported
+	// to match previous behaviour. This could potentially be expanded
+	// to patterns as well.
+	if ( postType !== 'wp_template_part' ) {
+		return;
+	}
+
+	const navigationBlocks = getBlocksOfTypeFromBlocks(
+		'core/navigation',
+		record?.blocks
+	);
+
+	const navigationMenuIds = navigationBlocks?.map(
+		( block ) => block.attributes.ref
+	);
+
+	if ( ! navigationMenuIds?.length ) {
+		return;
+	}
+
+	return <TemplatePartNavigationMenus menus={ navigationMenuIds } />;
+}