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

[courtneyr-dev]

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. Defining The Theme Creation Process

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

2. Setting Up Your Development Environment and Essential Files

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

3. Using the Site Editor to Build Your Custom Theme

• Your First Template: Create A Landing Page
• Block Theme Building Blocks: Create a Header and Footer Template Parts
• Thinking Ahead: Consider Lock Blocking for Template Parts
• Your Block Theme And The WordPress Template Hierarchy
• Block Theme Essentials Design Challenge (This is an activity moreso than a lesson plan; it should bring together all the knowledge people have learned so far, so I'm not sure a lesson plan is the best way to go for this.)

4. Advanced Custom Theming: Low-Code Challenge

• The Basics of theme.json for New Developers
• Your First Code in theme.json: Toggling Options Off & On
• Setting Basic Presets in theme.json - Choosing Your Theme's Colors
• Setting Fonts in theme.json
• Lock Blocking Basics in theme.json (?)

5. Theme Enhancements: Advanced Options to Make Your Theme Stand Out

• Overview of Theme Enhancements
• Offering Reusable Blocks
• Offering Unique Templates
• Offering Unique Patterns
• Offering Style Variations
• Curating Options with theme.json: Locked Settings
• Know What's Coming: Descendent Styles On the Horizon (Leaving this blank for now as this is not a feature presently in core)

6. Exporting Your Theme: Making Your Changes Permanent

• Completing Your Custom Theme: How and Why You Should Export Your Theme
• What's Next? Overview of Distributing Your Custom Block Theme (High-Level, Links to Docs Mostly)
• Conclusion and Celebration: Extensions + Resources + Link to 2nd Course

[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]

Related Helpful Tutorials and/or Live Workshops:
High-level overview of how themes are created and distributed in 8 minutes or less
An overview of theme.json for beginners
Lock Blocking: The difference between locked themes and unlocked themes and why designers might want to lock certain elements (like headers, footers, and theme blocks) or not.
Template Hierarchy: Beginner-Level
Supports in theme.json: toggling things off and on.
Fonts in Block Themes
How to Lock Blocks in theme.json for beginners
How + Why to Export Custom Block Themes

[jonathanbossenger]

Lock Blocking: The difference between locked themes and unlocked themes and why designers might want to lock certain

I think this should be Block Locking, at the moment afaik it's only possible to lock blocks, or block templates (ie collections of blocks) but not theme templates or theme template parts.

[wparasae]

The following tutorials may be requested and/or made by me:
-Essential Design Elements in Themes
-How to Set Up a Development Environment
-Style.css in block themes
-Introduction to the WordPress Template Hierarchy

[wparasae]

Dropping More Resources for Myself: (Checkbox is to list that I've used a resource) (MOVED TO ABOVE)

[wparasae]

And, I am currently digging through the Design team's handbook and figuring out the best ways to weave existing docs into this course. Here are EVEN MORE RESOURCES (all located in or linked from the WordPress.org handbooks, so should be good for this course):

• https://make.wordpress.org/accessibility/handbook/design/use-of-color/
• https://make.wordpress.org/design/handbook/workflows/writing-a-call-for-design/
• Generally for WordPress.org design itself, BUT has some good best-practices: https://make.wordpress.org/design/dashicons-style-guide/
• Weights and Styles on WordPress, but could be used as an example of a best practice: https://make.wordpress.org/design/handbook/design-guide/foundations/typography/
• Accessibility and colors (linked on DotOrg so probably fine here) https://webaim.org/resources/contrastchecker/
• Accessibility contrast checker: https://webaim.org/resources/contrastchecker/
• Background and Text Contrast Checker: http://www.brandwood.com/a11y/
• Figma Course as an extension (Linked from DotOrg) https://medium.com/quick-code/top-online-tutorials-to-learn-figma-for-ui-ux-design-4e9c6721a72d
• On Link Underlines: https://adrianroselli.com/2016/06/on-link-underlines.html
• Getting Started with Figma: https://help.figma.com/hc/en-us/categories/360002051613-Getting-Started
• https://make.wordpress.org/design/2022/07/01/open-sourcing-theme-designs/

[wparasae]

Update: Rough drafts are almost finished for modules 1 and 2. I am hoping to have them ready for training team review at the end of next week. I'm currently in the process of designing some stand-alone tutorials that are necessary for these two modules. They don't have their own issues yet, but I will probably create issues tomorrow for them for tracking purposes. If we can get them reviewed and finalized, we can potentially publish this module by module to get this content out there faster!

[wparasae]

Another link: https://developer.wordpress.org/themes/basics/main-stylesheet-style-css/#explanations

[jonathanbossenger]

@wparasae earlier you mentioned that a workshop or tutorial on fonts in block themes would be useful.

I'm assuming you'd want that to cover things like what fonts are available by default for a low code block theme (aka not how to add custom fonts) and how to apply these fonts in theme.json, either globally, or on a block level?

Any other font-related questions that you feel a workshop or tutorial could cover?

[wparasae]

Nope, you've beautifully illustrated them, Jonathan! Thank you!

[wparasae]

I had a lovely call with SME Hardeep Asrani - the notes from our conversation about the different parts of what is required in a style.css to submit a theme to the themes directory can be found here.