@wordpress/edit-site 5.23.0 → 5.24.0

package/src/components/global-styles/screen-block-list.js

@@ -9,7 +9,13 @@ import {
 	__experimentalHStack as HStack,
 } from '@wordpress/components';
 import { useSelect } from '@wordpress/data';
-import { useState, useMemo, useEffect, useRef } from '@wordpress/element';
+import {
+	useState,
+	useEffect,
+	useRef,
+	useDeferredValue,
+	memo,
+} from '@wordpress/element';
 import {
 	BlockIcon,
 	privateApis as blockEditorPrivateApis,
@@ -99,22 +105,16 @@ function BlockMenuItem( { block } ) {
 	);
 }
 
-function ScreenBlockList() {
+function BlockList( { filterValue } ) {
 	const sortedBlockTypes = useSortedBlockTypes();
-	const [ filterValue, setFilterValue ] = useState( '' );
 	const debouncedSpeak = useDebounce( speak, 500 );
-	const isMatchingSearchTerm = useSelect(
-		( select ) => select( blocksStore ).isMatchingSearchTerm,
-		[]
-	);
-	const filteredBlockTypes = useMemo( () => {
-		if ( ! filterValue ) {
-			return sortedBlockTypes;
-		}
-		return sortedBlockTypes.filter( ( blockType ) =>
-			isMatchingSearchTerm( blockType, filterValue )
-		);
-	}, [ filterValue, sortedBlockTypes, isMatchingSearchTerm ] );
+	const { isMatchingSearchTerm } = useSelect( blocksStore );
+
+	const filteredBlockTypes = ! filterValue
+		? sortedBlockTypes
+		: sortedBlockTypes.filter( ( blockType ) =>
+				isMatchingSearchTerm( blockType, filterValue )
+		  );
 
 	const blockTypesListRef = useRef();
 
@@ -140,6 +140,27 @@ function ScreenBlockList() {
 		debouncedSpeak( resultsFoundMessage, count );
 	}, [ filterValue, debouncedSpeak ] );
 
+	return (
+		<div
+			ref={ blockTypesListRef }
+			className="edit-site-block-types-item-list"
+		>
+			{ filteredBlockTypes.map( ( block ) => (
+				<BlockMenuItem
+					block={ block }
+					key={ 'menu-itemblock-' + block.name }
+				/>
+			) ) }
+		</div>
+	);
+}
+
+const MemoizedBlockList = memo( BlockList );
+
+function ScreenBlockList() {
+	const [ filterValue, setFilterValue ] = useState( '' );
+	const deferredFilterValue = useDeferredValue( filterValue );
+
 	return (
 		<>
 			<ScreenHeader
@@ -156,17 +177,7 @@ function ScreenBlockList() {
 				label={ __( 'Search for blocks' ) }
 				placeholder={ __( 'Search' ) }
 			/>
-			<div
-				ref={ blockTypesListRef }
-				className="edit-site-block-types-item-list"
-			>
-				{ filteredBlockTypes.map( ( block ) => (
-					<BlockMenuItem
-						block={ block }
-						key={ 'menu-itemblock-' + block.name }
-					/>
-				) ) }
-			</div>
+			<MemoizedBlockList filterValue={ deferredFilterValue } />
 		</>
 	);
 }

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

@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { __ } from '@wordpress/i18n';
+import { __, sprintf } from '@wordpress/i18n';
 import {
 	Button,
 	__experimentalUseNavigator as useNavigator,
@@ -10,6 +10,7 @@ import {
 	__experimentalSpacer as Spacer,
 } from '@wordpress/components';
 import { useSelect, useDispatch } from '@wordpress/data';
+import { store as coreStore } from '@wordpress/core-data';
 import { useContext, useState, useEffect } from '@wordpress/element';
 import {
 	privateApis as blockEditorPrivateApis,
@@ -35,14 +36,36 @@ function ScreenRevisions() {
 	const { goTo } = useNavigator();
 	const { user: currentEditorGlobalStyles, setUserConfig } =
 		useContext( GlobalStylesContext );
-	const { blocks, editorCanvasContainerView } = useSelect( ( select ) => {
-		return {
-			editorCanvasContainerView: unlock(
-				select( editSiteStore )
-			).getEditorCanvasContainerView(),
-			blocks: select( blockEditorStore ).getBlocks(),
-		};
-	}, [] );
+	const { blocks, editorCanvasContainerView, revisionsCount } = useSelect(
+		( select ) => {
+			const {
+				getEntityRecord,
+				__experimentalGetCurrentGlobalStylesId,
+				__experimentalGetDirtyEntityRecords,
+			} = select( coreStore );
+			const isDirty = __experimentalGetDirtyEntityRecords().length > 0;
+			const globalStylesId = __experimentalGetCurrentGlobalStylesId();
+			const globalStyles = globalStylesId
+				? getEntityRecord( 'root', 'globalStyles', globalStylesId )
+				: undefined;
+			let _revisionsCount =
+				globalStyles?._links?.[ 'version-history' ]?.[ 0 ]?.count || 0;
+			// one for the reset item.
+			_revisionsCount++;
+			// one for any dirty changes (unsaved).
+			if ( isDirty ) {
+				_revisionsCount++;
+			}
+			return {
+				editorCanvasContainerView: unlock(
+					select( editSiteStore )
+				).getEditorCanvasContainerView(),
+				blocks: select( blockEditorStore ).getBlocks(),
+				revisionsCount: _revisionsCount,
+			};
+		},
+		[]
+	);
 	const { revisions, isLoading, hasUnsavedChanges } =
 		useGlobalStylesRevisions();
 	const [ currentlySelectedRevision, setCurrentlySelectedRevision ] =
@@ -61,6 +84,7 @@ function ScreenRevisions() {
 
 	const onCloseRevisions = () => {
 		goTo( '/' ); // Return to global styles main panel.
+		setEditorCanvasContainerView( undefined );
 	};
 
 	const restoreRevision = ( revision ) => {
@@ -119,10 +143,15 @@ function ScreenRevisions() {
 	return (
 		<>
 			<ScreenHeader
-				title={ __( 'Revisions' ) }
+				title={
+					revisionsCount &&
+					// translators: %s: number of revisions.
+					sprintf( __( 'Revisions (%s)' ), revisionsCount )
+				}
 				description={ __(
 					'Click on previously saved styles to preview them. To restore a selected version to the editor, hit "Apply." When you\'re ready, use the Save button to save your changes.'
 				) }
+				onBack={ onCloseRevisions }
 			/>
 			{ isLoading && (
 				<Spinner className="edit-site-global-styles-screen-revisions__loading" />

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/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;
-}