Learn icon indicating copy to clipboard operation
Learn copied to clipboard

Published 20 hours ago • verified publisher icon WordPress

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

Open courtneyr-dev opened this issue 3 years ago • 25 comments
trafficstars

This issue updated by @wparasae on September 23rd 2022

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

  • [x] ANY CONTRIBUTOR: Submit a course proposal (form TBD)
  • [x] 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
  • [x] 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.
  • [x] 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!
  • [x] 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.
  • [x] ANY CONTRIBUTOR: Find lesson plans that already exist and link them to this course -- this step can be done with your buddy or independently.
  • [x] COURSE DESIGNER: Create new required lesson plans and link them to this this step -- can be done with your buddy or independently
  • [x] FACULTY BUDDY: Create course frame in Sensei (Need to figure out how Lesson Plans / Courses / Content will Merge)
  • [x] 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.
  • [x] ANY CONTRIBUTOR / COURSE DESIGNER: Identify workshops and create as needed or submit requests for workshops to be created with the training team
  • [x] FACULTY BUDDY: Check in with the COURSE DESIGNER.
  • [x] 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

2. Setting Up Your Development Environment and Essential Files

3. Using the Site Editor to Build Your Custom Theme

4. Advanced Custom Theming: Low-Code Challenge

5. Theme Enhancements: Advanced Options to Make Your Theme Stand Out Changes: This module will likely be moved into module #4 and removed; 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.

6. Exporting Your Theme: Making Your Changes Permanent

courtneyr-dev avatar Mar 02 '22 17:03 courtneyr-dev

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

wparasae avatar Jun 29 '22 23:06 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.

wparasae avatar Jul 14 '22 20:07 wparasae

@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 avatar Jul 15 '22 10:07 jonathanbossenger

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

jonathanbossenger avatar Jul 15 '22 11:07 jonathanbossenger

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!)
  • [x] 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!)
  • [x] 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.

wparasae avatar Jul 20 '22 18:07 wparasae

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?

colorful-tones avatar Jul 20 '22 21:07 colorful-tones

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 avatar Jul 21 '22 16:07 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 –

Designing Advanced Layouts with Core Blocks

Tutorials

Materials Still Under Review - In Progress

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

Remedial Online Workshops:

Remediation Tutorials

(Moved from Below)

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

wparasae avatar Jul 21 '22 16:07 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

wparasae avatar Jul 22 '22 19:07 wparasae 

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.

jonathanbossenger avatar Jul 25 '22 06:07 jonathanbossenger

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 avatar Aug 01 '22 20:08 wparasae

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

wparasae avatar Aug 07 '22 17:08 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 avatar Aug 09 '22 21:08 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 avatar Aug 17 '22 00:08 wparasae

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

wparasae avatar Aug 26 '22 19:08 wparasae

@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?

jonathanbossenger avatar Aug 28 '22 21:08 jonathanbossenger

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

wparasae avatar Aug 29 '22 19:08 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.

wparasae avatar Aug 29 '22 19:08 wparasae

Notes on Design and Accessibility -Good design is good for accessibility. Some things to weave into this course:

-Consider mixed case for people with dyslexia; all uppercase or all lowercase may fit your aesthetic, but it may make it challenging for everyone to access your content.

-Mini-lesson on headings and heading sizes; how to use headings (like a college essay) - might be a good supplementary tutorial.

-All links are underlined, and only links are underlined; this helps people with color-blindness find what are actual links and what are not.

-Videos have two things: accurate captions, and a transcript immediately after the video.

-Videos must be able to be started and paused.

-No images added of text.

-QueryLoop for SkipLinks -- advanced must be set to "HTML Element: Main" for this to appear.

-If a sidebar exists, people who use screenreaders often prefer sidebars on the right so they can access the content faster. Some people who use screen readers simply use the 'tab' key, so consider what the most important information is first and include that first.

wparasae avatar Sep 09 '22 21:09 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 avatar Sep 10 '22 18:09 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.

wparasae avatar Sep 20 '22 18:09 wparasae

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: image

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!

westnz avatar Sep 27 '22 01:09 westnz

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

wparasae avatar Sep 27 '22 21:09 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 avatar Oct 20 '22 17:10 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 avatar Oct 20 '22 21:10 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 avatar Nov 22 '22 23:11 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 avatar Dec 22 '22 17:12 wparasae

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

wparasae avatar Jan 12 '23 23:01 wparasae

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)

courtneyr-dev avatar Oct 11 '23 19:10 courtneyr-dev

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.

kaitohm avatar Dec 05 '23 04:12 kaitohm