Disable the "Reset styles" button when there are no changes.

[jeflopodev]

What problem does this address?

I've just did a styles reset and noticed the "Reset styles" button is still enabled.

It let me reset again and It still says there's 1 site change to be saved.

Makes zero sense to me. And I find this behavior very confusing for the end user.
It goes against the user to properly identify when the styles are truly reset.
It requires you to remember if you've reset them.

What is your proposed solution?

If the Global Styles are reset. The "Reset styles" button should be disabled.

Note that I've used the DevTools to make the text look Greyish (disabled).

[t-hamano]

Thanks for the report.

If the global styles hasn't changed, or if you've reset the global styles once, the button should be disabled. However, for some reason the useGlobalStylesReset hook isn't working properly and canReset always seems to be true.

gutenberg/packages/block-editor/src/components/global-styles/hooks.js

Lines 87 to 94 in 48b8350

	export const useGlobalStylesReset = () => {
	const { user: config, setUserConfig } = useContext( GlobalStylesContext );
	const canReset = !! config && ! fastDeepEqual( config, EMPTY_CONFIG );
	return [
	canReset,
	useCallback( () => setUserConfig( EMPTY_CONFIG ), [ setUserConfig ] ),
	];
	};

The reason for this might be that even if the global styles hasn't changed, the two configs are different, so fastDeepEqual is always false.

config:

{
	settings: {},
	styles: {},
	_links: {
		self: [
			{
				href: 'http://localhost:8888/wp-json/wp/v2/global-styles/5',
			},
		],
		'version-history': [
			// ...
		],
		'wp:action-publish': [
			// ...
		],
		'wp:action-edit-css': [
			// ...
		],
		curies: [],
	},
}

EMPTY_CONFIG:

{
	settings: {},
	styles: {},
}

[t-hamano]

After some quick investigation, it appears that the newly added _links are involved, as removing the _links from this object resolves the issue:

gutenberg/packages/editor/src/components/global-styles-provider/index.js

Lines 89 to 95 in 48b8350

	const config = useMemo( () => {
	return {
	settings: settings ?? {},
	styles: styles ?? {},
	_links: _links ?? {},
	};
	}, [ settings, styles, _links ] );

[t-hamano]

A simple fix would be to rewrite the useGlobalStylesReset hook as follows to exclude everything except settings and styles, but there may be a better way.

diff --git a/packages/block-editor/src/components/global-styles/hooks.js b/packages/block-editor/src/components/global-styles/hooks.js
index 44a3d5e23e..81e57ca5dc 100644
--- a/packages/block-editor/src/components/global-styles/hooks.js
+++ b/packages/block-editor/src/components/global-styles/hooks.js
@@ -85,7 +85,11 @@ const VALID_SETTINGS = [
 ];
 
 export const useGlobalStylesReset = () => {
-       const { user: config, setUserConfig } = useContext( GlobalStylesContext );
+       const { user: _config, setUserConfig } = useContext( GlobalStylesContext );
+       const config = {
+               settings: _config.settings,
+               styles: _config.styles,
+       };
        const canReset = !! config && ! fastDeepEqual( config, EMPTY_CONFIG );
        return [
                canReset,

[andrewserong]

@t-hamano ignoring _links as in your diff above sounds good to me. The _links is essentially metadata so shouldn't be used for the reset comparison.

[t-hamano]

Fixed by #63562