search

WordPress / developer-blog-content

In this GitHub space, WordPress team coordinate content to be published on the Developer Blog. Discussion and montly meetings (first Thu) in WP Slack #core-dev-blog
38 stars 4 forks source link

Tutorial on block style variations in theme.json #113

Closed bph closed 1 year ago

bph commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

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

marybaum commented 1 year ago

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

justintadlock commented 1 year ago

Second review by @ryanwelcher and @mburridge.

justintadlock commented 1 year ago

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