Styles

[cynthianorman]

Details

• Content type: Lesson
• Content title: Styles
• Topic description: Using the theme.json configuration file, we will apply styles within your theme.
• Audience: Developer
• Experience Level: Intermediate

Learning Objectives

• Explore the style hierarchy.
• Modify theme styles using the Site Editor and export the changes.
• Understand how WordPress uses the JSON syntax to generate CSS in a browser.
• Configure presets via the settings property and apply them in the theme.json styles property.

Related Resources and Other Notes

• Styles
• https://wordpress.org/documentation/article/styles-overview/

Automation Code

[github-actions[bot]]

Lesson Development Checklist

• [x] Gather any relevant links to Support, Docs, or related material
• [x] Description and Objectives finalized
• [x] Lesson created and announced to the team for review
• [x] Lesson reviewed
• [x] Lesson video submitted and published to WPTV
• [x] Lesson created on Learn.WordPress.org
• [x] Lesson video published to YouTube
• [x] Lesson on Learn.WordPress.org updated with YouTube video
• [x] 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/9pD6EXdT2Kw (unlisted)

[digitalchild]

Tutorial/Lessons Review Checklist

Please tick all items you've confirmed:

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

Great easy to follow overview.

1:20 You mention that you can copy changes into your theme files. What changes are you referring to? The ones done in the site editor or other external changes you want to make to the theme?

3:26 You outline that this is where you can change colours, but you don't show an example of how to change the colours within the json file.

4:21 You mention that you can find the theme handbook on wordpress.org I wonder if it would be worth mentioning that it is on developer.wordpress.org/themes as wordpress.org is huge and can be hard to search sometimes.

[cynthianorman]

@digitalchild Jamie - thank you so much for your feedback!!

1:20 You mention that you can copy changes into your theme files. What changes are you referring to? The ones done in the site editor or other external changes you want to make to the theme?

The changes I am wanting to focus on in this lesson are changes made within the Site Editor for now. I prefer how easy the Save Changes option in the Create Block Theme plugin make things for theme development so I decided to switch over to that workflow.

3:26 You outline that this is where you can change colours, but you don't show an example of how to change the colours within the json file.

I am thinking the hex code is changed and any use of the contrast colour variable (--wp--preset--color--contrast) throughout the theme remains the same. Does this make sense?

4:21 You mention that you can find the theme handbook on wordpress.org I wonder if it would be worth mentioning that it is on developer.wordpress.org/themes as wordpress.org is huge and can be hard to search sometimes.

I've added a screen annotation and now think that we should do this with all of the lessons within this module. We really want learners to be able to jump into the LP at any point in their journey.

I've made the revisions and uploaded the new video.

[backpocketACE]

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

You addressed the above provided comments well.

[cynthianorman]

thanks for the feedback and confirmation @JunebackpocketACE

[eirichmond]

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

I'm unsure of the Brand Usage Guidelines and Media assets, so I've left them blank for now.

I love the annotations; they make things easier to understand with the narrative. Overall a very nice presentation.

I notice you are using the "create-block-theme" plugin. Is it worth mentioning that as a prerequisite somewhere at the beginning of the presentation?

You mention the hierarchy towards the end, but I wasn't sure what context that refers to. Is it in terms of the HTML structure or in terms of how the styles property is read from the theme.json file? Also, would it be better to start the lesson with the style hierarchy as a precursor before taking the deeper dive into how the styles work?

Also, I think I'd like to see (or hear in terms of the narrative) a more detailed approach to how the naming convention is applied in theme.json and how it's reflected in the variable class naming. For example, the important thing to note here is how the "slug" property is used when the CSS is generated, ie: settings.color.palette.slug.{genericcolorname} is appended to '--wp--preset--color--{genericcolorname}'.

[cynthianorman]

@eirichmond all very excellent feedback - thank you! These are all items I can incorporate. Your perspective on this content is greatly appreciated!

[jonathanbossenger]

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

[jonathanbossenger]

https://youtu.be/QsOnYOWtkFM

[cynthianorman]

@jonathanbossenger YouTube Chapters (0:05) Learning objectives (0:35) Explore the style hierarchy (1:13) Modify theme styles using the Site Editor and export the changes (3:08) Understand how WordPress uses the JSON syntax to generate CSS in a browser (4:20) Configure presets via the settings property and apply them in the theme.json styles property (6:19) Next steps

[jonathanbossenger]

Thanks @cynthianorman

[jonathanbossenger]

https://learn.wordpress.org/lesson/block-theme-styles/

//publish