Fixed Global Styles variables for colors, font family, gradient, fontSize

[BogdanUngureanu]

What?

Fixes the font family, color, and gradient variables for Global Styles. Instead of saving the raw values, these values will now be persisted with the infix vars.

Why?

fixes #43397, Automattic/wp-calypso#71641

How?

We just need to updateSTYLE_PATH_TO_CSS_VAR_INFIX hardcoded list with the proper paths.

Testing Instructions

Testing Instructions for Keyboard

• Checkout this branch on your local development environment
• Open the site editor
• Try to modify the font families, the colors (the theme predefined colors), gradients
• Repeat this for heading, links and buttons
• Make sure that the API request it makes on save is persisting the theme variables instead of the raw values

[github-actions]

👋 Thanks for your first Pull Request and for helping build the future of Gutenberg and WordPress, @BogdanUngureanu! In case you missed it, we'd love to have you join us in our Slack community, where we hold regularly weekly meetings open to anyone to coordinate with each other.

If you want to learn more about WordPress development in general, check out the Core Handbook full of helpful information.

[ironprogrammer]

Thanks for the patch, @BogdanUngureanu!

Test Report

Note that this testing was primarily to address the missing font family reference issues reported in #43397 and Automattic/wp-calypso#71641. However, the changes in this PR also include font size, color, background, and gradients -- none of which behaved unexpectedly in local testing. It would be helpful to include references to issues where these were also problematic so they may be validated accordingly.

Environment

• Hardware: MacBook Pro Apple M1 Pro
• OS: macOS 12.6.2
• Browser: Safari 16.2
• Server: nginx/1.23.3
• PHP: 7.4.33
• WordPress: 6.2-alpha-54642-src (trunk)
• Theme: blockbase v3.1.5 (used for additional fonts)
• Active Plugins:
  • gutenberg v14.9.1 (repro) and v14.9.0 (patch)

Steps to Test

1. Install and activate the Blockbase theme, which includes additional fonts.
2. Install and activate Gutenberg (here, using trunk).
3. In Appearance > Editor, choose to edit a template, such as "Index".
4. Open the Styles sidebar, and navigate to Typography > Links.
5. In the Font dropdown, select one of the fonts included with the theme, such as "Space Mono".
6. Click Save and then Save again to update Global Styles.
7. 🐞 On the site's frontend, navigate to a page that uses the updated template and observe the font family used for post links: it displays as generic serif or sans-serif.
8. 🐞 In the page's source, observe that there is no inline CSS that includes the custom font's @font-face declarations.
9. 🩹 Apply the patch (checkout this PR, run npm run build to recompile, and exit the site editor before continuing).
10. In Appearance > Editor, choose to edit the same template.
11. Open the Styles sidebar, and navigate to Typography > Links.
12. In the Font dropdown, select a different Blockbase-provided font (a necessary change to trigger re-saving Global Styles), such as "Playfair Display".
13. Click Save and then Save again to update Global Styles.
14. 👀 On the site's frontend, navigate to the page and observe the font family used for post links.
15. 👀 In the page's source, observe the inline CSS for custom @font-face declarations.

Before Patch

• ❌ Font face not displayed on frontend. Custom @font-face declarations missing.

After Patch

• ✅ Font face displayed on frontend. Inline @font-face declarations emitted in #blockbase_font_faces-inline-css.

[tellthemachines]

Thanks for fixing this! It's working well for me in testing ✅

[github-actions]

Congratulations on your first merged pull request, @BogdanUngureanu! We'd like to credit you for your contribution in the post announcing the next WordPress release, but we can't find a WordPress.org profile associated with your GitHub account. When you have a moment, visit the following URL and click "link your GitHub account" under "GitHub Username" to link your accounts:

https://profiles.wordpress.org/me/profile/edit/

And if you don't have a WordPress.org account, you can create one on this page:

https://login.wordpress.org/register

Kudos!