Use Duotone Filters to Change Color Effects - Lesson Plan

[courtneyr-dev]

https://learn.wordpress.org/lesson-plan/use-duotone-filters-to-change-color-effects/

Topic Description

Include how to apply duotone filters, as well as how to add duotone settings in Global Styles and Theme.json

Related Resources

Links to related content on Learn, HelpHub, DevHub, GitHub Gutenberg Issues, DevNotes, etc.

Guidelines

Review the team guidelines

Development Checklist:

• [ ] Gather links to Support and Developer Docs
• [ ] Consider any MarComms (marketing communications) resources and link to those
• [ ] Review any related material on Learn
• [ ] Define several SEO keywords to use in the article and where they should be prominently used
• [ ] Description and Objectives finalized
• [ ] Create an outline of the example lesson walk-through
• [ ] Draft lesson plan
• [ ] 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.

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.

Objectives

After completing this lesson, participants will be able to:

• Objective 1
• Objective 2

It’s required that you include a bulleted list of objective(s) for each lesson plan. Objectives should be worded as actions that the participant can do once they’ve finished. See Bloom's Taxonomy of Action Verbs (PDF) as a reference. Avoid using words like "know," "understand," "be introduced to," etc. There should be one assement item for each objective (see below).

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

• [ ] Demonstration
• [ ] Discussion
• [ ] Exercises
• [ ] Feedback
• [ ] Lecture (Presentation)
• [ ] Slides
• [ ] Show & Tell
• [ ] 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 hour or less
• [ ] 2-4 hours (half-day)
• [ ] 5-8 hours (full-day)
• [ ] 2 days
• [ ] 3 days or more

Prerequisite Skills

Participants will get the most from this lesson if they have familiarity with:

• Skill 1
• Skill 2

For example:

• Experience with HTML and CSS
• Completed the Basic WordPress Concepts lesson

Readiness Questions

• Question 1
• Question 2

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

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

• Slides (files included in this repo)

Materials Needed

• Item 1
• Item 2

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

• Note 1
• Note 2

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

• First do this
• Then move on to this
• Finish with this

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

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

There should be one assement 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

• Resource 1
• Resource 2

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

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]

Revise to include https://github.com/WordPress/gutenberg/issues/40061

[courtneyr-dev]

https://github.com/WordPress/gutenberg/pull/40435 See also: https://make.wordpress.org/core/2022/04/28/whats-new-in-gutenberg-13-1-27-april/ Minor screenshot revision needed

[courtneyr-dev]

Add how to unset: https://github.com/WordPress/gutenberg/pull/39564

[courtneyr-dev]

Demonstrate how to add Duotone to theme.json https://github.com/WordPress/gutenberg/pull/43671

Link to Theme.json lesson plan

[webtechpooja]

Theme.json lesson plan is not published yet - https://learn.wordpress.org/?post_type=lesson-plan&p=15349 We can link it later.

[fikekomala]

I want to contribute to this issue but I think I'm lost.. Has the lesson plan been published? What is left to do, exactly? (I'm an Editor)

[webtechpooja]

@fikekomala, yes all the WP 6.1 release related changes are done. if you want to contribute to this issue, Please review it and comment your feedback here. The link to the lesson plan: https://learn.wordpress.org/lesson-plan/use-duotone-filters-to-change-color-effects/

[fikekomala]

I reviewed the lesson plan according to the workflow described in the 'how to'. Here's my feedback.

1. There's a typo in the first sentence, 'earn' should be 'learn'
2. Under 'Materials Needed', "Theme files downloaded or beneficial if installed, You can use any block theme." 'You' should be in lowercase.
3. Add a period for bulleted lists (where needed).
4. Under 'How Do I add a Duotone?', "Now You can choose the color of your choice by clicking on the duotone circle." 'You' should be in lowercase.
5. I tested the readability, it's grade 8.8 (still under 9th grade).

[webtechpooja]

Thank you, @fikekomala for reviewing and suggesting. I have made changes according to your feedback. Can I ask, which tool you used to test the readability?

[fikekomala]

Anytime, @webtechpooja. I used this https://www.perrymarshall.com/grade/ from the 'How to Use the Review in Progress Column'.

