Tutorial on block style variations in theme.json

[bph]

Discussed in #103

^{Originally posted by justintadlock April 26, 2023}
This post would be a full tutorial on how theme developers can add styles for custom style variations via theme.json. It should also cover how this applies to the user experience in the Styles interface. And provide examples of what is possible and any potential issues.

Resources:

• Documentation
• Edit block style variations from global styles gutenberg#46343

[justintadlock]

Tutorial in progress here: https://docs.google.com/document/d/18YQwvz_3OWooHfiAveiykPD-iUfPPPPMw6EkcaviN0k/edit?usp=sharing

I expect to have a first draft of this ready on Monday, May 22 or Tuesday, May 23.

[justintadlock]

I ran into a bit of a snag with this. You cannot currently register styles for custom style variations, at least until this ticket is resolved: WordPress/gutenberg#49602

This was a misunderstanding on my part from the original ticket and the documentation when both mentioned editing an "existing" style variation. I mistook "existing" to mean "registered." What it actually means in this context is "core" variation.

I can probably push forward with this tutorial with an explanation that custom variations will have to wait for that ticket to be resolved.

[justintadlock]

I ended up taking a different direction than I had originally intended with the second part of the post. The first part is a tutorial on styling core block style variations. The second part covers what is expected to land in WordPress 6.3 to expand on this feature.

Post is now ready for review: https://docs.google.com/document/d/18YQwvz_3OWooHfiAveiykPD-iUfPPPPMw6EkcaviN0k/edit?usp=sharing

[justintadlock]

Thanks, @marybaum for running through a review so quickly.

[marybaum]

You are most welcome! Don't tell anyone I was working on it during the first part of devchat 😜

[justintadlock]

Second review by @ryanwelcher and @mburridge.

[justintadlock]

Published here: https://developer.wordpress.org/news/2023/05/customizing-core-block-style-variations-via-theme-json/