[Related Course: Create a Custom Block Theme #1] How Classic and Block Themes Are Developed - 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 explores the differences between how classic themes were developed vs. how new block themes can be developed. One of the key goals is to illustrate that someone can create a fully functional block theme without touching much code; they can design almost everything they need right there in the site editor. I

It's important to also discuss the limitations as well theming during this lesson in order to set appropriate expectations and support the idea of where additional development resources (soon to be available in the 2nd Block Course series) can extend a theme even further to do even more remarkable things.

**Potential Ask: ** A workshop that explores the high-level processes of creating a classic theme vs. a block theme would be particularly helpful to include with the text-based content.

Objectives

After completing this lesson, participants will be able to:

• Explain the process of block theme creation
• Compare and contrast the differences between classic theme creation and block theme creation

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
• Write Workshop Script to Accompany Lesson
• Find a Figma one-pager example.
• 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.

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.

• See previous lesson plan: [Related Course: Create a Custom Block Theme #1] Different Types of Themes: Overview - Lesson Plan #831

Readiness Questions

See previous lesson plan: #831

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!

No slides; this could be an interesting live workshop, though, if someone wanted to run one on this topic!

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

• Slides (files included in this repo)

Materials Needed

• Figma design for someone to emulate as they build their own theme (perhaps look for one in open source? Edit: FOUND A GOOD RESOURCE: https://www.figma.com/@wordpressorg - thank you, @colorful-tones ) - The one I was originally going to use doesn't work the way I thought it would, so I'm back to the drawing board.
• Potential design challenge with Figma (a designer could potentially use one of their own)
• Live Workshop (in progress) from Damon Cook to help show the Figma design process.

• Potential Tutorial on How Themes are Developed (@jonathanbossenger has expressed interest in creating this, but there is not yet a Github issue; will update this with a link if/when that is in development).

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. (I suppose I could collect design tips from this)

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

• Hook: Think back to the first few times you built your first websites. What did that look like? How was that different than what you do now?
• Background: A Quick History - the problem early web designers solved with WordPress themes.
• Potential Tutorial: How themes are developed.
• Mini-Lesson - Comparison: Classic Theme Development vs. Block Theme Development (Timeline)

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 auto-graded 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

Theme Development Workflows

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]

Call for Subject Matter Expertise
Figma theme designers (or theme developers in general)

1. How do you dream up a new theme?
2. Do you use a mood board? Literal paint? Something else?
3. What are some design best practices for fonts? Colors? Spacing?
4. Is there a framework (or two or three?) for a Figma theme design process?
5. What are all the elements that go into a single page Figma design? Why do they exist there?

[wparasae]

Subject Matter Expert: Huge Ask, Probably Not Obtainable
The Need: A basic, but beautiful Figma file from a designer that can be built in the block editor. Archeo has been recommended, but just in case another might exist uniquely for this course, I'm putting this ask randomly here.

(Many of these have been open-sourced, so I need to find that link in the meantime)

[wparasae]

Resource Link: https://www.figma.com/@wordpressorg

[wparasae]

Tutorial Issue Created

[wparasae]

This is ready for review: https://learn.wordpress.org/learn/lesson/how-classic-and-block-themes-are-developed/

[caraya]

I'll take a look at this.

@wparasae what would be the best way to give feedback? Here?

[westnz]

Hi @caraya
Yes, you can provide your feedback here

[caraya]

THought I had postest this last week.

Here are my notes and feedback on the course.

---

Notes on Develop Your First Low-Code Block Theme

Overall: Add tags or captions to images. If I understand correctly either one of those will be picked up by screen readers

Section 2: Design It

There is a typo... it's not Figma's theme directory, it's WordPress, isn't it?

I would also ask if there is an existing theme that they particularly like and to analyze it using the questions provided

If people will not be using Figma to do the design, then this phrase is irrelevant:

Once a Figma file has been created, revised, edited, and finalized, a designer often turns the design over to a developer to take their dreams and code it into reality using a mix of PHP, HTML, CSS, and Javascript.

Since people won't be using Figma for the design this is confusing and unnecessary. The course will show them how to do the equivalent work within the site editor.

What A New Theme Developer Needs To Know: Anatomy Of A Block Theme

This needs a transcript of the video. People may not want or be able to view the video, you need a text-based alternative

Setting Up Your Block Theme’s Development Environment

Why is the first paragraph an image? It is an image where it should be text and there is no alt text

There is no transcript for the video

Creating a WordPress Installation Using Local: Video Guide

There is no transcript for the video

Step 1: Create a style.css file

The wording of the first sentence is akward.

Perhaps explain what style.css does in the context of a theme, particularly since the file, by default, only has the WordPress comment block

Provide a transcript of what the video does or some sort of text-based equivalent.

If the do now block below the video is the explanation of what the video does then it needs to be more explicit. Looking at the material didn't make the relationship between the two clear enough for me.

Inside the do now block:

Item 3 is confusing. Where do I start to get to the app directory?

Am I supposed to right-click the site name and then select go to site folder. Am I missing something?

Creating Your Block Theme’s index.php

Provide a transcript of what the video does or some sort of text-based equivalent.

If the do now block below the video is the explanation of what the video does then it needs to be more explicit. Looking at the material didn't make the relationship between the two clear enough for me.

When asking the question: What do you notice about a block theme’s index.php (which you will be making soon) compared to a classic theme’s index.php? You should also provide the answer as an accessibility concern or provide alt text on the images so that people who rely on assistive technology won't be lost in the code.

Is there a point in offering to expand and collapse the code in the classic theme index.php?

is the section You should include an index.php file in your block theme. necessary since you're already insisting that students need to create the file?

The setting to prevent display of directories without an index file is part of the web server, not necessarily Local, XAMP, or WAMP/MAMP.

Creating index.php – video tutorial

Provide a transcript of what the video does or some sort of text-based equivalent.

If the do now block below the video is the explanation of what the video does then it needs to be more explicit. Looking at the material didn't make the relationship between the two clear enough for me.

Video Tutorial – Creating Templates Folder and index.html

Provide a transcript of what the video does or some sort of text-based equivalent.

If the do now block below the video is the explanation of what the video does then it needs to be more explicit. Looking at the material didn't make the relationship between the two clear enough for me.

Video Tutorial – Creating a theme.json

Provide a transcript of what the video does or some sort of text-based equivalent.

What does this first code do?

Move the transcript to the course. I would rather not jump around from place to place, particularly if I can play the video directly in the course

How can code in a theme.json file help or hinder you?

May be worth noting that you don't have to write code because WordPress does it for you by providing default values.

Without writing code you can't change these defaults so what you see is what you get.

Your First Code: Appearance Tools

Akward wording: Developer Document here on Appearance Tools. Should this just be Developer Documentation on Appearance Tools?

Step 2 of let's code is not complete. Rather than **Open up the quotes by typing a quotation mark ” and select “settings”. it should be ***Open up the quotes by typing a quotation mark ” and select “settings:”. The colon is missing

***Delete the word “false” and type true.
***. This is not completely accurate. Schema auto completion will vary based on the editor. Unless you keep reminding people that you're using a specific editor this should be more general.

The video needs a transcript and some sort of explanation of what the video is for. Is it illustrating what you've discussed earlier in the section or is it something else?

Your Second Code: Layout

How will the default layout look on mobile? So fat all screenshots are of desktop browsers, it may be good to show that it works on mobile browsers too

Schema auto completion will vary based on the editor. Unless you keep reminding people that you're using a specific editor this should be more general.

Layout theme.json Coding Video Tutorial

Explain the purpose of the video. Is it an audiovisual explanation of what you've covered so far?

Please provide a transcript for the video

Last Code: The Ability to Create a Color Palette in the Site Editor

Last Code: The Ability to Create a Color Palette in the Site Editor

Why not name the colors like “Red” or “Green”?

WordPress will not stop you from naming the colors with the actual color names. Using names like primary or accent imply that you have a purpose for the colors in mind and this may not always be the case.

Where do your theme’s fonts live?

Using assets as the main location of theme assets is a best practice, not a requirement. If you use assets as the main location, you should create a "fonts" folder because they are not the only resource that we should add there. Any images/scripts/resources would also go in the specific directory under assets.

Adding A Few System Fonts Code:

Remove "a few" from the section title.

This adds a single system font for each combination of browser and operating system. It may be a good idea to clarify this since not all browsers support the same system fonts and you have to make sure that the site will look OK regardless of the font that is used..

The code looks like this because the browser will load the first font that is available and the final default if there is no supported font available.

Add a transcript to the video.

Design Element Best Practices and Brainstorm.

Is the info note at the bottom of the page necessary?

Your First Template: Create A Style Guide Using the Site Editor

There are other ways to create style guides, why is this one the one you recommend?

If you have any blocks that ask you to “attempt block recovery”, please select that button. For the most part, WordPress should display any missing blocks.

Show what the "attempt block recovery" looks like so people know what type of errors they can recover from.

What should they do if they get other type of errors, how to debug the templates they just created if they need to?

User changes vs hard-coded theme defaults.

I'm concerned about using a non-feature plugins, even if it's created by WordPress contributors. This subjects the course to an uncertain level of support for the plugin.

Saving Your Work: Create Block Theme Quiz.

The quiz results are awaiting to be graded. Is this what you intended?

Selecting Your Theme’s Default Fonts.

What concrete alternatives do you suggest for handling users with dyslexia?

Is this the only accessibility concern you have?

As long as you're not sharing the theme it doesn't matter if the font is open-source or not. Despite the open source nature of WordPress open source fonts are not required

Important: Using more fonts aren’t necessarily better. But you need at leasyt four different font files (regular, italic, bold and bold italic) for each font that you want to use on your theme. Otherwise the browser will fake italic and bold and will definitely look ugly and not the way you intended your design to work.

You should also put a quick note on variable fonts (particularly from Google Fonts) since they work differently than regular fonts.

Basic Header Code and Basic Footer Code

Is this code available in the theme that you suggested people download earlier?

The WordPress Template Hierarchy.

See Template Hierarchy (developer.wordpress.org/themes/basics/template-hierarchy/) and this image

Some (But Not All!) Tips For Your style.css Content.

The URI address needs to be hosted elsewhere unless this is a TWENTY theme. You just told students that they can't use Twenty in the name of the theme so they have to host it elsewhere.

Using the Theme Author’s WordPress.org username is recommended. For example, an appropriate theme author would be “Sarah Snow” instead of “Arasae”, which is her DotOrg username. This is contradictory... wouldn't your username be Arasae rather than Sarah Snow?

Finally! Delete Your Style Guide.

Why would this be a best practice? If we want people to change the theme wouldn't they need th style guide to know where you started from?

[bsanevans]

Moving this to the Feedback project board.

Please view the last comment as feedback provided to the published content. Then, follow Validating Content Feedback issues to validate this feedback.

[digitalchild]

This is quite an old topic and there has been significant changes in block theme vs classic theme. With our new learning pathways coming soon, it will be covered there.