Global Styles - Cannot Change Outline Button Style Variation

[masperber]

Quick summary

In Global Styles, the Button block has an Outline style variation. In the Site Editor, you may select this style variation and change its style. However, when you save the change, it is immediately reverted.

Steps to reproduce

1. Create a site with any FSE theme.
2. Open the Site Editor and navigate to Global Styles
3. Edit the Style for the Button Block. -- The colors may be changed and save correctly.
4. Edit the Style for the Button Block's Outline Style Variation. -- The colors can be edited, but upon saving, they immediately revert back to clear.

Screen.Capture.on.2023-01-28.at.21-29-01.mov

What you expected to happen

The Outline Style Variation should be saved.

What actually happened

The Outline Style Variation is not saved.

Impact

All

Available workarounds?

No but the platform is still usable

Platform (Simple and/or Atomic)

Simple, Atomic

Logs or notes

Customer report: 5898463-zen

[github-actions]

Support References

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

• 5898463-zen
• 6710853-zen

[aleone89]

Another report of this here: https://wordpress.com/forums/topic/changing-default-theme-colors/?view=all
Theme: Rainfall
I replicated a similar issue with styles in the fact that there was no differentiation between Fill and Outline button style settings.

[cuemarie]

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

• Tested on Simple: Replicated
• Tested on AT: Could Not Replicate
• Tested on Self-hosted: Could Not Replicate
• Replicable on Core? No

📌 FINDINGS/SCREENSHOTS/VIDEO

• I could replicate this issue on Simple Site only.
• Tested:
  • Simple site tested with theme: Zoologist
  • AT tested with themes: Farrow and TT3 - Global Styles > Button > Block > Outline variation saved changes as expected
  • SH tested theme: Blank Canvas and TT3 - No Outline variation, but color changes to button block saved as expected

Simple Example

Screen.Capture.on.2023-02-02.at.11-39-44.mp4

📌 ACTIONS

• Marked as Triaged for Quality Squad review

[dsas]

To explicitly eliminate a variable, I can repro this using TT3 on simple.

When saving the GS a PUT is made to https://public-api.wordpress.com/wp/v2/sites/SITE_ID/global-styles/GS_POST_ID which includes a payload of:

{
  "id": 1433,
  "styles": {
    "elements": {
      "link": {
        "color": {
          "text": "#b65252"
        }
      }
    },
    "blocks": {
      "core/button": {
        "color": {
          "background": "var(--wp--preset--color--luminous-vivid-amber)"
        },
        "variations": {
          "outline": {
            "color": {
              "text": "var:preset|color|pale-cyan-blue"
            },
            "elements": {
              "link": {
                "color": {
                  "text": "var:preset|color|pale-cyan-blue"
                }
              }
            }
          }
        }
      }
    }
  }
}

The response to that request returns the saved GS styles as part of the response, it looks like this:

"styles": {
      "elements": {
        "link": {
          "color": {
            "text": "#b65252"
          }
        }
      },
      "blocks": {
        "core/button": {
          "color": {
            "background": "var(--wp--preset--color--luminous-vivid-amber)"
          }
        }
      }
    },

i.e. all of the core/button variations have disappeared.

Debugging the API endpoint the variations are not present when getting the gs post from the db here: fbhepr%2Skers%2Sjcpbz%2Sjc%2Qpbagrag%2Scyhtvaf%2Sthgraoret%2Qpber%2Si16.3.0%2Syvo%2Spbzcng%2Sjbeqcerff%2Q6.2%2Spynff%2Qthgraoret%2Qerfg%2Qtybony%2Qfglyrf%2Qpbagebyyre%2Q6%2Q2.cuc%3Se%3Q95883sqq%23140-og but they are present in $changes a few lines up.

[dsas]

I've spent (too much) time looking into this, the bug does appear to be an upstream one. The same thing happens in upstream too if kses is active (e.g. on a multi-site install). I've opened an issue upstream: WordPress/gutenberg#53428

[cuemarie]

Thank you for all the time you put into it, @dsas !

[dsas]

My fix has been merged to GB trunk, it'll be part of GB 16.5 but but might get backported. It should be deployed to wpcom within the next couple of weeks

[Gustavo-Hilario]

Another report here: 6710853-zen

[mmtr]

Closing this one out since the issue is no longer reproducible now that Gutenberg v16.5 has been deployed to WP.com sites.