Tutorial on block style variations in theme.json

[bph]

Discussed in https://github.com/WordPress/developer-blog-content/discussions/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](https://developer.wordpress.org/block-editor/how-to-guides/themes/theme-json/#variations) - https://github.com/WordPress/gutenberg/pull/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: https://github.com/WordPress/gutenberg/issues/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/