Sending and checking for settings as well since some style variations…

… might have different settings we'd want to reinstate. Doing a deep equality check to highlight the currently selected revision.
WordPress · Dec 22, 2022 · e7c2d5f · e7c2d5f
1 parent 94fbe0f
commit e7c2d5f
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 19 deletions.
diff --git a/lib/compat/wordpress-6.2/class-gutenberg-rest-global-styles-controller-6-2.php b/lib/compat/wordpress-6.2/class-gutenberg-rest-global-styles-controller-6-2.php
@@ -154,6 +154,7 @@ public function prepare_item_for_response( $post, $request ) { // phpcs:ignore V
 					$modified_gmt        = strtotime( $revision->post_modified_gmt . ' +0000' );
 					$user_revisions[]    = array(
 						'styles'    => ! empty( $config['styles'] ) ? $config['styles'] : new stdClass(),
+						'settings'  => ! empty( $config['settings'] ) ? $config['settings'] : new stdClass(),
 						'dateShort' => date_i18n( _x( 'j M @ H:i', 'revision date short format' ), $modified ),
 						/* translators: %s: Human-readable time difference. */
 						'timeAgo'   => sprintf( __( '%s ago' ), human_time_diff( $modified_gmt, $now_gmt ) ),

diff --git a/packages/edit-site/src/components/global-styles/screen-revisions.js b/packages/edit-site/src/components/global-styles/screen-revisions.js
@@ -3,6 +3,7 @@
  */
 import { set } from 'lodash';
 import classnames from 'classnames';
+import fastDeepEqual from 'fast-deep-equal/es6';
 
 /**
  * WordPress dependencies
@@ -20,10 +21,21 @@ import ScreenHeader from './header';
 import Subtitle from './subtitle';
 import { GlobalStylesContext } from './context';
 
+// Taken from packages/edit-site/src/hooks/push-changes-to-global-styles/index.js.
+// TODO abstract
 function cloneDeep( object ) {
 	return ! object ? {} : JSON.parse( JSON.stringify( object ) );
 }
 
+// Taken from packages/edit-site/src/components/global-styles/screen-style-variations.js.
+// TODO abstract
+function compareVariations( a, b ) {
+	return (
+		fastDeepEqual( a.styles, b.styles ) &&
+		fastDeepEqual( a.settings, b.settings )
+	);
+}
+
 function ScreenRevisions() {
 	const { user: userConfig, setUserConfig } =
 		useContext( GlobalStylesContext );
@@ -43,21 +55,33 @@ function ScreenRevisions() {
 			userRevisions: record?.revisions || [],
 		};
 	}, [] );
-	const [ currentRevision, setCurrentRevision ] = useState(
-		userRevisions?.[ 0 ].id
-	);
+
+	const hasRevisions = userRevisions.length > 0;
+	const [ currentRevisionId, setCurrentRevisionId ] = useState( () => {
+		if ( ! hasRevisions ) {
+			return 0;
+		}
+		let currentRevision = userRevisions[ 0 ];
+		for ( let i = 0; i < userRevisions.length; i++ ) {
+			if ( compareVariations( userConfig, userRevisions[ i ] ) ) {
+				currentRevision = userRevisions[ i ];
+				break;
+			}
+		}
+		return currentRevision?.id;
+	} );
+
 	const restoreRevision = useCallback(
 		( revision ) => {
 			const newUserConfig = cloneDeep( userConfig );
 			set( newUserConfig, [ 'styles' ], revision?.styles );
+			set( newUserConfig, [ 'settings' ], revision?.settings );
 			setUserConfig( () => newUserConfig );
-			setCurrentRevision( revision?.id );
+			setCurrentRevisionId( revision?.id );
 		},
 		[ userConfig ]
 	);
 
-	const hasRevisions = userRevisions.length > 0;
-
 	return (
 		<>
 			<ScreenHeader
@@ -69,25 +93,21 @@ function ScreenRevisions() {
 			<div className="edit-site-global-styles-screen-revisions">
 				<VStack spacing={ 3 }>
 					<Subtitle>{ __( 'REVISIONS' ) }</Subtitle>
-					{ hasRevisions
-						? userRevisions.map( ( revision ) => (
+					{ hasRevisions ? (
+						userRevisions.map( ( revision ) => {
+							const isActive = revision?.id === currentRevisionId;
+							return (
 								<Button
 									className={ classnames(
 										'edit-site-global-styles-screen-revisions__revision-item',
 										{
-											'is-current':
-												currentRevision === revision.id,
+											'is-current': isActive,
 										}
 									) }
 									variant={
-										currentRevision === revision.id
-											? 'tertiary'
-											: 'secondary'
-									}
-									isPressed={
-										currentRevision === revision.id
+										isActive ? 'tertiary' : 'secondary'
 									}
-									disabled={ currentRevision === revision.id }
+									disabled={ isActive }
 									key={ `user-styles-revision-${ revision.id }` }
 									onClick={ () => {
 										restoreRevision( revision );
@@ -100,8 +120,11 @@ function ScreenRevisions() {
 										({ revision.dateShort })
 									</span>
 								</Button>
-						  ) )
-						: __( 'There are currently no revisions.' ) }
+							);
+						} )
+					) : (
+						<p>{ __( 'There are currently no revisions.' ) }</p>
+					) }
 				</VStack>
 			</div>
 		</>