@wordpress/edit-site 5.24.1 → 5.25.1-next.79a6196f.0

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

@@ -1,11 +1,8 @@
-
-.edit-site-global-styles-screen-revisions {
-	margin: $grid-unit-20;
-}
-
 .edit-site-global-styles-screen-revisions__revisions-list {
 	list-style: none;
-	margin: 0;
+	margin: 0 $grid-unit-20 $grid-unit-20 $grid-unit-20;
+	// Forces subsequent flex items to the bottom.
+	flex-grow: 1;
 	li {
 		margin-bottom: 0;
 	}
@@ -13,9 +10,9 @@
 
 .edit-site-global-styles-screen-revisions__revision-item {
 	position: relative;
-	padding-left: $grid-unit-20;
-	overflow: hidden;
 	cursor: pointer;
+	display: flex;
+	flex-direction: column;
 
 	&:hover {
 		background: rgba(var(--wp-admin-theme-color--rgb), 0.04);
@@ -40,9 +37,20 @@
 		left: $grid-unit-20 + 1; // So the circle is centered on the line.
 		transform: translate(-50%, -50%);
 		z-index: 1;
+
+		// This border serves as a background color in Windows High Contrast mode.
+		border: 4px solid transparent;
 	}
-	&.is-selected::before {
-		background: var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
+	&.is-selected {
+		border-radius: $radius-block-ui;
+
+		// Only visible in Windows High Contrast mode.
+		outline: 3px solid transparent;
+		outline-offset: -2px;
+
+		&::before {
+			background: var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
+		}
 	}
 
 	&::after {
@@ -66,12 +74,10 @@
 		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;
-		}
+		padding: $grid-unit-15 $grid-unit-15 $grid-unit-10 $grid-unit-50;
+		z-index: 1;
+		position: relative;
+		outline-offset: -2px;
 	}
 }
 
@@ -86,9 +92,17 @@
 	}
 }
 
-.edit-site-global-styles-screen-revisions__button {
-	justify-content: center;
-	width: 100%;
+.edit-site-global-styles-screen-revisions__apply-button.is-primary,
+.edit-site-global-styles-screen-revisions__applied-text {
+	align-self: flex-start;
+	// Left margin = left padding of .edit-site-global-styles-screen-revisions__revision-button.
+	margin: 0 $grid-unit-15 $grid-unit-15 $grid-unit-50;
+}
+
+.edit-site-global-styles-screen-revisions__applied-text {
+	color: $gray-600;
+	font-size: 12px;
+	font-style: italic;
 }
 
 .edit-site-global-styles-screen-revisions__description {
@@ -103,14 +117,15 @@
 	}
 }
 
