Style Variations

[cynthianorman]

Details

• Content type: Lesson
• Content title: Style Variations
• Topic description: Creating style variations or simply theme.json variations
• Audience: Developer
• Experience Level: Intermediate

Learning Objectives

• Define and describe style variations.
• Differentiate between theme and style variation JSON files.
• Differentiate between a child theme and a style variation.

Related Resources and Other Notes

• Style Variations

Automation Code

[github-actions]

Lesson Development Checklist

• Gather any relevant links to Support, Docs, or related material
• Description and Objectives finalized
• Lesson created and announced to the team for review
• Lesson reviewed
• Lesson video submitted and published to WPTV
• Lesson created on Learn.WordPress.org
• Lesson video published to YouTube
• Lesson on Learn.WordPress.org updated with YouTube video
• Lesson published to Learn.WordPress.org

[cynthianorman]

This Intermediate Theme Developer Learning Pathway Lesson is ready to be reviewed. Please follow the steps listed under Guidelines for reviewing content. Thank you for your contribution! ✨

https://youtu.be/UKh7HvRarjs (unlisted)

[annezazu]

Thanks so much for working on this! Some feedback:

• Some of the slides change really quickly, including the first slide and the slide at 19-20s.
• Between 25s-45s style variations aren't really explained beyond calling it a different style combination. I'd be more specific: "Style variations allow you to quickly change the look and feel of your site with predefined styling options set by the theme. Theme authors can choose to bundle these style variations. They can change a wide range of design aspects globally including colors, spacing, and typography." This is rough but you get the idea.
• When going through the theme.json file, I might go through a few more examples within a variation showing how things can change and shift.

[cynthianorman]

@annezazu thank you so much!

[ironnysh]

Tutorial/Lessons Review Checklist

Please tick all items you've confirmed:

• Learning outcomes/objectives are clear.
• Technical concepts introduced in the content are accurate.
• The speed of demonstrations are easy to follow.
• The narration audio matches what is shown visually.
• Spelling and grammar are correct.
• Sound quality is consistent throughout the video.
• Brand Usage Guidelines and Promotional Guidelines are being followed.
• Media assets are all in the public domain (CC0).

Great overview, @cynthianorman.
I think that implementing @annezazu's feedback could make it even better :-)

[cynthianorman]

Thank you so much @ironnysh - I appreciate you!

[jonathanbossenger]

https://wordpress.tv/2024/05/23/global-settings-and-styles-style-variations/

[jonathanbossenger]

https://youtu.be/8gKGwZgxlas

[cynthianorman]

@jonathanbossenger

YouTube Chapters

(0:05) Learning objectives
(0:21) What are style variations?
(2:36) Differentiate between theme and style variation JSON files
(3:07) Differentiate between a child theme and a style variation
(3:59) Next steps

[jonathanbossenger]

https://learn.wordpress.org/lesson/style-variations/

[annezazu]

I want to note that if we are able to add in for style variations a section later on for color and typography only variations that would be super helpful for 6.6 and beyond: WordPress/gutenberg#61215

[jonathanbossenger]

Thanks. @annezazu. Could we ask you to create a lesson "update" issue (similar to this one) that links to this issue? You're welcome to use the blank issue template, as we don't have a specific format for lesson updates like this (yet).

Then, we'll add it to a "Todos" section of the Theme developer tracking issue. This way, we don't lose the request but also don't lose momentum on completing the lessons initially planned for our launch date.

Once the update issue is created, I'll add it to our to-do list on the tracking issue.