[Related Course: Create a Custom Block Theme #1] Your First Codes in theme.json - COURSE Lesson Plan

[wparasae]

IMPORTANT:

** This lesson plan belongs to part of a greater course, Create a Custom Block Theme #1 **
Please reach out to @arasae (Sarah Snow) in the #training team Slack if you would like to help with this lesson plan.

Topic Description

This lesson plan should pick a minimum of three toggles in theme.json supports to turn off and on. A workshop on Supports in Theme.json: Toggling settings off an on would be especially beneficial here.

This should first show the user how to turn a support off and on, and show the difference in the site editor.
It should then provide instructions and challenge users to turn settings off and on in their own theme.json. We will want to be really intentional about having them turn these off and on.

In an ideal world, we will either provide a simple theme.json, or have people write these from scratch. We may provide a separate development environment (to last for 1 day) that limits the theme.json supports and other code specifically so users can focus on this particular section.

Objectives

After completing this lesson, participants will be able to:

• Utilize theme.json to toggle switches off and on in the site and block editor
• Compare changes made in the text editor to changes seen in the site editor

Guidelines

Review the [team guidelines] (https://make.wordpress.org/training/handbook/guidelines/)

Development Checklist:

• Review any related material on Learn
• Description and Objectives finalized
• Gather links to Support, other learn.wordpress.org existing resources, and Developer Docs
• Create an outline of the example lesson walk-through
• Draft lesson plan
• Copy edit
• Style guide review
• Instructional Review
• Final review
• Publish
• Announce to the Training team
• Announce to lesson plan creator
• Announce to marketing
• Gather feedback from lesson plan users about the quality

Repo Structure and Lesson Plan Template

Please remove all blockquote comments such as this before publishing.

Description

A short paragraph explaining what is covered in the lesson plan. This should be text that can be copied and used in a meetup or workshop description.

Target Audience

Who is this lesson intended for? What interests/skills would they bring? Put an "x" in the brackets for all that apply.

• Users / Content Writers
• Designers
• Beginner-Level Developers
• Developers
• Speakers
• Organizers
• Kids

Experience Level

How much experience would a participant need to get the most from this lesson? Put an "x" in the brackets for all that apply.

• Beginner
• Intermediate
• Advanced

Type of Instruction

Which strategies will be used for this lesson plan? Put an "x" in the brackets for all that apply.

• Text-and-Image-Based, Remote-First Course
• Exercises
• Slides
• Video Tutorial

Time Estimate (Duration)

How long will it take to present this lesson? Put an "x" in the brackets for the one that applies.

• 1-5 Minutes
• 5-10 Minutes
• 15+ Minutes
• 1 hour or less

Prerequisite Skills

Participants will get the most from this lesson if they have familiarity with:
These are important to include in case someone wants to use this lesson plan in-person as a stand-alone lesson.

• Skill 1
• Skill 2

For example:

• Experience with HTML and CSS
• Completed the Basic WordPress Concepts lesson

Readiness Questions

These are important to include in case someone wants to use this lesson plan in-person as a stand-alone lesson.

• Question 1
• Question 2

A list of questions for participants to see if they have the background and skills necessary to learn and understand the lesson.

For example:

• Do you want to makes changes to your theme yourself?
• Do you know how to write CSS?

Slides

If someone wanted to run this lesson as a stand-alone Online Live Workshop or at an in-person WordCamp, you could create slides for this here; if you run a Live Online Workshop on one of these topics or find someone else has, related slides would be welcome!

Change the /repo-name/ in the link to match the URL name of this repo.

• Slides (files included in this repo)

Materials Needed

• Item 1
• Item 2

A list of files, resources, equipment, or other materials the presenter will need for the lesson.

For example:

• A local install of WordPress
• The files for the TwentySixteen theme

Notes for the Presenter

/Include any tips needed to present this topic for a Live Online Workshop or in an in-person classroom setting.

• Note 1
• Note 2

A list of any handy tips or other information for the presenter.

For example:

• Participants may need to download the TwentySixteen theme before beginning
• What to do if there’s no projector or internet available
• What to do if a participant doesn’t have the necessary set up
• How to handle different opinions about the topic

Lesson Outline

• First do this
• Then move on to this
• Finish with this

The plan for the lesson. Outline form works well.

For example:

• Talk about what a theme is
• Demonstrate how to install and activate a theme
• Practice exercises to have participants find and install a theme on their own site

Exercises

What someone will DO with what they learn in each lesson; most lessons have at least one related exercise.

Exercise name

Short description of what the exercise does and what skills or knowledge it reinforces.

• Short point or step of the exercise
• And another one

These are short or specific activities that help participants practice certain components of the lesson. They should not be fully scripted exercises, but rather something that participants could do on their own. For example, you can create an exercise based on one step of the Example Lesson.

Assessment

These assessments will be autograded on Learn.WordPress.org.
There should be one assessment item (or more) for each objective listed above. Each assessment item should support an objective; there should be none that don't.

Write out the question.

1. Option
2. Option
3. Option
4. Option

Answer: 3. Correct answer

A few questions to ask participants to evaluate their retention of the material presented. They should be a measure of whether the objectives were reached. Consider having a question for each objective.

Additional Resources

• Resource 1
• Resource 2

An optional section which can contain a list of resources that the presenter can use to get more information on the topic.

For example:

• Link to information on the Codex
• Theme Review Team's Handbook

Example Lesson [Written for a text-and-image based, multimedia course rather than for a live classroom setting]

An example of how the lesson plan can be implemented. Written in script form as one possible way an presenter might use this lesson plan at an event, with screenshots and instructions if necessary.

Section Heading for Example Lesson

You will likely need to break the Example Lesson down into multiple sections.

Lesson Wrap Up

Follow with the Exercises and Assessment outlined above.

[wparasae]

Theme.json tools to explore in this lesson plan:

Settings:
Presets

• AppearanceTools - on and off
• Layout Settings + Why
• Typography
• (If separate from typography) Headings

[wparasae]

Update
I think the goal of this lesson needs to be about the simplest ways to turn on more features for people to effectively design a custom block theme in their site editor. Therefore, the settings we should focus on are:

1. AppearanceTools
2. Color Palette (Intermediate)
3. Layout

Specifically to toggle these options off and on.

We might consider including an optional "Styles" section for Headings here, but that might be a later issue.

[wparasae]

I experimented with this code today and am looking to get it reviewed by someone more familiar with themes.

My goal for this snippet:
Allow intermediate users to copy and paste the simplest code into a blank theme.json file.
Allow intermediate users to start coding settings in theme.json for the very first time
Unlock the most tools we can in the simplest way possible for use exclusively in the site editor.

For the sake of time, I'm just going to copy and paste this below, even though it's not pretty or formatted well:

{
"$schema": "https://schemas.wp.org/trunk/theme.json",
"version": 2,
"settings": {
"appearanceTools": true,
"layout": {
"contentSize": "920px",
"wideSize": "1280px"
},
"color": {
"palette": [
{
"slug": "foreground",
"name": "Foreground"
},
{
"slug": "background",
"name": "Background"
},
{
"slug": "primary",
"name": "Primary"
},
{
"slug": "secondary",
"name": "Secondary"
},
{
"slug": "tertiary",
"name": "Tertiary"
}
]
}
}
}

Questions I have:

1. Palette Naming Conventions: I am worried about naming conventions. I read somewhere a long time ago that it might be a good practice to avoid using "background" and "foreground", but I can't remember why.

2. Are there any other quick, fast settings in theme.json that might toggle additional settings on in the site editor? If so, let me know below before I finalize this!

[wparasae]

Suggestion: Change "background" and "foreground" to "base" and "contrast".

[wparasae]

The following is ready for review:

2. Your First Codes In theme.json - Review Module 3, Lesson 2 Here / Leave Feedback for Module 3, Lesson 2 Here

Specific Questions For Feedback (Leave all feedback for this lesson in a comment on this issue)
a. Is the content correct? Are there any errors?
b. Does this lesson need to be split up for clarity/simplicity's sake?
c. What revisions might you suggest for added clarity?

[westnz]

Review:

• Clear and logical instructions/explanations
• You have effectively used annotations
• Remember to add alt text to all your screenshots :-)
• Excellent video created + explaining it in text. Love your energy in the video.
• You really clarify things for the learner. Well done! Example: "Without using this code, a theme will expand to as wide as the browser is. On a phone or tablet, that might be fine, but what happens if someone is using an enormous monitor? Content will expand and look less than ideal."
• 'Group, Row, Stack, and Columns blocks.' instead of 'group, row, stack, and column blocks.'

• Typo

• Does your second video still need sound or are you going to keep it as is?

• The 'Let's code' call-out box is very clever and practical.

[wparasae]

Changes made; excellent call-out with the image alt tags.

I may consider adding sound in the future, but for now, it is okay as-is.

[courtneyr-dev]

WP 6.4
Visuals: N/A
Adoption approach: opt out via theme.json. For example with the Buttons block:
"settings": {
"blocks": {
"core/buttons": {
"layout": false
{
{
{

Key Make Posts/GitHub/Trac Issue(s): Allow layout controls to be disabled per block from theme.json. (53378)

[bsanevans]

Closing in favor of prioritizing Learning Pathways content.