From ef2ce3b7c3c9555da4fed4e20652b3997f68ccf0 Mon Sep 17 00:00:00 2001 From: Carlos Bravo Date: Tue, 25 Jul 2023 12:09:49 +0200 Subject: [PATCH 1/3] Add View revision changes link --- .../global-styles/screen-revisions/index.js | 69 +++++++++++++------ 1 file changed, 49 insertions(+), 20 deletions(-) diff --git a/packages/edit-site/src/components/global-styles/screen-revisions/index.js b/packages/edit-site/src/components/global-styles/screen-revisions/index.js index acdc4fdc3dc557..ce4b7fddc353f3 100644 --- a/packages/edit-site/src/components/global-styles/screen-revisions/index.js +++ b/packages/edit-site/src/components/global-styles/screen-revisions/index.js @@ -8,6 +8,9 @@ import { __experimentalConfirmDialog as ConfirmDialog, Spinner, __experimentalSpacer as Spacer, + MenuItem, + VisuallyHidden, + __experimentalVStack as VStack, } from '@wordpress/components'; import { useSelect, useDispatch } from '@wordpress/data'; import { useContext, useState, useEffect } from '@wordpress/element'; @@ -15,6 +18,7 @@ import { privateApis as blockEditorPrivateApis, store as blockEditorStore, } from '@wordpress/block-editor'; +import { external } from '@wordpress/icons'; /** * Internal dependencies @@ -26,6 +30,7 @@ import SidebarFixedBottom from '../../sidebar-edit-mode/sidebar-fixed-bottom'; import { store as editSiteStore } from '../../../store'; import useGlobalStylesRevisions from './use-global-styles-revisions'; import RevisionsButtons from './revisions-buttons'; +import { addQueryArgs } from '@wordpress/url'; const { GlobalStylesContext, areGlobalStyleConfigsEqual } = unlock( blockEditorPrivateApis @@ -118,27 +123,51 @@ function ScreenRevisions() { /> { isLoadButtonEnabled && ( - + > + { __( 'View revision changes' ) } + + { + /* translators: accessibility text */ + __( '(opens in a new tab)' ) + } + + + + ) } From ef02d9c4866f284c74166b53d98bf14f37f5a08b Mon Sep 17 00:00:00 2001 From: Carlos Bravo Date: Tue, 25 Jul 2023 17:15:00 +0200 Subject: [PATCH 2/3] Commit to checkpoint a working comparison code --- .../global-styles/screen-revisions/index.js | 62 +++++++++++++++++-- 1 file changed, 57 insertions(+), 5 deletions(-) diff --git a/packages/edit-site/src/components/global-styles/screen-revisions/index.js b/packages/edit-site/src/components/global-styles/screen-revisions/index.js index ce4b7fddc353f3..5c393c5f0c2f58 100644 --- a/packages/edit-site/src/components/global-styles/screen-revisions/index.js +++ b/packages/edit-site/src/components/global-styles/screen-revisions/index.js @@ -30,7 +30,6 @@ import SidebarFixedBottom from '../../sidebar-edit-mode/sidebar-fixed-bottom'; import { store as editSiteStore } from '../../../store'; import useGlobalStylesRevisions from './use-global-styles-revisions'; import RevisionsButtons from './revisions-buttons'; -import { addQueryArgs } from '@wordpress/url'; const { GlobalStylesContext, areGlobalStyleConfigsEqual } = unlock( blockEditorPrivateApis @@ -60,6 +59,8 @@ function ScreenRevisions() { const { setEditorCanvasContainerView } = unlock( useDispatch( editSiteStore ) ); + const [ globalStylesDiffs, setGlobalStylesDiffs ] = useState( [] ); + const [ diffModal, setDiffModal ] = useState( false ); useEffect( () => { if ( editorCanvasContainerView !== 'global-styles-revisions' ) { @@ -83,6 +84,7 @@ function ScreenRevisions() { }; const selectRevision = ( revision ) => { + setGlobalStylesDiffs( deepCompare( revision, userConfig ) ); setGlobalStylesRevision( { styles: revision?.styles, settings: revision?.settings, @@ -92,6 +94,34 @@ function ScreenRevisions() { setSelectedRevisionId( revision?.id ); }; + function deepCompare( obj1, obj2, depth = 0, parentPath = '' ) { + if ( + typeof obj1 !== 'object' || + obj1 === null || + typeof obj2 !== 'object' || + obj2 === null + ) { + return [ { path: parentPath, value1: obj1, value2: obj2 } ]; + } + + const keys1 = Object.keys( obj1 ); + const keys2 = Object.keys( obj2 ); + const allKeys = new Set( [ ...keys1, ...keys2 ] ); + + let diffs = []; + for ( const key of allKeys ) { + const path = parentPath ? parentPath + '.' + key : key; + const subDiffs = deepCompare( + obj1[ key ], + obj2[ key ], + depth + 1, + path + ); + diffs = diffs.concat( subDiffs ); + } + return diffs; + } + const isLoadButtonEnabled = !! globalStylesRevision?.id && ! areGlobalStyleConfigsEqual( globalStylesRevision, userConfig ); @@ -125,10 +155,7 @@ function ScreenRevisions() { setDiffModal( true ) } target="_blank" icon={ external } disabled={ @@ -187,6 +214,31 @@ function ScreenRevisions() { ) } ) } + { diffModal && ( + + restoreRevision( globalStylesRevision ) + } + onCancel={ () => setDiffModal( false ) } + > + <> +

+ { __( + 'Loading this revision will discard all unsaved changes.' + ) } +

+

+ { __( + 'Do you want to replace your unsaved changes in the editor?' + ) } +

+ { globalStylesDiffs.length } + + + ) } ) : ( From 5999e198ebf87af9c91f557a8f0b2ebc3047b15b Mon Sep 17 00:00:00 2001 From: Carlos Bravo Date: Tue, 25 Jul 2023 17:59:23 +0200 Subject: [PATCH 3/3] Commit to checkpoint, object comparison seems fine, still UI to code left --- .../global-styles/screen-revisions/index.js | 57 +++++++++++-------- 1 file changed, 33 insertions(+), 24 deletions(-) diff --git a/packages/edit-site/src/components/global-styles/screen-revisions/index.js b/packages/edit-site/src/components/global-styles/screen-revisions/index.js index 5c393c5f0c2f58..30d00f05d951c0 100644 --- a/packages/edit-site/src/components/global-styles/screen-revisions/index.js +++ b/packages/edit-site/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, @@ -94,31 +94,48 @@ function ScreenRevisions() { setSelectedRevisionId( revision?.id ); }; - function deepCompare( obj1, obj2, depth = 0, parentPath = '' ) { + function deepCompare( + revisionValue, + configValue, + depth = 0, + parentPath = '' + ) { if ( - typeof obj1 !== 'object' || - obj1 === null || - typeof obj2 !== 'object' || - obj2 === null + typeof revisionValue !== 'object' || + revisionValue === null || + typeof configValue !== 'object' || + configValue === null ) { - return [ { path: parentPath, value1: obj1, value2: obj2 } ]; + return [ + { + path: parentPath, + revisionValue, + configValue, + }, + ]; } - const keys1 = Object.keys( obj1 ); - const keys2 = Object.keys( obj2 ); + const keys1 = Object.keys( revisionValue ); + const keys2 = Object.keys( configValue ); const allKeys = new Set( [ ...keys1, ...keys2 ] ); let diffs = []; for ( const key of allKeys ) { const path = parentPath ? parentPath + '.' + key : key; const subDiffs = deepCompare( - obj1[ key ], - obj2[ key ], + revisionValue[ key ], + configValue[ key ], depth + 1, path ); diffs = diffs.concat( subDiffs ); } + diffs = diffs.filter( + ( diff ) => + diff.path.includes( 'behaviors' ) || + diff.path.includes( 'settings' ) || + diff.path.includes( 'styles' ) + ); return diffs; } @@ -218,24 +235,16 @@ function ScreenRevisions() { - restoreRevision( globalStylesRevision ) - } - onCancel={ () => setDiffModal( false ) } + confirmButtonText={ __( 'Close modal' ) } + onConfirm={ () => setDiffModal( false ) } > <>

- { __( - 'Loading this revision will discard all unsaved changes.' + { sprintf( + 'We will show the %s changes as soon as possible.', + globalStylesDiffs.length ) }

-

- { __( - 'Do you want to replace your unsaved changes in the editor?' - ) } -

- { globalStylesDiffs.length } ) }