@wordpress/edit-site 5.11.0 → 5.12.0

package/src/components/sidebar-navigation-screen-global-styles/index.js

@@ -2,11 +2,19 @@
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { edit, seen } from '@wordpress/icons';
+import { backup, edit, seen } from '@wordpress/icons';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { store as coreStore } from '@wordpress/core-data';
-import { __experimentalNavigatorButton as NavigatorButton } from '@wordpress/components';
+import {
+	Icon,
+	__experimentalNavigatorButton as NavigatorButton,
+	__experimentalVStack as HStack,
+	__experimentalVStack as VStack,
+} from '@wordpress/components';
 import { useViewportMatch } from '@wordpress/compose';
+import { BlockEditorProvider } from '@wordpress/block-editor';
+import { humanTimeDiff } from '@wordpress/date';
+import { useCallback } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -18,6 +26,9 @@ import { store as editSiteStore } from '../../store';
 import SidebarButton from '../sidebar-button';
 import SidebarNavigationItem from '../sidebar-navigation-item';
 import StyleBook from '../style-book';
+import useGlobalStylesRevisions from '../global-styles/screen-revisions/use-global-styles-revisions';
+
+const noop = () => {};
 
 export function SidebarNavigationItemGlobalStyles( props ) {
 	const { openGeneralSidebar } = useDispatch( editSiteStore );
@@ -51,6 +62,84 @@ export function SidebarNavigationItemGlobalStyles( props ) {
 	);
 }
 
+function SidebarNavigationScreenGlobalStylesContent() {
+	const { storedSettings } = useSelect( ( select ) => {
+		const { getSettings } = unlock( select( editSiteStore ) );
+
+		return {
+			storedSettings: getSettings( false ),
+		};
+	}, [] );
+
+	// Wrap in a BlockEditorProvider to ensure that the Iframe's dependencies are
+	// loaded. This is necessary because the Iframe component waits until
+	// the block editor store's `__internalIsInitialized` is true before
+	// rendering the iframe. Without this, the iframe previews will not render
+	// in mobile viewport sizes, where the editor canvas is hidden.
+	return (
+		<BlockEditorProvider
+			settings={ storedSettings }
+			onChange={ noop }
+			onInput={ noop }
+		>
+			<StyleVariationsContainer />
+		</BlockEditorProvider>
+	);
+}
+
+function SidebarNavigationScreenGlobalStylesFooter( { onClickRevisions } ) {
+	const { revisions, isLoading } = useGlobalStylesRevisions();
+	const { revisionsCount } = useSelect( ( select ) => {
+		const { getEntityRecord, __experimentalGetCurrentGlobalStylesId } =
+			select( coreStore );
+
+		const globalStylesId = __experimentalGetCurrentGlobalStylesId();
+		const globalStyles = globalStylesId
+			? getEntityRecord( 'root', 'globalStyles', globalStylesId )
+			: undefined;
+
+		return {
+			revisionsCount:
+				globalStyles?._links?.[ 'version-history' ]?.[ 0 ]?.count ?? 0,
+		};
+	}, [] );
+
+	const hasRevisions = revisionsCount >= 2;
+	const modified = revisions?.[ 0 ]?.modified;
+
+	if ( ! hasRevisions || isLoading || ! modified ) {
+		return null;
+	}
+
+	return (
+		<VStack className="edit-site-sidebar-navigation-screen-global-styles__footer">
+			<SidebarNavigationItem
+				className="edit-site-sidebar-navigation-screen-global-styles__revisions"
+				label={ __( 'Revisions' ) }
+				onClick={ onClickRevisions }
+			>
+				<HStack
+					as="span"
+					alignment="center"
+					spacing={ 5 }
+					direction="row"
+					justify="space-between"
+				>
+					<span className="edit-site-sidebar-navigation-screen-global-styles__revisions__label">
+						{ __( 'Last modified' ) }
+					</span>
+					<span>
+						<time dateTime={ modified }>
+							{ humanTimeDiff( modified ) }
+						</time>
+					</span>
+					<Icon icon={ backup } style={ { fill: 'currentcolor' } } />
+				</HStack>
+			</SidebarNavigationItem>
+		</VStack>
+	);
+}
+
 export default function SidebarNavigationScreenGlobalStyles() {
 	const { openGeneralSidebar } = useDispatch( editSiteStore );
 	const isMobileViewport = useViewportMatch( 'medium', '<' );
@@ -65,19 +154,31 @@ export default function SidebarNavigationScreenGlobalStyles() {
 		[]
 	);
 
-	const openGlobalStyles = async () =>
-		Promise.all( [
-			setCanvasMode( 'edit' ),
-			openGeneralSidebar( 'edit-site/global-styles' ),
-		] );
+	const openGlobalStyles = useCallback(
+		async () =>
+			Promise.all( [
+				setCanvasMode( 'edit' ),
+				openGeneralSidebar( 'edit-site/global-styles' ),
+			] ),
+		[ setCanvasMode, openGeneralSidebar ]
+	);
 
-	const openStyleBook = async () => {
+	const openStyleBook = useCallback( async () => {
 		await openGlobalStyles();
 		// Open the Style Book once the canvas mode is set to edit,
 		// and the global styles sidebar is open. This ensures that
 		// the Style Book is not prematurely closed.
 		setEditorCanvasContainerView( 'style-book' );
-	};
+	}, [ openGlobalStyles, setEditorCanvasContainerView ] );
+
+	const openRevisions = useCallback( async () => {
+		await openGlobalStyles();
+		// Open the global styles revisions once the canvas mode is set to edit,
+		// and the global styles sidebar is open. The global styles UI is responsible
+		// for redirecting to the revisions screen once the editor canvas container
+		// has been set to 'global-styles-revisions'.
+		setEditorCanvasContainerView( 'global-styles-revisions' );
+	}, [ openGlobalStyles, setEditorCanvasContainerView ] );
 
 	return (
 		<>
@@ -86,9 +187,14 @@ export default function SidebarNavigationScreenGlobalStyles() {
 				description={ __(
 					'Choose a different style combination for the theme styles.'
 				) }
-				content={ <StyleVariationsContainer /> }
+				content={ <SidebarNavigationScreenGlobalStylesContent /> }
+				footer={
+					<SidebarNavigationScreenGlobalStylesFooter
+						onClickRevisions={ openRevisions }
+					/>
+				}
 				actions={
-					<div>
+					<>
 						{ ! isMobileViewport && (
 							<SidebarButton
 								icon={ seen }
@@ -108,7 +214,7 @@ export default function SidebarNavigationScreenGlobalStyles() {
 							label={ __( 'Edit styles' ) }
 							onClick={ async () => await openGlobalStyles() }
 						/>
-					</div>
+					</>
 				}
 			/>
 			{ isStyleBookOpened && ! isMobileViewport && (

package/src/components/sidebar-navigation-screen-global-styles/style.scss

@@ -0,0 +1,15 @@
+.edit-site-sidebar-navigation-screen-global-styles__footer {
+	padding-left: $grid-unit-15;
+}
+
+.edit-site-sidebar-navigation-screen-global-styles__revisions {
+	border-radius: $radius-block-ui;
+
+	&:not(:hover) {
+		color: $gray-200;
+
+		.edit-site-sidebar-navigation-screen-global-styles__revisions__label {
+			color: $gray-600;
+		}
+	}
+}

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 {

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>
+	);
+}