Global styles: custom "button" colors not reflected on live site

[jp-imagines]

Quick summary

In the Styles pane, under Colors, some themes have a specific "Buttons" color area to set the text/background color for buttons. In some tested themes, the changes may or may not be reflected in the editor, and aren't reflected on the live site.

Steps to reproduce

1. Activate a block theme – tested on Twenty Twenty-Three and Meraki.
2. Open the Site Editor (Appearance > Editor).
3. Add a Buttons block to the current template, and add text and a link to the button to make sure it appears on the live site.
4. Open the Styles pane, navigate to Colors > Buttons.
5. Set a custom background or font color. Save changes.

What you expected to happen

Buttons should change to reflect the chosen colors, both in the editor and on the live site.

What actually happened

In Meraki, the button doesn't change in either the editor or the live site. Button block-specific styles (i.e. Styles > Blocks > Button > Colors) do work in both places.

In Twenty Twenty-Three, the editor does reflect the changes, but the live site does not. Button block-specific styles again seems to work in both places.

With the Styles > Colors > Buttons styles modified only, it looks like the default colors are applied just after the custom colors in the theme CSS, causing the custom style to be overwritten.

Impact

Some (< 50%)

Available workarounds?

Yes, easy to implement

Platform (Simple and/or Atomic)

Atomic

Logs or notes

Tested only on Atomic so far, and only on these two themes. Reported in 6024659-zd-woothemes.

Using block-specific styles (Styles > Blocks > Button > Colors) seems to work as a workaround. It's not clear from a user's perspective why there's two different places to edit button colors (technically more, as there's also the Buttons block, and a separate Button block styles with no color options).

[github-actions]

Support References

This comment is automatically generated. Please do not edit it.

• 6024659-zen

[dsas]

See WordPress/gutenberg#44931

[cuemarie]

📌 SCRUBBING : RESULT - Replicated / Could Not Replicate / Uncertain

• Tested on AT: Replicated
• Tested on Self-Hosted: Replicated
• Replicated on Core? Yes

📌 FINDINGS/SCREENSHOTS/VIDEO

• I can replicate this as described on AT site

Self-Hosted Example

Screen.Capture.on.2023-03-28.at.12-18-24.mov

📌 ACTIONS

• Closed as duplicate of issue Global Styles: Styles specificity and users expectations WordPress/gutenberg#44931

📌 Message to Author

• Thanks for the link @dsas! Global Styles: Styles specificity and users expectations WordPress/gutenberg#44931 Global Styles: Styles specificity and users expectations - TLDR here is that GB is working as intended, but has a confusing UX due to the hierarchy of elements vs blocks.