Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[BBT-83] Reset/Save button functionality enhancements #30

Merged
merged 4 commits into from
Oct 27, 2023
Merged

[BBT-83] Reset/Save button functionality enhancements #30

Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
a2e3607
feat(bbt-83): notify user of unsaved changes before leaving
Joe-Rouse Oct 11, 2023
5d96b2a
feat(bbt-83): disable reset if userConfig is the same as baseConfig
Joe-Rouse Oct 11, 2023
e259683
feat(bbt-83): reset button now resets to most recently saved version
Joe-Rouse Oct 12, 2023
ddc5636
refactor(bbt-83): remove any need for extra state
Joe-Rouse Oct 23, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
42 changes: 35 additions & 7 deletions src/editor/components/ThemerComponent.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { mergeWith, isEmpty } from 'lodash';
import { mergeWith, isEmpty, isEqual } from 'lodash';
import { Button, Spinner, TabPanel } from '@wordpress/components';
import { useSelect, dispatch } from '@wordpress/data';
import { useEffect, useState, useMemo } from '@wordpress/element';
Expand Down Expand Up @@ -36,12 +36,13 @@ const ThemerComponent = () => {
);
};

const { globalStylesId, baseConfig, userConfig } = useSelect(
( select ) => {
const { globalStylesId, baseConfig, userConfig, savedUserConfig } =
useSelect( ( select ) => {
const {
__experimentalGetCurrentGlobalStylesId,
__experimentalGetCurrentThemeBaseGlobalStyles,
getEditedEntityRecord,
getEntityRecord,
} = select( 'core' );

const currentGlobalStylesId =
Expand All @@ -55,9 +56,13 @@ const ThemerComponent = () => {
'globalStyles',
currentGlobalStylesId
),
savedUserConfig: getEntityRecord(
'root',
'globalStyles',
currentGlobalStylesId
),
};
}
);
} );

/**
* Returns merged base and user configs
Expand All @@ -70,6 +75,13 @@ const ThemerComponent = () => {
return merged;
}, [ userConfig, baseConfig ] );

/**
* Determines if the user config is different from the most recently saved config.
*/
const hasUnsavedChanges = useMemo( () => {
return ! isEqual( userConfig, savedUserConfig );
}, [ userConfig, savedUserConfig ] );

/**
* Fetch new preview CSS whenever config is changed
*/
Expand Down Expand Up @@ -107,6 +119,20 @@ const ThemerComponent = () => {
validateThemeJson();
}, [] );

/**
* Alert user if they try to leave Themer without saving.
*/
useEffect( () => {
// Detecting browser closing
window.onbeforeunload = hasUnsavedChanges
? () => hasUnsavedChanges
: null;

return () => {
window.removeEventListener( 'beforeunload', () => {} );
};
}, [ hasUnsavedChanges ] );

/**
* saves edited entity data
*/
Expand All @@ -124,14 +150,14 @@ const ThemerComponent = () => {
};

/**
* resets updated theme db data back to original theme.json
* Resets theme db data back to the most recently saved config.
*/
const reset = () => {
dispatch( 'core' ).editEntityRecord(
'root',
'globalStyles',
globalStylesId,
baseConfig
savedUserConfig
);
};

Expand Down Expand Up @@ -169,11 +195,13 @@ const ThemerComponent = () => {
isSecondary
onClick={ () => reset() }
text="Reset"
disabled={ ! hasUnsavedChanges }
/>
<Button
isPrimary
onClick={ () => save() }
text="Save"
disabled={ ! hasUnsavedChanges }
/>
</div>
<div className="themer-body">
Expand Down