+.edit-site-global-styles-screen-revisions__changes,
 .edit-site-global-styles-screen-revisions__meta {
 	color: $gray-600;
 	display: flex;
 	justify-content: start;
 	width: 100%;
-	align-items: center;
+	align-items: flex-start;
 	font-size: 12px;
-
+	text-align: left;
 	img {
 		width: $grid-unit-20;
 		height: $grid-unit-20;
@@ -122,3 +137,53 @@
 .edit-site-global-styles-screen-revisions__loading {
 	margin: $grid-unit-30 auto !important;
 }
+
+.edit-site-global-styles-screen-revisions__changes {
+	margin-bottom: $grid-unit-05;
+	text-align: left;
+	color: $gray-900;
+	line-height: $default-line-height;
+}
+
+.edit-site-global-styles-screen-revisions__pagination.edit-site-global-styles-screen-revisions__pagination {
+	justify-content: space-between;
+	gap: 2px;
+	.edit-site-pagination__total {
+		position: absolute;
+		left: -1000px;
+		height: 1px;
+		margin: -1px;
+		overflow: hidden;
+	}
+
+	.components-text {
+		font-size: 12px;
+		// `will-change` is required because something about flex props prevents
+		// Safari from rendering the page / total text.
+		will-change: opacity;
+	}
+	.components-button.is-tertiary {
+		font-size: 28px;
+		font-weight: 200;
+		color: $gray-900;
+		margin-bottom: $grid-unit-05;
+		line-height: 1.2;
+	}
+	.components-button.is-tertiary:disabled {
+		color: $gray-600;
+	}
+	.components-button.is-tertiary:hover {
+		background: transparent;
+	}
+}
+
+.edit-site-global-styles-screen-revisions__footer {
+	height: $grid-unit-70;
+	z-index: 1;
+	position: sticky;
+	min-width: 100%;
+	bottom: 0;
+	background: $white;
+	padding: $grid-unit-15;
+	border-top: $border-width solid $gray-300;
+}

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

@@ -50,6 +50,7 @@ describe( 'useGlobalStylesRevisions', () => {
 			},
 		],
 		isLoadingGlobalStylesRevisions: false,
+		revisionsCount: 1,
 	};
 
 	it( 'returns loaded revisions with no unsaved changes', () => {
@@ -158,4 +159,70 @@ describe( 'useGlobalStylesRevisions', () => {
 		expect( hasUnsavedChanges ).toBe( false );
 		expect( revisions ).toEqual( [] );
 	} );
+
+	it( 'should prepend unsaved changes item and append reset item to paginated results', () => {
+		useSelect.mockImplementation( () => ( {
+			...selectValue,
+			revisionsCount: 2,
+			isDirty: true,
+		} ) );
+
+		// Prepend unsaved changes item to paginated results.
+		const { result: resultPrepend } = renderHook( () =>
+			useGlobalStylesRevisions( {
+				query: {
+					per_page: 1,
+					page: 1,
+				},
+			} )
+		);
+		expect( resultPrepend.current.revisions ).toEqual( [
+			{
+				author: {
+					avatar_urls: {},
+					name: 'fred',
+				},
+				id: 'unsaved',
+				modified: resultPrepend.current.revisions[ 0 ].modified,
+				settings: 'cake',
+				styles: 'ice-cream',
+			},
+			{
+				author: {
+					id: 4,
+					name: 'sam',
+				},
+				id: 1,
+				isLatest: true,
+				settings: {},
+				styles: {},
+			},
+		] );
+
+		// Append reset item to paginated results.
+		const { result: resultAppend } = renderHook( () =>
+			useGlobalStylesRevisions( {
+				query: {
+					per_page: 1,
+					page: 2,
+				},
+			} )
+		);
+		expect( resultAppend.current.revisions ).toEqual( [
+			{
+				author: {
+					id: 4,
+					name: 'sam',
+				},
+				id: 1,
+				settings: {},
+				styles: {},
+			},
+			{
+				id: 'parent',
+				settings: {},
+				styles: {},
+			},
+		] );
+	} );
 } );

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

@@ -17,62 +17,77 @@ const SITE_EDITOR_AUTHORS_QUERY = {
 	context: 'view',
 	capabilities: [ 'edit_theme_options' ],
 };
+const DEFAULT_QUERY = { per_page: 100, page: 1 };
 const EMPTY_ARRAY = [];
 const { GlobalStylesContext } = unlock( blockEditorPrivateApis );
-export default function useGlobalStylesRevisions() {
+export default function useGlobalStylesRevisions( { query } = {} ) {
 	const { user: userConfig } = useContext( GlobalStylesContext );
+	const _query = { ...DEFAULT_QUERY, ...query };
 	const {
 		authors,
 		currentUser,
 		isDirty,
 		revisions,
 		isLoadingGlobalStylesRevisions,
-	} = useSelect( ( select ) => {
-		const {
-			__experimentalGetDirtyEntityRecords,
-			getCurrentUser,
-			getUsers,
-			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 =
-			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,
-		};
-	}, [] );
+		revisionsCount,
+	} = useSelect(
+		( select ) => {
+			const {
+				__experimentalGetDirtyEntityRecords,
+				getCurrentUser,
+				getUsers,
+				getRevisions,
+				__experimentalGetCurrentGlobalStylesId,
+				getEntityRecord,
+				isResolving,
+			} = select( coreStore );
+			const dirtyEntityRecords = __experimentalGetDirtyEntityRecords();
+			const _currentUser = getCurrentUser();
+			const _isDirty = dirtyEntityRecords.length > 0;
+			const globalStylesId = __experimentalGetCurrentGlobalStylesId();
+			const globalStyles = globalStylesId
+				? getEntityRecord( 'root', 'globalStyles', globalStylesId )
+				: undefined;
+			const _revisionsCount =
+				globalStyles?._links?.[ 'version-history' ]?.[ 0 ]?.count ?? 0;
+			const globalStylesRevisions =
+				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,
+				revisionsCount: _revisionsCount,
+			};
+		},
+		[ query ]
+	);
 	return useMemo( () => {
-		let _modifiedRevisions = [];
 		if ( ! authors.length || isLoadingGlobalStylesRevisions ) {
 			return {
-				revisions: _modifiedRevisions,
+				revisions: EMPTY_ARRAY,
 				hasUnsavedChanges: isDirty,
 				isLoading: true,
+				revisionsCount,
 			};
 		}
 
 		// Adds author details to each revision.
-		_modifiedRevisions = revisions.map( ( revision ) => {
+		const _modifiedRevisions = revisions.map( ( revision ) => {
 			return {
 				...revision,
 				author: authors.find(
@@ -81,9 +96,14 @@ export default function useGlobalStylesRevisions() {
 			};
 		} );
 
-		if ( _modifiedRevisions.length ) {
+		const fetchedRevisionsCount = revisions.length;
+
+		if ( fetchedRevisionsCount ) {
 			// Flags the most current saved revision.
-			if ( _modifiedRevisions[ 0 ].id !== 'unsaved' ) {
+			if (
+				_modifiedRevisions[ 0 ].id !== 'unsaved' &&
+				_query.page === 1
+			) {
 				_modifiedRevisions[ 0 ].isLatest = true;
 			}
 
@@ -92,7 +112,8 @@ export default function useGlobalStylesRevisions() {
 				isDirty &&
 				userConfig &&
 				Object.keys( userConfig ).length > 0 &&
-				currentUser
+				currentUser &&
+				_query.page === 1
 			) {
 				const unsavedRevision = {
 					id: 'unsaved',
@@ -108,17 +129,23 @@ export default function useGlobalStylesRevisions() {
 				_modifiedRevisions.unshift( unsavedRevision );
 			}
 
-			_modifiedRevisions.push( {
-				id: 'parent',
-				styles: {},
-				settings: {},
-			} );
+			if (
+				_query.page === Math.ceil( revisionsCount / _query.per_page )
+			) {
+				// Adds an item for the default theme styles.
+				_modifiedRevisions.push( {
+					id: 'parent',
+					styles: {},
+					settings: {},
+				} );
+			}
 		}
 
 		return {
 			revisions: _modifiedRevisions,
 			hasUnsavedChanges: isDirty,
 			isLoading: false,
+			revisionsCount,
 		};
 	}, [
 		isDirty,

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

@@ -6,7 +6,6 @@ import {
 	__experimentalNavigatorScreen as NavigatorScreen,
 	__experimentalUseNavigator as useNavigator,
 	createSlotFill,
-	Button,
 	DropdownMenu,
 	MenuGroup,
 	MenuItem,
@@ -19,7 +18,7 @@ import {
 } from '@wordpress/block-editor';
 import { __ } from '@wordpress/i18n';
 import { store as preferencesStore } from '@wordpress/preferences';
-import { backup, moreVertical } from '@wordpress/icons';
+import { moreVertical } from '@wordpress/icons';
 import { store as coreStore } from '@wordpress/core-data';
 import { useEffect } from '@wordpress/element';
 
@@ -115,58 +114,6 @@ function GlobalStylesActionMenu() {
 	);
 }
 
-function GlobalStylesRevisionsMenu() {
-	const { setIsListViewOpened } = useDispatch( editSiteStore );
-	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 { goTo } = useNavigator();
-	const { setEditorCanvasContainerView } = unlock(
-		useDispatch( editSiteStore )
-	);
-	const isRevisionsOpened = useSelect(
-		( select ) =>
-			'global-styles-revisions' ===
-			unlock( select( editSiteStore ) ).getEditorCanvasContainerView(),
-		[]
-	);
-	const loadRevisions = () => {
-		setIsListViewOpened( false );
-
-		if ( ! isRevisionsOpened ) {
-			goTo( '/revisions' );
-			setEditorCanvasContainerView( 'global-styles-revisions' );
-		} else {
-			goTo( '/' );
-			setEditorCanvasContainerView( undefined );
-		}
-	};
-	const hasRevisions = revisionsCount > 0;
-
-	return (
-		<GlobalStylesMenuFill>
-			<Button
-				label={ __( 'Revisions' ) }
-				icon={ backup }
-				onClick={ loadRevisions }
-				disabled={ ! hasRevisions }
-				isPressed={ isRevisionsOpened }
-			/>
-		</GlobalStylesMenuFill>
-	);
-}
-
 function GlobalStylesNavigationScreen( { className, ...props } ) {
 	return (
 		<NavigatorScreen
@@ -283,7 +230,7 @@ function GlobalStylesBlockLink() {
 }
 
 function GlobalStylesEditorCanvasContainerLink() {
-	const { goTo, location } = useNavigator();
+	const { goTo } = useNavigator();
 	const editorCanvasContainerView = useSelect(
 		( select ) =>
 			unlock( select( editSiteStore ) ).getEditorCanvasContainerView(),
@@ -294,25 +241,18 @@ function GlobalStylesEditorCanvasContainerLink() {
 	// to the appropriate screen. This effectively allows deep linking to the
 	// desired screens from outside the global styles navigation provider.
 	useEffect( () => {
-		if ( editorCanvasContainerView === 'global-styles-revisions' ) {
-			// Switching to the revisions container view should
-			// redirect to the revisions screen.
-			goTo( '/revisions' );
-		} else if (
-			!! editorCanvasContainerView &&
-			location?.path === '/revisions'
-		) {
-			// Switching to any container other than revisions should
-			// redirect from the revisions screen to the root global styles screen.
-			goTo( '/' );
-		} else if ( editorCanvasContainerView === 'global-styles-css' ) {
-			goTo( '/css' );
+		switch ( editorCanvasContainerView ) {
+			case 'global-styles-revisions':
+			case 'global-styles-revisions:style-book':
+				goTo( '/revisions' );
+				break;
+			case 'global-styles-css':
+				goTo( '/css' );
+				break;
+			default:
+				goTo( '/' );
+				break;
 		}
-
-		// location?.path is not a dependency because we don't want to track it.
-		// Doing so will cause an infinite loop. We could abstract logic to avoid
-		// having to disable the check later.
-		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [ editorCanvasContainerView, goTo ] );
 }
 
@@ -403,7 +343,6 @@ function GlobalStylesUI() {
 				<GlobalStylesStyleBook />
 			) }
 
-			<GlobalStylesRevisionsMenu />
 			<GlobalStylesActionMenu />
 			<GlobalStylesBlockLink />
 			<GlobalStylesEditorCanvasContainerLink />