@wordpress/edit-site 5.22.0 → 5.24.0

package/src/components/global-styles/screen-revisions/revisions-buttons.js

@@ -12,20 +12,28 @@ import { dateI18n, getDate, humanTimeDiff, getSettings } from '@wordpress/date';
 import { store as coreStore } from '@wordpress/core-data';
 import { useSelect } from '@wordpress/data';
 
+const DAY_IN_MILLISECONDS = 60 * 60 * 1000 * 24;
+
 /**
  * Returns a button label for the revision.
  *
- * @param {Object} revision A revision object.
+ * @param {string|number} id                    A revision object.
+ * @param {boolean}       isLatest              Whether the revision is the most current.
+ * @param {string}        authorDisplayName     Author name.
+ * @param {string}        formattedModifiedDate Revision modified date formatted.
  * @return {string} Translated label.
  */
-function getRevisionLabel( revision ) {
-	const authorDisplayName = revision?.author?.name || __( 'User' );
-
-	if ( 'parent' === revision?.id ) {
+function getRevisionLabel(
+	id,
+	isLatest,
+	authorDisplayName,
+	formattedModifiedDate
+) {
+	if ( 'parent' === id ) {
 		return __( 'Reset the styles to the theme defaults' );
 	}
 
-	if ( 'unsaved' === revision?.id ) {
+	if ( 'unsaved' === id ) {
 		return sprintf(
 			/* translators: %s author display name */
 			__( 'Unsaved changes by %s' ),
@@ -33,23 +41,18 @@ function getRevisionLabel( revision ) {
 		);
 	}
 
-	const formattedDate = dateI18n(
-		getSettings().formats.datetimeAbbreviated,
-		getDate( revision?.modified )
-	);
-
-	return revision?.isLatest
+	return isLatest
 		? sprintf(
 				/* translators: %1$s author display name, %2$s: revision creation date */
 				__( 'Changes saved by %1$s on %2$s (current)' ),
 				authorDisplayName,
-				formattedDate
+				formattedModifiedDate
 		  )
 		: sprintf(
 				/* translators: %1$s author display name, %2$s: revision creation date */
 				__( 'Changes saved by %1$s on %2$s' ),
 				authorDisplayName,
-				formattedDate
+				formattedModifiedDate
 		  );
 }
 
@@ -65,10 +68,18 @@ function getRevisionLabel( revision ) {
  * @return {JSX.Element} The modal component.
  */
 function RevisionsButtons( { userRevisions, selectedRevisionId, onChange } ) {
-	const currentTheme = useSelect(
-		( select ) => select( coreStore ).getCurrentTheme(),
-		[]
-	);
+	const { currentThemeName, currentUser } = useSelect( ( select ) => {
+		const { getCurrentTheme, getCurrentUser } = select( coreStore );
+		const currentTheme = getCurrentTheme();
+		return {
+			currentThemeName:
+				currentTheme?.name?.rendered || currentTheme?.stylesheet,
+			currentUser: getCurrentUser(),
+		};
+	}, [] );
+	const dateNowInMs = getDate().getTime();
+	const { date: dateFormat, datetimeAbbreviated } = getSettings().formats;
+
 	return (
 		<ol
 			className="edit-site-global-styles-screen-revisions__revisions-list"
@@ -76,14 +87,28 @@ function RevisionsButtons( { userRevisions, selectedRevisionId, onChange } ) {
 			role="group"
 		>
 			{ userRevisions.map( ( revision, index ) => {
-				const { id, author, modified } = revision;
-				const authorDisplayName = author?.name || __( 'User' );
-				const authorAvatar = author?.avatar_urls?.[ '48' ];
-				const isUnsaved = 'unsaved' === revision?.id;
+				const { id, isLatest, author, modified } = revision;
+				const isUnsaved = 'unsaved' === id;
+				// Unsaved changes are created by the current user.
+				const revisionAuthor = isUnsaved ? currentUser : author;
+				const authorDisplayName = revisionAuthor?.name || __( 'User' );
+				const authorAvatar = revisionAuthor?.avatar_urls?.[ '48' ];
 				const isSelected = selectedRevisionId
-					? selectedRevisionId === revision?.id
+					? selectedRevisionId === id
 					: index === 0;
-				const isReset = 'parent' === revision?.id;
+				const isReset = 'parent' === id;
+				const modifiedDate = getDate( modified );
+				const displayDate =
+					modified &&
+					dateNowInMs - modifiedDate.getTime() > DAY_IN_MILLISECONDS
+						? dateI18n( dateFormat, modifiedDate )
+						: humanTimeDiff( modified );
+				const revisionLabel = getRevisionLabel(
+					id,
+					isLatest,
+					authorDisplayName,
+					dateI18n( datetimeAbbreviated, modifiedDate )
+				);
 
 				return (
 					<li
@@ -102,40 +127,35 @@ function RevisionsButtons( { userRevisions, selectedRevisionId, onChange } ) {
 							onClick={ () => {
 								onChange( revision );
 							} }
-							label={ getRevisionLabel( revision ) }
+							label={ revisionLabel }
 						>
 							{ isReset ? (
 								<span className="edit-site-global-styles-screen-revisions__description">
 									{ __( 'Default styles' ) }
 									<span className="edit-site-global-styles-screen-revisions__meta">
-										{ currentTheme?.name?.rendered ||
-											currentTheme?.stylesheet }
+										{ currentThemeName }
 									</span>
 								</span>
 							) : (
 								<span className="edit-site-global-styles-screen-revisions__description">
-									<time dateTime={ modified }>
-										{ humanTimeDiff( modified ) }
-									</time>
+									{ isUnsaved ? (
+										<span className="edit-site-global-styles-screen-revisions__date">
+											{ __( '(Unsaved)' ) }
+										</span>
+									) : (
+										<time
+											className="edit-site-global-styles-screen-revisions__date"
+											dateTime={ modified }
+										>
+											{ displayDate }
+										</time>
+									) }
 									<span className="edit-site-global-styles-screen-revisions__meta">
-										{ isUnsaved
-											? sprintf(
-													/* translators: %s author display name */
-													__(
-														'Unsaved changes by %s'
-													),
-													authorDisplayName
-											  )
-											: sprintf(
-													/* translators: %s author display name */
-													__( 'Changes saved by %s' ),
-													authorDisplayName
-											  ) }
-
 										<img
-											alt={ author?.name }
+											alt={ authorDisplayName }
 											src={ authorAvatar }
 										/>
+										{ authorDisplayName }
 									</span>
 								</span>
 							) }

package/src/components/global-styles/screen-revisions/style.scss

@@ -8,62 +8,80 @@
 	margin: 0;
 	li {
 		margin-bottom: 0;
-		border-left: 1px solid $gray-300;
 	}
 }
 
 .edit-site-global-styles-screen-revisions__revision-item {
 	position: relative;
-	padding: $grid-unit-10 0 $grid-unit-10 $grid-unit-15;
+	padding-left: $grid-unit-20;
+	overflow: hidden;
+	cursor: pointer;
 
-	&:first-child {
-		padding-top: 0;
+	&:hover {
+		background: rgba(var(--wp-admin-theme-color--rgb), 0.04);
+		.edit-site-global-styles-screen-revisions__date {
+			color: var(--wp-admin-theme-color);
+		}
 	}
 
-	&:last-child {
-		padding-bottom: 0;
+	&::before,
+	&::after {
+		position: absolute;
+		content: "\a";
+		display: block;
 	}
 
 	&::before {
 		background: $gray-300;
 		border-radius: 50%;
-		content: "\a";
-		display: inline-block;
 		height: $grid-unit-10;
 		width: $grid-unit-10;
-		position: absolute;
-		top: 50%;
-		left: 0;
+		top: $grid-unit-20 + 2;
+		left: $grid-unit-20 + 1; // So the circle is centered on the line.
 		transform: translate(-50%, -50%);
+		z-index: 1;
 	}
 	&.is-selected::before {
 		background: var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
 	}
-}
 
-.edit-site-global-styles-screen-revisions__revision-button {
-	width: 100%;
-	height: auto;
-	display: block;
-	padding: $grid-unit-10 $grid-unit-15;
+	&::after {
+		height: 100%;
+		left: $grid-unit-20;
+		top: 0;
+		width: 0;
+		border: 0.5px solid $gray-300;
+	}
 
-	&:hover {
-		background: rgba(var(--wp-admin-theme-color--rgb), 0.04);
+	&:first-child::after {
+		top: $grid-unit-20 + 2;
+	}
 
-		.edit-site-global-styles-screen-revisions__date {
-			color: var(--wp-admin-theme-color);
+	&:last-child::after {
+		height: $grid-unit-20 + 2;
+	}
+
+	// Nested to override specificity of .components-button.
+	.edit-site-global-styles-screen-revisions__revision-button {
+		width: 100%;
+		height: auto;
+		display: block;
+		padding: $grid-unit-15 $grid-unit-15 $grid-unit-15 $grid-unit-30;
+		&:focus,
+		&:active {
+			outline: 0;
+			box-shadow: none;
 		}
 	}
 }
 
 .is-selected {
+	color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
+	background: rgba(var(--wp-admin-theme-color--rgb), 0.04);
 	.edit-site-global-styles-screen-revisions__revision-button {
-		color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
 		opacity: 1;
-		background: rgba(var(--wp-admin-theme-color--rgb), 0.04);
 	}
-
-	.edit-site-global-styles-screen-revisions__meta {
+	.edit-site-global-styles-screen-revisions__date {
 		color: var(--wp-admin-theme-color);
 	}
 }
@@ -78,20 +96,26 @@
 	flex-direction: column;
 	align-items: flex-start;
 	gap: $grid-unit-10;
+	.edit-site-global-styles-screen-revisions__date {
+		text-transform: uppercase;
+		font-weight: 600;
+		font-size: 12px;
+	}
 }
 
 .edit-site-global-styles-screen-revisions__meta {
-	color: $gray-700;
+	color: $gray-600;
 	display: flex;
-	justify-content: space-between;
+	justify-content: start;
 	width: 100%;
 	align-items: center;
-	text-align: left;
+	font-size: 12px;
 
 	img {
 		width: $grid-unit-20;
 		height: $grid-unit-20;
 		border-radius: 100%;
+		margin-right: $grid-unit-10;
 	}
 }
 

package/src/components/global-styles/screen-revisions/use-global-styles-revisions.js

@@ -32,24 +32,33 @@ export default function useGlobalStylesRevisions() {
 			__experimentalGetDirtyEntityRecords,
 			getCurrentUser,
 			getUsers,
-			getCurrentThemeGlobalStylesRevisions,
+			getRevisions,
+			__experimentalGetCurrentGlobalStylesId,
 			isResolving,
 		} = select( coreStore );
 		const dirtyEntityRecords = __experimentalGetDirtyEntityRecords();
 		const _currentUser = getCurrentUser();
 		const _isDirty = dirtyEntityRecords.length > 0;
+		const query = {
+			per_page: 100,
+		};
+		const globalStylesId = __experimentalGetCurrentGlobalStylesId();
 		const globalStylesRevisions =
-			getCurrentThemeGlobalStylesRevisions() || EMPTY_ARRAY;
+			getRevisions( 'root', 'globalStyles', globalStylesId, query ) ||
+			EMPTY_ARRAY;
 		const _authors = getUsers( SITE_EDITOR_AUTHORS_QUERY ) || EMPTY_ARRAY;
-
+		const _isResolving = isResolving( 'getRevisions', [
+			'root',
+			'globalStyles',
+			globalStylesId,
+			query,
+		] );
 		return {
 			authors: _authors,
 			currentUser: _currentUser,
 			isDirty: _isDirty,
 			revisions: globalStylesRevisions,
-			isLoadingGlobalStylesRevisions: isResolving(
-				'getCurrentThemeGlobalStylesRevisions'
-			),
+			isLoadingGlobalStylesRevisions: _isResolving,
 		};
 	}, [] );
 	return useMemo( () => {

package/src/components/global-styles/screen-root.js

@@ -27,8 +27,9 @@ import RootMenu from './root-menu';
 import StylesPreview from './preview';
 import { unlock } from '../../lock-unlock';
 
+const { useGlobalStyle } = unlock( blockEditorPrivateApis );
+
 function ScreenRoot() {
-	const { useGlobalStyle } = unlock( blockEditorPrivateApis );
 	const [ customCSS ] = useGlobalStyle( 'css' );
 
 	const { hasVariations, canEditCSS } = useSelect( ( select ) => {

package/src/components/global-styles/style.scss

@@ -191,14 +191,3 @@
 .edit-site-global-styles-sidebar__panel .block-editor-block-icon svg {
 	fill: currentColor;
 }
-
-[class][class].edit-site-global-styles-sidebar__revisions-count-badge {
-	align-items: center;
-	background: $gray-800;
-	border-radius: 2px;
-	color: $white;
-	display: inline-flex;
-	justify-content: center;
-	min-height: $icon-size;
-	min-width: $icon-size;
-}

package/src/components/global-styles/ui.js

@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import classnames from 'classnames';
-
 /**
  * WordPress dependencies
  */
@@ -50,10 +45,12 @@ import { unlock } from '../../lock-unlock';
 import { store as editSiteStore } from '../../store';
 
 const SLOT_FILL_NAME = 'GlobalStylesMenu';
+const { useGlobalStylesReset } = unlock( blockEditorPrivateApis );
 const { Slot: GlobalStylesMenuSlot, Fill: GlobalStylesMenuFill } =
 	createSlotFill( SLOT_FILL_NAME );
 
 function GlobalStylesActionMenu() {
+	const [ canReset, onReset ] = useGlobalStylesReset();
 	const { toggle } = useDispatch( preferencesStore );
 	const { canEditCSS } = useSelect( ( select ) => {
 		const { getEntityRecord, __experimentalGetCurrentGlobalStylesId } =
@@ -68,49 +65,56 @@ function GlobalStylesActionMenu() {
 			canEditCSS: !! globalStyles?._links?.[ 'wp:action-edit-css' ],
 		};
 	}, [] );
+	const { setEditorCanvasContainerView } = unlock(
+		useDispatch( editSiteStore )
+	);
 	const { goTo } = useNavigator();
-	const loadCustomCSS = () => goTo( '/css' );
+	const loadCustomCSS = () => {
+		setEditorCanvasContainerView( 'global-styles-css' );
+		goTo( '/css' );
+	};
 
 	return (
 		<GlobalStylesMenuFill>
 			<DropdownMenu icon={ moreVertical } label={ __( 'More' ) }>
 				{ ( { onClose } ) => (
-					<MenuGroup>
-						{ canEditCSS && (
-							<MenuItem onClick={ loadCustomCSS }>
-								{ __( 'Additional CSS' ) }
+					<>
+						<MenuGroup>
+							{ canEditCSS && (
+								<MenuItem onClick={ loadCustomCSS }>
+									{ __( 'Additional CSS' ) }
+								</MenuItem>
+							) }
+							<MenuItem
+								onClick={ () => {
+									toggle(
+										'core/edit-site',
+										'welcomeGuideStyles'
+									);
+									onClose();
+								} }
+							>
+								{ __( 'Welcome Guide' ) }
+							</MenuItem>
+						</MenuGroup>
+						<MenuGroup>
+							<MenuItem
+								onClick={ () => {
+									onReset();
+									onClose();
+								} }
+								disabled={ ! canReset }
+							>
+								{ __( 'Reset styles' ) }
 							</MenuItem>
-						) }
-						<MenuItem
-							onClick={ () => {
-								toggle(
-									'core/edit-site',
-									'welcomeGuideStyles'
-								);
-								onClose();
-							} }
-						>
-							{ __( 'Welcome Guide' ) }
-						</MenuItem>
-					</MenuGroup>
+						</MenuGroup>
+					</>
 				) }
 			</DropdownMenu>
 		</GlobalStylesMenuFill>
 	);
 }
 
-function RevisionsCountBadge( { className, children } ) {
-	return (
-		<span
-			className={ classnames(
-				className,
-				'edit-site-global-styles-sidebar__revisions-count-badge'
-			) }
-		>
-			{ children }
-		</span>
-	);
-}
 function GlobalStylesRevisionsMenu() {
 	const { setIsListViewOpened } = useDispatch( editSiteStore );
 	const { revisionsCount } = useSelect( ( select ) => {
@@ -127,57 +131,38 @@ function GlobalStylesRevisionsMenu() {
 				globalStyles?._links?.[ 'version-history' ]?.[ 0 ]?.count ?? 0,
 		};
 	}, [] );
-	const { useGlobalStylesReset } = unlock( blockEditorPrivateApis );
-	const [ canReset, onReset ] = useGlobalStylesReset();
 	const { goTo } = useNavigator();
 	const { setEditorCanvasContainerView } = unlock(
 		useDispatch( editSiteStore )
 	);
+	const isRevisionsOpened = useSelect(
+		( select ) =>
+			'global-styles-revisions' ===
+			unlock( select( editSiteStore ) ).getEditorCanvasContainerView(),
+		[]
+	);
 	const loadRevisions = () => {
 		setIsListViewOpened( false );
-		goTo( '/revisions' );
-		setEditorCanvasContainerView( 'global-styles-revisions' );
+
+		if ( ! isRevisionsOpened ) {
+			goTo( '/revisions' );
+			setEditorCanvasContainerView( 'global-styles-revisions' );
+		} else {
+			goTo( '/' );
+			setEditorCanvasContainerView( undefined );
+		}
 	};
 	const hasRevisions = revisionsCount > 0;
 
 	return (
 		<GlobalStylesMenuFill>
-			{ canReset || hasRevisions ? (
-				<DropdownMenu icon={ backup } label={ __( 'Revisions' ) }>
-					{ ( { onClose } ) => (
-						<MenuGroup>
-							{ hasRevisions && (
-								<MenuItem
-									onClick={ loadRevisions }
-									icon={
-										<RevisionsCountBadge>
-											{ revisionsCount }
-										</RevisionsCountBadge>
-									}
-								>
-									{ __( 'Revision history' ) }
-								</MenuItem>
-							) }
-							<MenuItem
-								onClick={ () => {
-									onReset();
-									onClose();
-								} }
-								disabled={ ! canReset }
-							>
-								{ __( 'Reset to defaults' ) }
-							</MenuItem>
-						</MenuGroup>
-					) }
-				</DropdownMenu>
-			) : (
-				<Button
-					label={ __( 'Revisions' ) }
-					icon={ backup }
-					disabled
-					__experimentalIsFocusable
-				/>
-			) }
+			<Button
+				label={ __( 'Revisions' ) }
+				icon={ backup }
+				onClick={ loadRevisions }
+				disabled={ ! hasRevisions }
+				isPressed={ isRevisionsOpened }
+			/>
 		</GlobalStylesMenuFill>
 	);
 }

package/src/components/global-styles-renderer/index.js

@@ -32,7 +32,7 @@ function useGlobalStylesRenderer() {
 			styles: [ ...nonGlobalStyles, ...styles ],
 			__experimentalFeatures: settings,
 		} );
-	}, [ styles, settings ] );
+	}, [ styles, settings, updateSettings, getSettings ] );
 }
 
 export function GlobalStylesRenderer() {

package/src/components/header-edit-mode/document-actions/index.js

@@ -24,8 +24,9 @@ import {
 	symbol,
 } from '@wordpress/icons';
 import { displayShortcut } from '@wordpress/keycodes';
-import { useState, useEffect, useRef } from '@wordpress/element';
 import { store as coreStore } from '@wordpress/core-data';
+import { store as editorStore } from '@wordpress/editor';
+import { useRef, useState, useEffect } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -56,19 +57,18 @@ export default function DocumentActions() {
 }
 
 function PageDocumentActions() {
-	const { hasPageContentFocus, hasResolved, isFound, title } = useSelect(
+	const { isEditingPage, hasResolved, isFound, title } = useSelect(
 		( select ) => {
-			const {
-				hasPageContentFocus: _hasPageContentFocus,
-				getEditedPostContext,
-			} = select( editSiteStore );
+			const { getEditedPostContext } = select( editSiteStore );
 			const { getEditedEntityRecord, hasFinishedResolution } =
 				select( coreStore );
+			const { getRenderingMode } = select( editorStore );
 			const context = getEditedPostContext();
 			const queryArgs = [ 'postType', context.postType, context.postId ];
 			const page = getEditedEntityRecord( ...queryArgs );
 			return {
-				hasPageContentFocus: _hasPageContentFocus(),
+				isEditingPage:
+					!! context.postId && getRenderingMode() !== 'template-only',
 				hasResolved: hasFinishedResolution(
 					'getEditedEntityRecord',
 					queryArgs
@@ -80,16 +80,16 @@ function PageDocumentActions() {
 		[]
 	);
 
-	const { setHasPageContentFocus } = useDispatch( editSiteStore );
+	const { setRenderingMode } = useDispatch( editorStore );
+	const [ isAnimated, setIsAnimated ] = useState( false );
+	const isLoading = useRef( true );
 
-	const [ hasEditedTemplate, setHasEditedTemplate ] = useState( false );
-	const prevHasPageContentFocus = useRef( false );
 	useEffect( () => {
-		if ( prevHasPageContentFocus.current && ! hasPageContentFocus ) {
-			setHasEditedTemplate( true );
+		if ( ! isLoading.current ) {
+			setIsAnimated( true );
 		}
-		prevHasPageContentFocus.current = hasPageContentFocus;
-	}, [ hasPageContentFocus ] );
+		isLoading.current = false;
+	}, [ isEditingPage ] );
 
 	if ( ! hasResolved ) {
 		return null;
@@ -103,10 +103,10 @@ function PageDocumentActions() {
 		);
 	}
 
-	return hasPageContentFocus ? (
+	return isEditingPage ? (
 		<BaseDocumentActions
 			className={ classnames( 'is-page', {
-				'is-animated': hasEditedTemplate,
+				'is-animated': isAnimated,
 			} ) }
 			icon={ pageIcon }
 		>
@@ -114,8 +114,10 @@ function PageDocumentActions() {
 		</BaseDocumentActions>
 	) : (
 		<TemplateDocumentActions
-			className="is-animated"
-			onBack={ () => setHasPageContentFocus( true ) }
+			className={ classnames( {
+				'is-animated': isAnimated,
+			} ) }
+			onBack={ () => setRenderingMode( 'template-locked' ) }
 		/>
 	);
 }