[marklchaves]

Hi @webtechpooja, I'd love to review this doc to get my feet wet. My first comment is for the third sentence in the intro (description). That sentence is wordy and passive (tone).

The first color can be used for the shadows on the dark section and the second one which is a light color can be used for highlighting.

These kinds of sentences are harder to read.

Here's how I would rewrite that.

For example, you can use a dark color for shadows and a light color for highlighting.

[webtechpooja]

Thanks, @marklchaves for your suggestion. I'll replace it. and please let me know anything else that can be improved.

[marklchaves]

Hey @webtechpooja,

Just some more thoughts for what they're worth 😉

I always do a grammar check with Grammarly premium. There are a few comma and passive voice fixes Grammarly suggests (see the attached screen grab).

I'd also tweak the Objective section because it mixes third-person and second-person sentences. The Lesson Plan Style Guide says, "Always write in second person ..."

And, I'd tweak the Prerequisite Skills section to make sure the intro sentence flows with the bullet points and the bullets have parallelism.

I'd be happy to make these changes. Just let me know.

Cheers!

[webtechpooja]

@marklchaves, Thank you for your suggestion. Yes Please, you can suggest the changes. Please make sure the original context of sentences will not change and that improves overall readability.

[marklchaves]

Hey @webtechpooja,

Not sure how you wanted my suggestions, but here they are ;-)

Duotone Lesson Plan Suggestions

Comma fixes (from Grammarly)

• REMOVED: In this lesson, you will learn how to colorize your image and cover it with duotone filters.
• ADDED: There are tons out there with unique tones, so have fun exploring until you find what works best.
• REMOVED: You can also choose colors from your theme's palette or a custom color of your choice.
• ADDED: From the block bar button, go down towards the filters button and choose a preset.
• REMOVED: If you do not want to add your own filters and would like to inherit the default one, which code will help you to do so?
• REMOVED: Here is the result if you add the above code.
• REMOVED: Here is the result if you add the above code.
• ADDED (also change last comma to a colon): If you would like to show the default duotone, you need to add the following code to your theme:
• REMOVED: Here is the result if you add the above code.
• REMOVED: Here is the result if you add the above code.
• REMOVED: This means that you can apply a filter to an image which doesn't exist in your media library.

Objectives - Fix for mixing participants and your in the original

After completing this lesson, you'll be able to:

• Add a duotone filter to an image.
• Demonstrate the duotone filter and its uses.

Prerequisite Skills - The original lead-in and bullets weren't parallel and the 3rd bullet is redundant.

Participants will get the most from this lesson if they:

• Have a basic understanding of the WordPress dashboard.
• Know how to create a post or page with the WordPress Block Editor.
• Have a basic understanding of using blocks. Note: I made this parallel too, but it should really be deleted.

---

Hope these help!

Cheers :-)

[webtechpooja]

Thank you so much @marklchaves for all your suggestion. I'll update the lesson plans accordingly.

[courtneyr-dev]

6.3 https://make.wordpress.org/core/2023/03/13/whats-new-in-gutenberg-15-3-13-march/#leveling-up-duotone

• Duotone: Use the style engine to generate CSS for Duotone. (48281)
• Duotone: Add Global Styles controls for blocks that support duotone. (48255)
• Use Duotone presets in block duotone attributes. (48318)
• Duotone: Use CSS variables instead of slugs in block attributes. (48426)

[courtneyr-dev]

https://github.com/WordPress/gutenberg/pull/49838 6.3

Duotone styles are now generated using the WordPress Style Engine, meaning that CSS is generated as part of the block supports CSS — rather than inline.

Visuals: image of Duotone Styles interface

[kaitohm]

//assign

[github-actions[bot]]

Hi @bsanevans, thanks for your interest in this issue!
If you have any questions, do not hesitate to ask them in our #training Slack channel.
Thank you for contributing!

[nikonikobsan]

//assign

[github-actions[bot]]

Hey @nikonikobsan, this issue is already assigned to @bsanevans.
A Faculty Administrator can also add you to the list of assignees or swap you with the current assignee. Or you can take a look at other unassigned issues we have.