Global styles revisions: add a reset to default revision

packages/edit-site/src/components/global-styles/screen-revisions/index.js

@@ -79,9 +79,9 @@ function ScreenRevisions() {
 
 	const selectRevision = ( revision ) => {
 		setGlobalStylesRevision( {
-			styles: revision?.styles,
-			settings: revision?.settings,
-			behaviors: revision?.behaviors,
+			styles: revision?.styles || {},
+			settings: revision?.settings || {},
+			behaviors: revision?.behaviors || {},
 			id: revision?.id,
 		} );
 		setSelectedRevisionId( revision?.id );
@@ -137,7 +137,9 @@ function ScreenRevisions() {
 										}
 									} }
 								>
-									{ __( 'Apply' ) }
+									{ globalStylesRevision?.id === 'parent'
+										? __( 'Reset to defaults' )
+										: __( 'Apply' ) }
 								</Button>
 							</SidebarFixedBottom>
 						) }

packages/edit-site/src/components/global-styles/screen-revisions/revisions-buttons.js

@@ -9,6 +9,8 @@ import classnames from 'classnames';
 import { __, sprintf } from '@wordpress/i18n';
 import { Button } from '@wordpress/components';
 import { dateI18n, getDate, humanTimeDiff, getSettings } from '@wordpress/date';
+import { store as coreStore } from '@wordpress/core-data';
+import { useSelect } from '@wordpress/data';
 
 /**
  * Returns a button label for the revision.
@@ -19,13 +21,18 @@ import { dateI18n, getDate, humanTimeDiff, getSettings } from '@wordpress/date';
 function getRevisionLabel( revision ) {
 	const authorDisplayName = revision?.author?.name || __( 'User' );
 
+	if ( 'parent' === revision?.id ) {
+		return __( 'Reset the styles to the theme defaults' );
+	}
+
 	if ( 'unsaved' === revision?.id ) {
 		return sprintf(
 			/* translators: %s author display name */
 			__( 'Unsaved changes by %s' ),
 			authorDisplayName
 		);
 	}
+
 	const formattedDate = dateI18n(
 		getSettings().formats.datetimeAbbreviated,
 		getDate( revision?.modified )
@@ -58,6 +65,10 @@ function getRevisionLabel( revision ) {
  * @return {JSX.Element} The modal component.
  */
 function RevisionsButtons( { userRevisions, selectedRevisionId, onChange } ) {
+	const currentTheme = useSelect(
+		( select ) => select( coreStore ).getCurrentTheme(),
+		[]
+	);
 	return (
 		<ol
 			className="edit-site-global-styles-screen-revisions__revisions-list"
@@ -72,13 +83,15 @@ function RevisionsButtons( { userRevisions, selectedRevisionId, onChange } ) {
 				const isSelected = selectedRevisionId
 					? selectedRevisionId === revision?.id
 					: index === 0;
+				const isReset = 'parent' === revision?.id;
 
 				return (
 					<li
 						className={ classnames(
 							'edit-site-global-styles-screen-revisions__revision-item',
 							{
 								'is-selected': isSelected,
+								'is-reset': isReset,
 							}
 						) }
 						key={ id }
@@ -91,29 +104,41 @@ function RevisionsButtons( { userRevisions, selectedRevisionId, onChange } ) {
 							} }
 							label={ getRevisionLabel( revision ) }
 						>
-							<span className="edit-site-global-styles-screen-revisions__description">
-								<time dateTime={ modified }>
-									{ humanTimeDiff( modified ) }
-								</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
-										  ) }
+							{ 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 }
+									</span>
+								</span>
+							) : (
+								<span className="edit-site-global-styles-screen-revisions__description">
+									<time dateTime={ modified }>
+										{ humanTimeDiff( modified ) }
+									</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 }
-										src={ authorAvatar }
-									/>
+										<img
+											alt={ author?.name }
+											src={ authorAvatar }
+										/>
+									</span>
 								</span>
-							</span>
+							) }
 						</Button>
 					</li>
 				);

packages/edit-site/src/components/global-styles/screen-revisions/test/use-global-styles-revisions.js

@@ -71,6 +71,11 @@ describe( 'useGlobalStylesRevisions', () => {
 				settings: {},
 				styles: {},
 			},
+			{
+				id: 'parent',
+				settings: {},
+				styles: {},
+			},
 		] );
 	} );
 
@@ -106,6 +111,11 @@ describe( 'useGlobalStylesRevisions', () => {
 				settings: {},
 				styles: {},
 			},
+			{
+				id: 'parent',
+				settings: {},
+				styles: {},
+			},
 		] );
 	} );
 

packages/edit-site/src/components/global-styles/screen-revisions/use-global-styles-revisions.js

@@ -99,6 +99,12 @@ export default function useGlobalStylesRevisions() {
 
 				_modifiedRevisions.unshift( unsavedRevision );
 			}
+
+			_modifiedRevisions.push( {
+				id: 'parent',
+				styles: {},
+				settings: {},
+			} );
 		}
 
 		return {

packages/edit-site/src/components/global-styles/ui.js

@@ -139,7 +139,7 @@ function GlobalStylesRevisionsMenu() {
 		goTo( '/revisions' );
 		setEditorCanvasContainerView( 'global-styles-revisions' );
 	};
-	const hasRevisions = revisionsCount >= 2;
+	const hasRevisions = revisionsCount >= 1;
 
 	return (
 		<GlobalStylesMenuFill>

test/e2e/specs/site-editor/user-global-styles-revisions.spec.js

@@ -68,6 +68,7 @@ test.describe( 'Global styles revisions', () => {
 			name: /^Changes saved by /,
 		} );
 
+		// There should be 2 revisions not including the reset to theme defaults button.
 		await expect( revisionButtons ).toHaveCount(
 			currentRevisions.length + 2
 		);
@@ -116,6 +117,25 @@ test.describe( 'Global styles revisions', () => {
 			.click();
 		await editor.saveSiteEditorEntities();
 	} );
+
+	test( 'should have a reset to defaults button', async ( {
+		page,
+		editor,
+		userGlobalStylesRevisions,
+	} ) => {
+		await editor.canvas.click( 'body' );
+		await userGlobalStylesRevisions.openStylesPanel();
+		await userGlobalStylesRevisions.openRevisions();
+		const lastRevisionButton = page
+			.getByLabel( 'Global styles revisions' )
+			.getByRole( 'button' )
+			.last();
+		await expect( lastRevisionButton ).toContainText( 'Default styles' );
+		await lastRevisionButton.click();
+		await expect(
+			page.getByRole( 'button', { name: 'Reset to defaults' } )
+		).toBeVisible();
+	} );
 } );
 
 class UserGlobalStylesRevisions {