Course: Create a Block Theme (Low-Code) - Course #1

[courtneyr-dev]

This issue updated by @wparasae on September 23rd 2022

Designing a Course from Start to Finish (Brainstorm Checklist Rough Draft Template)

• ANY CONTRIBUTOR: Submit a course proposal (form TBD)
• ANY CONTRIBUTOR: Course proposal will be reviewed; if approved, move onto the next step -- course proposer does not have to be the course designer. This intention should be made clear when someone submits a course idea (i.e. ask the question, "Do you want to be the course designer?) NEED: Define "Course Designer" and what all that entails
• COURSE DESIGNER: Complete a Course brainstorm (see questions below) -- there are no right or wrong answers here, this is just to get your ideas down on paper.
• COURSE DESIGNER: Meet with Course Faculty Buddy to "Chunk" your course into Modules & Lessons - Your buddy will help you write lesson objectives and chat with you about your awesome course idea!
• ANY CONTRIBUTOR: Find related resources on Learn.WordPress.org that already exist, link to each of them in this example -- this step can be done with your buddy or independently.
• ANY CONTRIBUTOR: Find lesson plans that already exist and link them to this course -- this step can be done with your buddy or independently.
• COURSE DESIGNER: Create new required lesson plans and link them to this this step -- can be done with your buddy or independently
• FACULTY BUDDY: Create course frame in Sensei (Need to figure out how Lesson Plans / Courses / Content will Merge)
• ANY CONTRIBUTOR: Write lesson plans (Google docs or in Sensei frame?) (Or in the lesson plan format, unclear where this is going at the moment...)
• ANY CONTRIBUTOR: As each lesson plan is created, submit it to the Training team to be reviewed.
• ANY CONTRIBUTOR: Review submitted lesson plan; COURSE DESIGNER should also review and modify lesson plans as they are submitted.
• ANY CONTRIBUTOR / COURSE DESIGNER: Identify workshops and create as needed or submit requests for workshops to be created with the training team
• FACULTY BUDDY: Check in with the COURSE DESIGNER.
• COURSE DESIGNER: Write course introduction (can be done at any point) - potentially want a frame for this to help standardize or make it easier to brainstorm.
• ANY CONTRIBUTOR: Content & Accessibility Review
• ANY CONTRIBUTOR: Copy Editing + Reach out to Marketing about Promotions
• COURSE DESIGNER + FACULTY BUDDY: Publish
• ANY CONTRIBUTOR: Celebrate!

---

COURSE BRAINSTORM

Course Template: Create a Block Theme (Low Code) - Course #1
Course Designer: Sarah Snow (wparasae) - Message me in the #training channel (@arasae) if you have questions or would like to help!

Brainstorm Questions: You can either complete this brainstorm with the buddy or you can answer these questions (no wrong answers!) ahead of time.

1. What is the problem that this course is trying to solve? Describe it.
There is a gap between what an intermediate WordPress user / Figma course designer know about building themes from scratch. This course works to bridge that gap; for users who want to be able to design a fully custom theme of their own, they will learn the fundamentals of theme creation. Designers will be empowered to create themes of their own in the site editor. It will also help prepare learners develop vocabulary to talk about this process and familiarize themselves with new developers. The goal is to bridge the gap between intermediate WordPress user and beginning WordPress developer.

2. Course OBJECTIVE: What is a PROJECT someone should be able to complete if they take this course?
"By the end of this course, a learner should be able to... (list 1 or 2 project ideas)

Intermediate users and theme Figma designers will be able to...
-Build a fully functional, custom WordPress theme with very little coding (theme.json) required.

3. Who is the audience for this course? How will this course address this need?
Designers / Intermediate Users who want to become theme designers - designers who use Figma -- course #1 empowers them to design their own custom WordPress theme using WordPress' full site editor. It also should illustrate different kinds of best practices in building a block theme.

4. Describe the Audience: What should this audience already know and be able to do comfortably? Bonus: What MIGHT this audience already know?

This audience (intermediate users and Figma designers) already knows how to...
-Navigate the WordPress dashboard comfortably
-How to install and update themes
-How to identify a classic theme vs. a block theme
-Use the site editor (including list view, using blocks, using patterns, etc.)

This audience MIGHT already know...
-The general process of classic theme development
-How to use Figma to design certain themes

5. Look at your overall course objective. Brainstorm (no right or wrong answers here): As you consider the project you're hoping people will be able to do, ask yourself:

• What are the things your audience doesn't know about this topic yet?
• Or, conversely, what are some questions they might ask about your topic?**

-The process of block theme creation from start to finish
-Detailed differences between block, classic, hybrid, and universal themes
-The anatomy of a block theme (what each file is and how they work together)
-How to use a text editor to navigate to a theme's files
-How to create new files using a text editor
-What a theme.json does, how it works, and how to use schema to help new users design
-The different templates that make up
-Template hierarchy: how it works in-context. When you forget a 404 page, what happens?
-Users may not know of design best practices, so we may want to include them on each template or template part.

Questions an intermediate user might have:
-What's a splash page, and what are best practices about designing them?
-What are the different template parts? What are required? Why? What happens if I don't have these templates?
-What are the best practices for designing a header or footer? (Maybe link out to a workshop, SLS?)
-What are font and color best practices when it comes to theme design?

Questions a designer might have:
-Why should I use the site editor instead of Figma?
-What are the current limitations of the site editor? What are the possibilities? Where can I learn more about code?

Questions both will have:
-How does theme.json work, and how does it help me?
-What are "semantic colors" and why should I use them?
-How do I pick and use fonts in my theme?
-What are the benefits of lock blocking? How does someone lock a block so that a user who uses this custom theme can't delete essential part?

6. What resources already exist? Check learn.wordpress.org for tutorials, lesson plans, courses, and former social learning spaces that already exist. Link to them below. (This can be done with your buddy or at a later point).

**Other Considerations: (Optional)

• What vocabulary will this audience need to learn? Write a list of terms and definitions as a brainstorm.
• What information do you have? Conversely, what information do you NOT have yet that you need in order to complete this course? We can work to pair you with a subject matter expert or reach out for other contributor help if needed.
  **

Next steps: Work with your buddy to create a course outline using this brainstorm. Your instructional design buddy will walk you through "chunking" the content into modules and individual lessons, and help you come up with learning objectives for each module and/or lesson. From there, you can create lesson plan templates to link to the course.

---

COURSE OUTLINE - Find/Create + Link Lesson Plans

Modules:
1. Building Background Knowledge: The Theme Creation Process

• Developing Different Types of Themes: Overview - Now Available on Learn
• How Classic and Block Themes Are Developed Now Available on Learn
• What a Theme Designer Needs to Know: Anatomy of a Block Theme Now Available on Learn

2. Setting Up Your Development Environment and Essential Files

• Setting Up Your Block Theme's Development Environment Now Available on Learn
• Creating Your Block Theme's style.css Now Available on Learn
• Creating Your Block theme’s index.php Now Available on Learn
• Your Block Theme’s theme.json Now Available on Learn

3. Using the Site Editor to Build Your Custom Theme

• The Basics of theme.json for New Developers - Now Available on Learn
• Your First Codes in theme.json: Appearance Tools (Activity from 1st lesson in this module )
• [A Website's Look & Feel: Design Best Practices] ([Related Course: Create a Custom Block Theme #1] A Website's Look and Feel: Design Element Best Practices and Brainstorm COURSE Lesson Plan #838)
• Your First Template: Create A Style Guide Using the Site Editor Now Available on Learn
• Block Theme Design Challenge: Templates In The Site Editor] ([Related Course: Create a Custom Block Theme #1] Block Theme Design Challenge: Templates In The Site Editor (Course Lesson Plan) #841) Now Available on Learn

4. Advanced Custom Theming: Low-Code Challenge

• Saving Your Work with Create Block theme Now Available on Learn
• Selecting Your Theme's Default Fonts Now Available on Learn
• Your First Template: Create a Style Guide Using the Site Editor Now Available on Learn
• (Exercise) Using Patterns to Design Your Header & Footer Template Parts Now Available on Learn
• Block Theme Design Challenge: Templates in the Site Editor Now Available on Learn

5. Theme Enhancements: Advanced Options to Make Your Theme Stand Out
Changes: This module will be heavily revised; each of these is pretty heavily based in code, and a different module for each is probably more than a beginning theme developer might need to know.

• Final Lessons: A Github Issue has been created to publicly aggregate feedback for all of module #5.

[wparasae]

I think this card relates to the Block Theme Development. Assigning this to myself, as it's next on the list.

[wparasae]

Quick Update: This course is likely going to be split into two leveled courses based on audience need. Working on a structured brainstorm, following a similar process to the one outlined in Make/Training.

Will drop a more detailed update soon.

[jonathanbossenger]

@wparasae I've renamed this to match the name we're considering for this course, and also so that I can create the second-course ticket

[jonathanbossenger]

Status update post - https://make.wordpress.org/training/2022/07/15/block-theme-development-course-update/

[wparasae]

Here is a link to the rough draft course outline for Course #1.

Next Steps:

• Any Contributor: Find related resources that already exist, link to it in this example (leave a comment with these links if you're helping out!)
• Any Contributor: Find lesson plans that already exist and link them to this course (leave a comment with these links if you're helping out!)
• Sarah: Create new required lesson plans and link them to this
• Sarah: Create course frame in Sensei

One blocker I'm facing is:
There is a lesson plan on WordPress hierarchy; if it's in isolation, it won't really make sense. However, if it's built into the course, it will have additional information that won't make sense in isolation. I need to work through this a little bit.

[colorful-tones]

Any Contributor: Find related resources that already exist, link to it in this example (leave a comment with these links if you're helping out!)

n00b here 👋

I would encourage us leveraging new tools like Create Block Theme plugin alongside the recent Figma file for Theme Design to steps builders through designing, generating and implementing a block theme utilizing these tools. I would be happy to help organize and run a workshop for this.

General plan:

• Create a minimal and engaging design using the Theme Design Figma file
• Scaffold a new blank block theme with the Create Block Theme plugin
• Hook up all design elements in Figma to apply to generated block theme

Would any of this be helpful?

[wparasae]

Yes, absolutely! This sounds fantastic.

I would love to see where this fits into the course, and I would be delighted to help you plan and run a Live Online Workshop on this topic. Let's connect -- all of that is brilliant and I would welcome the help!

[wparasae]

Related Resources

I've turned this into a checklist to mark off when I have utilized each resource either in the course or to use for content so that I can keep track of what I've already seen and what I haven't.

Creating a Block Based Theme with Daisy O –

• - Part 1: https://www.youtube.com/watch?v=NX_7P2lvuwU&list=UU_kRIqFHtN8ccB_mTmHyGDg&index=17
• - Part 2: https://www.youtube.com/watch?v=Ky-bS4iUlDo&list=UU_kRIqFHtN8ccB_mTmHyGDg&index=16
• - Part 3: https://www.youtube.com/watch?v=kmbiQ6TsYd0&list=UU_kRIqFHtN8ccB_mTmHyGDg&index=10

Designing Advanced Layouts with Core Blocks

• No Code Required: Let's Build a Custom Theme

Tutorials

• Using Schema with Theme.json
• Anatomy of a Block Theme

Materials Still Under Review - In Progress

• Create a Landing Page with a Block Theme
• Theme.json Lesson Plan
• Block Locking Lesson Plan
• How to use the Group Block

Remediation and/or Supplementary Knowledge Resources (Link out for Beginner Background-Info Building)

• Building a Homepage with a Block Theme
  Zero to Block Theme
• Foundations: https://www.youtube.com/watch?v=ntT1GT6Yr3w
• Theme.json + schema: https://www.youtube.com/watch?v=cjSZOJZspe0
• Theme.json continued: https://www.youtube.com/watch?v=LxIjfkc9O0Q
• Templates + Template Parts (Will need an update): https://www.youtube.com/watch?v=APsu8Jc570A
• Site Editor to Theme: https://www.youtube.com/watch?v=X5NopfVXDQM

Remedial Online Workshops:

• Explore the Template Editor

• Explore the Block Directory

• Builder Basics: Everything You Need to Know About Patterns

• Builder Basics: Working with Templates

• - Part 1

• - Part 2

• - Part 3

• Showcasing Content with Query Loops

• Headers and Footers in Full Site Editing

• Layout, Alignment, Dimensions, and Spacing

• Columns, Groups, and Row Blocks

Remediation Tutorials

• The Difference Between Reusable Blocks, Block Patterns, Templates, and Template Parts
• Building Sidebars with the Site Editor
• Navigation Block: Create a Menu
• Local WordPress Installations for Beginners
• Choosing and Installing a Theme

(Moved from Below)

• https://developer.wordpress.org/themes/block-themes/converting-a-classic-theme-to-a-block-theme/
• Block Themes: https://developer.wordpress.org/themes/block-themes/
• Block Theme Setup: https://developer.wordpress.org/themes/block-themes/block-theme-setup/
• https://developer.wordpress.org/themes/classic-themes/

[wparasae]

Update: The modules under "Theme Enhancements" probably should be courses or mini-courses of their own. I may separate them from this course and simply do a quick summary of them so people know they exist, but each of these lessons are probably mini-courses of their own. Will separate accordingly.

[wparasae]

This course is taking shape. Modules 1-3 are in rough draft form in Learn itself, but need screenshots, polish, and a workshop video. I talked with Jonathan today about moving template creation & template hierarchy to the second module of his course to better scaffold learners.

Tackling the issue of creating a polished style guide for module #3.

Modules #5 and #6 will be condensed significantly, as these topics are code-heavy and better suited for @jonathanbossenger's course.

[westnz]

Module 1 + 2 Review

• Engaging introduction. The questions posed to learners are very effective. The dropdown for people who are unsure if they must take the course is a nice touch.

• I would only use the word ‘intermediate’ once here:
  ‘Take this intermediate-level course geared toward intermediate WordPress users’

• Double-check that you write Site Editor with capital letters everywhere in the course.

Different types of themes - overview

• This is very clever = What do people love about classic themes versus block themes
  Ensure all bullet points are the same and don’t have full stops.

• I am wondering if the reference to universal and hybrid themes might be confusing to folks at this level?

How Classic And Block Themes Are Developed

• You have effectively used the call-out/reflection boxes so far.

• Solid background knowledge is being built in this module. There might be value in shortening this lesson to get to the core part of what the learner’s focus is going to be.

Setting Up Your Block Theme’s Development Environment

This Tutorial is not displaying correctly:

I really like the ‘Are you ready to move forward' checklist. It makes it clear about exactly what needs to happen.

When I press ‘Next Lesson’, it goes to the same page. It only moves on to the next lesson when I press ‘Next Lesson’ again?

Creating Your Block Theme’s style.css

The ‘Do Now’ sections work very well. It is practical and creates a sense of urgency to act.

GET TECHNICAL: SETTING UP YOUR DEVELOPMENT ENVIRONMENT AND ESSENTIAL FILES

The way you have chunked the steps allows learners to digest things, and it makes it easier to follow. Well done!

[wparasae]

@westnz - I appreciate your feedback and have made those changes! Thank you for your keen eye and insight!

[wparasae]

Course Name Updated - I've been considering the name of this course, and after discussing it with @jonathanbossenger and @hlashbrooke, have decided to update it to "Develop Your First Low-Code Block Theme" to better reflect what it is a learner will get out of this course. This is an easily reversible decision, so if there is concern, questions, or if it doesn't translate well for some reason, we can always iterate!

[wparasae]

Second Update: Module #3 has been started (see The Basics of Theme.json for new developers lesson plan) and is in-progress. It would make a good video tutorial, but it's also satisfactory as text; screenshots and short rough draft videos are included.

[wparasae]

Update: Module #3 is ready for review. Please leave all comments on the related lesson plan. You must have access to Learn WordPress to review. The deadline for reviewing content will be December 2nd, 2022

Reminder: This module is meant to make developer-level content easier for intermediate WordPress users.

Specific Questions For Feedback
a. Is the content correct? Are there any errors?
b. Do any lessons need to be split up? Specifically #2: Your First Codes and #5: Block Theme Design challenge?
c. What revisions might you suggest for added clarity?

1. The Basics of theme.json for New Developers - Review Module 3, Lesson 1 Here / Leave Feedback for Module 3, Lesson 1 Here

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

3. A Website's Look and Feel: Design Element Best Practices and Brainstorm: Review Module 3, Lesson 3 Here / Leave Feedback for Module 3, Lesson 3 Here

4. Your First Template: Create A Style Guide Using the Site Editor: Review Module 3, Lesson 4 Here / Leave Feedback for Module 3, Lesson 4 Here

5. Block Theme Design Challenge: Templates In The Site Editor - Review Module 3, Lesson 5 Here / Leave Feedback for Module 3, Lesson 5 Here

A Note: Lesson 5 (Block Theme Design Challenge: Templates in the Site Editor), specifically, I worry doesn't have enough guidance for an intermediate WordPress user; that said, someone who is creating their own custom block theme should already have a strong grasp of the site editor. Any feedback you have for this, specifically, would be helpful!

[wparasae]

Course Update

Module #3 has been iterated upon to set learners up for success in using fonts, low-code style.
Module #4 / 5 / 6 have changed significantly in order to embrace using the site editor for the majority of theme design and to avoid redundancy with another course. I'm making changes to the original post to reflect that. Module #4 should be available for review end-of-day today or tomorrow.

[wparasae]

Module 4 has been hard-published; I am adding transcripts to the videos, and then can announce.

[courtneyr-dev]

WP 6.4
Visuals: demo of both setting an aspect ratio on the placeholder and using it within a wireframe pattern.
Adoption approach: N/A
Key Make Posts/GitHub/Trac Issue(s): Add aspect ratio to image placeholder (54216)

[bsanevans]

Closing, as this post was designed to track the overall progress of the course. If updates are needed, please submit a Feedback issue type instead so that it can be triaged.