Add style variations to handle different font options.

[matiasbenedetto]

Ref: #355, #336

What?

Add style variations to handle the different selection of fonts.
Each style variation includes 2 fonts to replace the primary and secondary fonts used across the site.
These style variations are just an example create based on some of the prod sites. They could require extra tweaks if the fonts picked are different from the ones desired.

Why?

• This method can replace the current custom font plugins and reduce maintenance burden.
• It works with WordPress 6.4.
• It requires just a few clicks to activate.
• No need to change the current theme SCSS files referencing the font vars (--wp--preset--font-family--primary, --wp--preset--font-family--secondary) because those are not changed.

Downsides

• You need to reload the editor the first time you activate the variation to load the font asset. This is a one-time problem for editor users. No end user is impacted by this. See Font faces defined in variations aren't loaded in the browser until the variation switch is saved and the page is refreshed WordPress/gutenberg#59965 for reference.
• When activating a style variation, 6.4 will remove other global style customizations that have been added to the site.

Screencast

2024-08-07.17-57-14.mp4

[jaymcp]

This looks really good, thanks so much for this PR! This is a much more streamlined user experience than our current crowbar. I can't quite replicate the nice user interface that I can see in your video, but I presume that that's a WP core version mismatch between our environments.

[matiasbenedetto]

I can't quite replicate the nice user interface that I can see in your video, but I presume that that's a WP core version mismatch between our environments.

The interface featured in the PR description video was added in WordPress 6.6. In WordPress 6.4 the style variations are already available and can be selected like this:

2024-08-08.11-00-00.mp4

[jaymcp]

This is fantastic! Thanks so much, @matiasbenedetto 🙂