Update theme.json to follow latest spec

[kjellr]

Updates the experimental-theme.json file to follow the latest spec.

This mostly just ensures that the variables are generated — the add_theme_support settings in Seedlet's functions.php still ensure that these settings show up in the Global Styles sidebar.

[jffng]

When I switch to this PR, the font sizes are not being serialized properly; they are missing the 'px':

Before	After

Tested on v9.0.0 of the plugin.

[kjellr]

🤔 That is super-weird. I wonder if the variables need to be defined differently if custom units is active.

[kjellr]

I pushed a quick fix for this. Turns out that Seedlet doesn't actually provide the user with all of the font sizes we use for headings. Since these values need to match up with what's declared in the parent theme's functions.php, I think we need to move the two largest font size styles to custom variables. I've done that in 432747a. This theoretically should work, but I'm not seeing any of the custom variables generated at all. 🤔

[kjellr]

@jffng Actually, I overlooked a totally obvious solution for the near term: We should just remove those variables and let the standard version of Seedlet continue to do its thing. 😄

I think that's fine for now — there's no need to generate custom sizes there since, since we're not actually mapping the H1 and H2 blocks to custom sizes (via theme.json) in this PR anyway.

I did this in baeb9bf, and this PR should now be working.

[jffng]

Just gave this a spin on 9.1.1 and the styles are failing to render. This is likely because I'm getting invalid values for the presets generated by the global styles mechanism:

I checked the theme.json, and there are no json errors. Some kind of warning system / error reporting between gutenberg / global styles and the theme is really important because it's challenging to debug without it. cc @nosolosw

[oandregal]

👋 Ah, so I've noticed that all presets added use the value key to declare the value, but they need to follow the existing format used in functions.php:

• color.gradients => use gradient instead of value
• color.palette => use color instead of value
• typography.fontSizes => use size instead of value

---

Regarding reporting errors: how would you like it to work?

It occurs to me that one possibility would be to add a command along the lines of check-theme-json-format to the @wordpress/scripts package. I've seen plugins/themes using this package to compile their assets (JS/CSS) so it may be a good candidate.

[jffng]

Regarding reporting errors: how would you like it to work?

It would be useful to see errors reported in the browser console. Maybe if some kind of debugging flag is enabled, the entire output of check-theme-json-format could be shown in the console also.

[kjellr]

Ah, so I've noticed that all presets added use the value key to declare the value, but they need to follow the existing format used in functions.php:

😄 Good catch! I think I missed this change when the new format was declared initially. I've updated this in 52a7bbb.

Regarding reporting errors: how would you like it to work?

Yeah, the console would be excellent if possible. But really... anywhere is good — anything would be an improvement over these silent fails.

[oandregal]

oh, was there any issue updating the experimental-theme.json I can help with? I see that its format wasn't fixed https://github.com/Automattic/themes/blob/trunk/seedlet-blocks/experimental-theme.json

[kjellr]

@nosolosw — I think we're good. This was closed in error when @scruffian deleted the master branch. We'll re-open and point it to trunk instead.

[scruffian]

Opened here: #2659

Sorry everyone

[kjellr]

Thanks!