search

WordPress / Learn

WordPress.org Learn - The canonical source for the code and content behind https://learn.WordPress.org
274 stars 101 forks source link

[Related Course: Create a Custom Block Theme #1] Setting Styles in theme.json - Your First Template - Creating a Style Guide in the Site Editor #844

Closed wparasae closed 11 months ago

wparasae commented 2 years ago

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 guide is meant as a 'how-to' to use global styles to design the overall look and feel of a new, custom theme.

Objectives

After completing this lesson, participants will be able to:

Guidelines

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

Development Checklist:

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.

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.

Type of Instruction

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

Time Estimate (Duration)

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

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.

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.

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.

Materials Needed

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.

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

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.

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

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.

courtneyr-dev commented 2 years ago

https://github.com/WordPress/gutenberg/pull/40260

wparasae commented 1 year ago

This lesson is ready for review. If you have access to Learn WordPress' dashboard, you can view the preview of this module here:

Please add edits, comments, and fixes as a comment to this issue.

Specific Questions

  1. Clarity: Were you able to follow the steps?
  2. What questions did you have at the end of this module?
jasonsnow12 commented 1 year ago

Typos:

Clarity: It was easy to follow the steps. Coming from more traditional theme design, I always did a Style page and worked through each element in CSS so I could easily reuse the labels. I love that it is now so straight forward!

Recommendation: I would recommend putting a line in the information box above the video that the step-by-step instructions in the video are spelled out below it. The video is great, but covers a lot and I was trying to pause and click through as I went. Then I scrolled down and realized you had already planned for that. Knowing it before would be good.

fikekomala commented 1 year ago

Hi @wparasae!

I have reviewed the course, and I think it's great! I can follow the steps and I didn't have questions by the end of the module. I really appreciate this note: "This part takes some trial and error! It’s all part of the design process. Know that with every new WordPress update, the possibilities with what you can do in the site editor will get better and better.

At the moment, it’s not possible to make a theme “pixel perfect” without some code, but as WordPress evolves, so too will your ability to create block themes. Stay curious, stay patient, and have fun!"

One small note, I think there are images that are too big. For example, the Palettes/Edit colors screenshot.

wparasae commented 1 year ago

@fikekomala This is excellent feedback! Thank you very much for your time; I will make the suggested changes to the screenshots.

wparasae commented 1 year ago

Contributor feedback (screenshot) - https://d.pr/i/hQslEg

jonathanbossenger commented 1 year ago

Hey @wparasae this is great, nice work on defining how to create a style guide!

I just have two small pieces of feedback:

  1. In step 3 of creating the new page template, you have an arrow pointing to the template name, which is "Page". Unless this was intentional, this might be confusing to the learner, as they might be expecting it to say "Style Guide"
  2. In step 5: little known fact, it's actually possible to paste block code directly into the visual editor, without needing to switch to the code editor first. I'm not saying you have to edit your module, just sharing some info for future reference.
wparasae commented 1 year ago

Contributor feedback has been implemented; this lesson has been hard-published.

Piyopiyo-Kitsune commented 1 year ago

Can this issue be closed?