@wordpress/edit-site 5.11.0 → 5.12.0

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

@@ -0,0 +1,80 @@
+.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;
+}
+
+.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;
+	}
+}
+
+.edit-site-sidebar-navigation-screen-page__footer {
+	padding-top: $grid-unit-10;
+	padding-bottom: $grid-unit-10;
+	padding-left: $grid-unit-20;
+}
+
+.edit-site-sidebar-navigation-screen-page__details {
+	.edit-site-sidebar-navigation-screen-page__details-label {
+		color: $gray-600;
+		width: 100px;
+	}
+
+	.edit-site-sidebar-navigation-screen-page__details-value.edit-site-sidebar-navigation-screen-page__details-value {
+		color: $gray-200;
+	}
+}
+

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,198 @@ 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 '../../private-apis';
 
-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>
+									);
+								} ) }
+								<VStack className="edit-site-sidebar-navigation-screen__sticky-section">
+									{ 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>
 							</ItemGroup>
-						</>
-					) }
-				</>
-			}
-		/>
+						) }
+					</>
+				}
+			/>
+		</>
 	);
 }

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

@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { __, sprintf, _x } from '@wordpress/i18n';
+import { __, _x } from '@wordpress/i18n';
 import { useDispatch, useSelect } from '@wordpress/data';
 import { pencil } from '@wordpress/icons';
 import {
@@ -19,6 +19,7 @@ import { unlock } from '../../private-apis';
 import { store as editSiteStore } from '../../store';
 import SidebarButton from '../sidebar-button';
 import { useAddedBy } from '../list/added-by';
+import TemplateActions from '../template-actions';
 
 function useTemplateTitleAndDescription( postType, postId ) {
 	const { getDescription, getTitle, record } = useEditedEntityRecord(
@@ -36,17 +37,9 @@ function useTemplateTitleAndDescription( postType, postId ) {
 	let descriptionText = getDescription();
 
 	if ( ! descriptionText && addedBy.text ) {
-		if ( record.type === 'wp_template' && record.is_custom ) {
-			descriptionText = __(
-				'This is a custom template that can be applied manually to any Post or Page.'
-			);
-		} else if ( record.type === 'wp_template_part' ) {
-			descriptionText = sprintf(
-				// translators: %s: template part title e.g: "Header".
-				__( 'This is your %s template part.' ),
-				getTitle()
-			);
-		}
+		descriptionText = __(
+			'This is a custom template that can be applied manually to any Post or Page.'
+		);
 	}
 
 	const description = (
@@ -73,9 +66,7 @@ function useTemplateTitleAndDescription( postType, postId ) {
 
 					{ addedBy.isCustomized && (
 						<span className="edit-site-sidebar-navigation-screen-template__added-by-description-customized">
-							{ postType === 'wp_template'
-								? _x( '(Customized)', 'template' )
-								: _x( '(Customized)', 'template part' ) }
+							{ _x( '(Customized)', 'template' ) }
 						</span>
 					) }
 				</span>
@@ -87,8 +78,10 @@ function useTemplateTitleAndDescription( postType, postId ) {
 }
 
 export default function SidebarNavigationScreenTemplate() {
-	const { params } = useNavigator();
-	const { postType, postId } = params;
+	const navigator = useNavigator();
+	const {
+		params: { postType, postId },
+	} = navigator;
 	const { setCanvasMode } = unlock( useDispatch( editSiteStore ) );
 	const { title, description } = useTemplateTitleAndDescription(
 		postType,
@@ -99,11 +92,21 @@ export default function SidebarNavigationScreenTemplate() {
 		<SidebarNavigationScreen
 			title={ title }
 			actions={
-				<SidebarButton
-					onClick={ () => setCanvasMode( 'edit' ) }
-					label={ __( 'Edit' ) }
-					icon={ pencil }
-				/>
+				<>
+					<TemplateActions
+						postType={ postType }
+						postId={ postId }
+						toggleProps={ { as: SidebarButton } }
+						onRemove={ () => {
+							navigator.goTo( `/${ postType }/all` );
+						} }
+					/>
+					<SidebarButton
+						onClick={ () => setCanvasMode( 'edit' ) }
+						label={ __( 'Edit' ) }
+						icon={ pencil }
+					/>
+				</>
 			}
 			description={ description }
 		/>

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

@@ -0,0 +1,103 @@
+/**
+ * WordPress dependencies
+ */
+import { __, sprintf, _x } from '@wordpress/i18n';
+import { useDispatch, useSelect } from '@wordpress/data';
+import { pencil } from '@wordpress/icons';
+import {
+	__experimentalUseNavigator as useNavigator,
+	Icon,
+} from '@wordpress/components';
+import { store as coreStore } from '@wordpress/core-data';
+
+/**
+ * Internal dependencies
+ */
+import SidebarNavigationScreen from '../sidebar-navigation-screen';
+import useEditedEntityRecord from '../use-edited-entity-record';
+import { unlock } from '../../private-apis';
+import { store as editSiteStore } from '../../store';
+import SidebarButton from '../sidebar-button';
+import { useAddedBy } from '../list/added-by';
+
+function useTemplateTitleAndDescription( postType, postId ) {
+	const { getDescription, getTitle, record } = useEditedEntityRecord(
+		postType,
+		postId
+	);
+	const currentTheme = useSelect(
+		( select ) => select( coreStore ).getCurrentTheme(),
+		[]
+	);
+	const addedBy = useAddedBy( postType, postId );
+	const isAddedByActiveTheme =
+		addedBy.type === 'theme' && record.theme === currentTheme?.stylesheet;
+	const title = getTitle();
+	let descriptionText = getDescription();
+
+	if ( ! descriptionText && addedBy.text ) {
+		descriptionText = sprintf(
+			// translators: %s: template part title e.g: "Header".
+			__( 'This is your %s template part.' ),
+			getTitle()
+		);
+	}
+
+	const description = (
+		<>
+			{ descriptionText }
+
+			{ addedBy.text && ! isAddedByActiveTheme && (
+				<span className="edit-site-sidebar-navigation-screen-template__added-by-description">
+					<span className="edit-site-sidebar-navigation-screen-template__added-by-description-author">
+						<span className="edit-site-sidebar-navigation-screen-template__added-by-description-author-icon">
+							{ addedBy.imageUrl ? (
+								<img
+									src={ addedBy.imageUrl }
+									alt=""
+									width="24"
+									height="24"
+								/>
+							) : (
+								<Icon icon={ addedBy.icon } />
+							) }
+						</span>
+						{ addedBy.text }
+					</span>
+
+					{ addedBy.isCustomized && (
+						<span className="edit-site-sidebar-navigation-screen-template__added-by-description-customized">
+							{ _x( '(Customized)', 'template part' ) }
+						</span>
+					) }
+				</span>
+			) }
+		</>
+	);
+
+	return { title, description };
+}
+
+export default function SidebarNavigationScreenTemplatePart() {
+	const { params } = useNavigator();
+	const { postType, postId } = params;
+	const { setCanvasMode } = unlock( useDispatch( editSiteStore ) );
+	const { title, description } = useTemplateTitleAndDescription(
+		postType,
+		postId
+	);
+
+	return (
+		<SidebarNavigationScreen
+			title={ title }
+			actions={
+				<SidebarButton
+					onClick={ () => setCanvasMode( 'edit' ) }
+					label={ __( 'Edit' ) }
+					icon={ pencil }
+				/>
+			}
+			description={ description }
+		/>
+	);
+}

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

@@ -43,7 +43,7 @@ const config = {
 			manage: __( 'Manage all template parts' ),
 			reusableBlocks: __( 'Manage reusable blocks' ),
 			description: __(
-				'Manage what patterns are available when editing your site.'
+				'Template Parts are small pieces of a layout that can be reused across multiple templates and always appear the same way. Common template parts include the site header, footer, or sidebar.'
 			),
 		},
 		sortCallback: ( items ) => {

package/src/components/sidebar-navigation-subtitle/style.scss

@@ -1,7 +1,7 @@
 .edit-site-sidebar-navigation-subtitle {
-	color: $gray-100;
+	color: $gray-400;
 	text-transform: uppercase;
 	font-weight: 500;
 	font-size: 11px;
-	padding: $grid-unit-20 0 0 $grid-unit-20;
+	padding: $grid-unit-10 0;
 }

package/src/components/site-hub/index.js

@@ -19,8 +19,8 @@ import { store as blockEditorStore } from '@wordpress/block-editor';
 import { store as coreStore } from '@wordpress/core-data';
 import { decodeEntities } from '@wordpress/html-entities';
 import { forwardRef } from '@wordpress/element';
-import { search } from '@wordpress/icons';
-import { privateApis as commandsPrivateApis } from '@wordpress/commands';
+import { search, external } from '@wordpress/icons';
+import { store as commandsStore } from '@wordpress/commands';
 
 /**
  * Internal dependencies
@@ -29,20 +29,23 @@ import { store as editSiteStore } from '../../store';
 import SiteIcon from '../site-icon';
 import { unlock } from '../../private-apis';
 
-const { store: commandsStore } = unlock( commandsPrivateApis );
-
 const HUB_ANIMATION_DURATION = 0.3;
 
 const SiteHub = forwardRef( ( props, ref ) => {
-	const { canvasMode, dashboardLink } = useSelect( ( select ) => {
+	const { canvasMode, dashboardLink, homeUrl } = useSelect( ( select ) => {
 		const { getCanvasMode, getSettings } = unlock(
 			select( editSiteStore )
 		);
 
+		const {
+			getUnstableBase, // Site index.
+		} = select( coreStore );
+
 		return {
 			canvasMode: getCanvasMode(),
 			dashboardLink:
 				getSettings().__experimentalDashboardLink || 'index.php',
+			homeUrl: getUnstableBase()?.home,
 		};
 	}, [] );
 	const { open: openCommandCenter } = useDispatch( commandsStore );
@@ -87,7 +90,11 @@ const SiteHub = forwardRef( ( props, ref ) => {
 				ease: 'easeOut',
 			} }
 		>
-			<HStack justify="space-between" alignment="center">
+			<HStack
+				justify="space-between"
+				alignment="center"
+				className="edit-site-site-hub__container"
+			>
 				<HStack
 					justify="flex-start"
 					className="edit-site-site-hub__text-content"
@@ -149,6 +156,14 @@ const SiteHub = forwardRef( ( props, ref ) => {
 							{ decodeEntities( siteTitle ) }
 						</motion.div>
 					</AnimatePresence>
+					<Button
+						href={ homeUrl }
+						target="_blank"
+						label={ __( 'View site' ) }
+						aria-label={ __( 'View site (opens in a new tab)' ) }
+						icon={ external }
+						className="edit-site-site-hub__site-view-link"
+					/>
 				</HStack>
 				{ canvasMode === 'view' && (
 					<Button

package/src/components/site-hub/style.scss

@@ -3,6 +3,31 @@
 	align-items: center;
 	justify-content: space-between;
 	gap: $grid-unit-10;
+
+	.edit-site-site-hub__container {
+		gap: 0;
+	}
+
+	.edit-site-site-hub__site-view-link {
+		flex-grow: 0;
+		@include break-mobile() {
+			opacity: 0;
+			transition: opacity 0.2s ease-in-out;
+		}
+		&:focus {
+			outline: none;
+			box-shadow: none;
+			opacity: 1;
+		}
+		svg {
+			fill: $white;
+		}
+	}
+	&:hover {
+		.edit-site-site-hub__site-view-link {
+			opacity: 1;
+		}
+	}
 }
 
 .edit-site-site-hub__post-type {
@@ -29,6 +54,7 @@
 
 .edit-site-site-hub__site-title {
 	margin-left: $grid-unit-05;
+	flex-grow: 1;
 }
 
 .edit-site-site-hub_toggle-command-center {