Global Styles: Reselecting the original styles from color swatch triggers changes #70285

Activity

1. Rishit30G

   added

   [Type] BugAn existing feature does not function as intendedAn existing feature does not function as intended

   on Jun 2, 2025
2. t-hamano

   added

   Global StylesAnything related to the broader Global Styles efforts, including Styles Engine and theme.jsonAnything related to the broader Global Styles efforts, including Styles Engine and theme.json

   and removed

   [Type] BugAn existing feature does not function as intendedAn existing feature does not function as intended

   on Jun 2, 2025
3. t-hamano

   changed the title [-]DataViews: Reselecting the original styles from color swatch triggers changes[/-] [+]Global Styles: Reselecting the original styles from color swatch triggers changes[/+] on Jun 2, 2025
4. hbhalodia commented on Jun 4, 2025

   

   hbhalodia

   on Jun 4, 2025

   Contributor

   More actions

   Hi @Rishit30G,

   I have tested this with the latest trunk and WordPress 6.8.1, and I’m unable to reproduce the issue. You can check the first screencast below for reference.

   Screen.Recording.2025-06-04.at.9.36.41.AM.mov

   Separately, I noticed another UX issue, which I’ve recorded in the second screencast. When I open the text color panel, make some changes, and then open the background color panel, the text color panel remains open. Ideally, selecting a new panel should close the previously opened one. However, when I open the panel do some changes, revert that changes and open another panel, the previous one remains open.

   When I open a panel and do not do anything and then open another panel, the previous one closes (which is expected to happen and ideal).

   Screen.Recording.2025-06-04.at.9.37.11.AM.mov

   Let me know should we modify this issue or create a new one to address this.

   Thank You,
5. Rishit30G commented on Jun 4, 2025

   

   Rishit30G

   on Jun 4, 2025

   ContributorAuthor

   More actions

   Hi @hbhalodia

   Thanks for taking the time and looking into the issue,

   I think there is some mistake in conveying, I would suggest you try to switch back to the original color without clicking on the 'Clear' button, that's where the issue is, the 'Review Changes' button appears then which is not ideal

   Separately, I noticed another UX issue, which I’ve recorded in the second screencast. When I open the text color panel, make some changes, and then open the background color panel, the text color panel remains open. Ideally, selecting a new panel should close the previously opened one. However, when I open the panel do some changes, revert that changes and open another panel, the previous one remains open.

   We have a similar issue: #60614

   👀React with 👀1Reacted by Hit Bhalodia
6. hbhalodia commented on Jun 4, 2025

   

   hbhalodia

   on Jun 4, 2025

   Contributor

   More actions

   I think there is some mistake in conveying, I would suggest you try to switch back to the original color without clicking on the 'Clear' button, that's where the issue is, the 'Review Changes' button appears then which is not ideal

   Will check this 👁.

   We have a similar issue: #60614

   Thanks for pointing out 👍.
7. hbhalodia commented on Jun 4, 2025

   

   hbhalodia

   on Jun 4, 2025

   Contributor

   More actions

   Hi @Rishit30G @t-hamano, I tried to debugged the issue, but seems like it is acting as a issue but actually is not because,

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

   Lines 444 to 458 in a5e3592

   	const setTextColor = ( newColor ) => {
   	let changedObject = setImmutably(
   	value,
   	[ 'color', 'text' ],
   	encodeColorValue( newColor )
   	);
   	if ( textColor === linkColor ) {
   	changedObject = setImmutably(
   	changedObject,
   	[ 'elements', 'link', 'color', 'text' ],
   	encodeColorValue( newColor )
   	);
   	}
   	onChange( changedObject );

   ,

   This would always trigger, onChange() and in that funtion, we are setting the style via hook, useGlobalStyle

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

   Lines 151 to 210 in a5e3592

   	export function useGlobalStyle(
   	path,
   	blockName,
   	source = 'all',
   	{ shouldDecodeEncode = true } = {}
   	) {
   	const {
   	merged: mergedConfig,
   	base: baseConfig,
   	user: userConfig,
   	setUserConfig,
   	} = useContext( GlobalStylesContext );
   	const appendedPath = path ? '.' + path : '';
   	const finalPath = ! blockName
   	? `styles${ appendedPath }`
   	: `styles.blocks.${ blockName }${ appendedPath }`;
   	const setStyle = ( newValue ) => {
   	setUserConfig( ( currentConfig ) =>
   	setImmutably(
   	currentConfig,
   	finalPath.split( '.' ),
   	shouldDecodeEncode
   	? getPresetVariableFromValue(
   	mergedConfig.settings,
   	blockName,
   	path,
   	newValue
   	)
   	: newValue
   	)
   	);
   	};
   	let rawResult, result;
   	switch ( source ) {
   	case 'all':
   	rawResult = getValueFromObjectPath( mergedConfig, finalPath );
   	result = shouldDecodeEncode
   	? getValueFromVariable( mergedConfig, blockName, rawResult )
   	: rawResult;
   	break;
   	case 'user':
   	rawResult = getValueFromObjectPath( userConfig, finalPath );
   	result = shouldDecodeEncode
   	? getValueFromVariable( mergedConfig, blockName, rawResult )
   	: rawResult;
   	break;
   	case 'base':
   	rawResult = getValueFromObjectPath( baseConfig, finalPath );
   	result = shouldDecodeEncode
   	? getValueFromVariable( baseConfig, blockName, rawResult )
   	: rawResult;
   	break;
   	default:
   	throw 'Unsupported source';
   	}
   	return [ result, setStyle ];
   	}

   and it is actually changing the context and triggers the change, now when you again revert to same color which was set, but since context has now changed to new color, it would identify this as a change as well and again would change the context so previous and new context is not the same always, but it would be same, when we are setting the value in setStyle with undefined, becuase that would not change it's value it would return the old one, hence on clear and click same color again is not reproducing the issue.

   👍React with 👍1Reacted by Rishit Gupta