@wordpress/edit-site 5.10.0 → 5.12.0

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

@@ -1,15 +1,28 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
 /**
  * WordPress dependencies
  */
-import { __ } from '@wordpress/i18n';
-import { useDispatch } from '@wordpress/data';
+import { __, sprintf } from '@wordpress/i18n';
+import { useDispatch, useSelect } from '@wordpress/data';
 import {
 	__experimentalUseNavigator as useNavigator,
+	__experimentalVStack as VStack,
 	ExternalLink,
+	__experimentalTruncate as Truncate,
+	__experimentalHStack as HStack,
+	__experimentalText as Text,
 } 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 { humanTimeDiff } from '@wordpress/date';
+import { createInterpolateElement } from '@wordpress/element';
+import { __unstableStripHTML as stripHTML } from '@wordpress/dom';
+import { escapeAttribute } from '@wordpress/escape-html';
 
 /**
  * Internal dependencies
@@ -18,42 +31,142 @@ import SidebarNavigationScreen from '../sidebar-navigation-screen';
 import { unlock } from '../../private-apis';
 import { store as editSiteStore } from '../../store';
 import SidebarButton from '../sidebar-button';
+import SidebarNavigationSubtitle from '../sidebar-navigation-subtitle';
+import PageDetails from './page-details';
+import PageActions from '../page-actions';
 
 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 }
+				>
+					{ record.link.replace( /^(https?:\/\/)?/, '' ) }
+				</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 }
+					<VStack
+						className="edit-site-sidebar-navigation-screen-page__featured-image-wrapper"
+						alignment="left"
+						spacing={ 2 }
+					>
+						<div
+							className={ classnames(
+								'edit-site-sidebar-navigation-screen-page__featured-image',
+								{
+									'has-image': !! featuredMediaSourceUrl,
+								}
+							) }
 						>
-							{ record.link }
-						</ExternalLink>
-					) : null }
-					{ record
-						? decodeEntities( record?.description?.rendered )
-						: null }
+							{ !! featuredMediaSourceUrl && (
+								<img
+									alt={ featureImageAltText }
+									src={ featuredMediaSourceUrl }
+								/>
+							) }
+							{ ! record?.featured_media && (
+								<p>{ __( 'No featured image' ) }</p>
+							) }
+						</div>
+					</VStack>
+					{ !! record?.excerpt?.rendered && (
+						<Truncate
+							className="edit-site-sidebar-navigation-screen-page__excerpt"
+							numberOfLines={ 3 }
+						>
+							{ stripHTML( record.excerpt.rendered ) }
+						</Truncate>
+					) }
+					<SidebarNavigationSubtitle>
+						{ __( 'Details' ) }
+					</SidebarNavigationSubtitle>
+					<PageDetails id={ postId } />
 				</>
 			}
+			footer={
+				!! record?.modified && (
+					<HStack
+						spacing={ 5 }
+						alignment="left"
+						className="edit-site-sidebar-navigation-screen-page__details edit-site-sidebar-navigation-screen-page__footer"
+					>
+						<Text className="edit-site-sidebar-navigation-screen-page__details-label">
+							{ __( 'Last modified' ) }
+						</Text>
+						<Text className="edit-site-sidebar-navigation-screen-page__details-value">
+							{ createInterpolateElement(
+								sprintf(
+									/* translators: %s: is the relative time when the post was last modified. */
+									__( '<time>%s</time>' ),
+									humanTimeDiff( record.modified )
+								),
+								{
+									time: <time dateTime={ record.modified } />,
+								}
+							) }
+						</Text>
+					</HStack>
+				)
+			}
 		/>
-	);
+	) : null;
 }

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

@@ -0,0 +1,163 @@
+/**
+ * WordPress dependencies
+ */
+import { __, _x, sprintf } from '@wordpress/i18n';
+import {
+	__experimentalHStack as HStack,
+	__experimentalText as Text,
+	__experimentalVStack as VStack,
+	__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';
+
+/**
+ * Internal dependencies
+ */
+import StatusLabel from './status-label';
+import { unlock } from '../../private-apis';
+import { store as editSiteStore } from '../../store';
+
+// 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 }
+				/>
+			),
+		},
+		{
+			label: __( 'Slug' ),
+			value: <Truncate numberOfLines={ 1 }>{ page.slug }</Truncate>,
+		},
+	];
+
+	if ( page?.templateTitle ) {
+		details.push( {
+			label: __( 'Template' ),
+			value: decodeEntities( page.templateTitle ),
+		} );
+	}
+
+	details.push( {
+		label: __( 'Parent' ),
+		// `null` indicates no parent.
+		value:
+			null === page?.parentTitle
+				? __( 'Top level' )
+				: 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, getSettings } = unlock(
+				select( editSiteStore )
+			);
+			const defaultTemplateTypes = getSettings()?.defaultTemplateTypes;
+			const postContext = getEditedPostContext();
+
+			// 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 =
+				defaultTemplateTypes && templateSlug
+					? defaultTemplateTypes.find(
+							( template ) => template.slug === templateSlug
+					  )?.title
+					: 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 ]
+	);
+	return (
+		<VStack spacing={ 5 }>
+			{ getPageDetails( {
+				parentTitle,
+				templateTitle,
+				...record,
+			} ).map( ( { label, value } ) => (
+				<HStack
+					key={ label }
+					spacing={ 5 }
+					alignment="left"
+					className="edit-site-sidebar-navigation-screen-page__details"
+				>
+					<Text className="edit-site-sidebar-navigation-screen-page__details-label">
+						{ label }
+					</Text>
+					<Text className="edit-site-sidebar-navigation-screen-page__details-value">
+						{ value }
+					</Text>
+				</HStack>
+			) ) }
+		</VStack>
+	);
+}

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

@@ -0,0 +1,101 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
+/**
+ * WordPress dependencies
+ */
+import { __, sprintf } from '@wordpress/i18n';
+import { dateI18n, getDate, getSettings, 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 } ) {
+	const relateToNow = humanTimeDiff( date );
+	let statusLabel = '';
+	let statusIcon = pendingIcon;
+	switch ( status ) {
+		case 'publish':
+			statusLabel = createInterpolateElement(
+				sprintf(
+					/* translators: %s: is the relative time when the post was published. */
+					__( 'Published <time>%s</time>' ),
+					relateToNow
+				),
+				{ time: <time dateTime={ date } /> }
+			);
+			statusIcon = publishedIcon;
+			break;
+		case 'future':
+			const formattedDate = dateI18n(
+				getSettings().formats.date,
+				getDate( date )
+			);
+			statusLabel = createInterpolateElement(
+				sprintf(
+					/* translators: %s: is the formatted date and time on which the post is scheduled to be published. */
+					__( 'Scheduled for <time>%s</time>' ),
+					formattedDate
+				),
+				{ time: <time dateTime={ date } /> }
+			);
+			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,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;
+	}
+}
+