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

[Rishit30G]

Description

Currently, when I change the style (text color, background color, link color, etc.) and then revert it back to the original by clicking on the color swatch, the review button still gets triggered—even though no actual change has occurred. While clicking the ‘Clear’ button resolves this issue for other elements, it doesn’t work for ‘Text Color’. Focus issue for Text Color: https://github.com/WordPress/gutenberg/issues/60614.

Step-by-step reproduction instructions

1. Open the Site Editor.
2. Navigate to Styles > Colors.
3. Change the Text Color using the color swatch, then click back on the original color.
4. Notice that the Review Changes button appears, even though the color is reverted.
5. Refresh the page.
6. Now repeat the color switching process with Background, Links, etc.
7. Observe that the Clear button removes the Review Changes button. However, switching back to the original color from another still triggers the Review Changes button.

Screenshots, screen recording, code snippet

https://github.com/user-attachments/assets/5d8be00d-6525-4749-a060-3c845eba1759

---

https://github.com/user-attachments/assets/e5bf737b-4f07-4d66-9675-54599c5b9f51

Environment info

• WordPress 6.8
• Gutenberg 20.9.0
• TT5
• Google Chrome
• MacOS Sequoia

Please confirm that you have searched existing issues in the repo.

• [x] Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

• [x] Yes

Please confirm which theme type you used for testing.

• [ ] Block
• [ ] Classic
• [ ] Hybrid (e.g. classic with theme.json)
• [ ] Not sure

[hbhalodia]

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.

https://github.com/user-attachments/assets/05ebfd4c-3f1d-4bce-9a1c-ce8bd85a25b0

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).

https://github.com/user-attachments/assets/017b4206-88e6-4c65-b8db-44cb653a3202

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

Thank You,

[Rishit30G]

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: https://github.com/WordPress/gutenberg/issues/60614

[hbhalodia]

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: https://github.com/WordPress/gutenberg/issues/60614

Thanks for pointing out 👍.

[hbhalodia]

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

https://github.com/WordPress/gutenberg/blob/a5e3592f0a4e66757f21754bfafe6c6ac7c83aea/packages/block-editor/src/components/global-styles/color-panel.js#L444-L458,

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

https://github.com/WordPress/gutenberg/blob/a5e3592f0a4e66757f21754bfafe6c6ac7c83aea/packages/block-editor/src/components/global-styles/hooks.js#L151-L210

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.