Applying Duotone Filters to Change Color Effects - Workshop

[courtneyr-dev]

Workshop is submitted through https://learn.wordpress.org/workshop-presenter-application/

Topic Description

Write a description of the topic here.

Related Resources

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

• https://learn.wordpress.org/lesson-plan/use-duotone-filters-to-change-color-effects/
• Apply duotone filter to placeholders for Site Logo & Post Featured Image blocks gutenberg#40061

Guidelines

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

Workshop Development Checklist

• Vetted by instructional designers for content idea
• Provide feedback of the idea
• 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 workshop
• Workshop submitted to the team for Q/A review https://blog.wordpress.tv/submission-guidelines/ & https://make.wordpress.org/training/2021/08/17/proposal-brand-guidelines-for-learn-wordpress-content/
• Workshop submitted to WPTV https://wordpress.tv/submit-video/
• Workshop published on WPTV
• Workshop is captioned https://learn.wordpress.org/handbook/handbook/workshop-captions-and-transcripts/
• Workshop created on Learn.WordPress.org
• Workshop post is reviewed for grammar, spelling, etc.
• Workshop published on Learn.WordPress.org
• Workshop announced to training team
• Workshop announced to creator
• Workshop announced to Marketing Team for promotion
• Gather feedback from workshop viewers/participants

[courtneyr-dev]

@westnz note WordPress/gutenberg#40061

[westnz]

Please provide feedback by Thursday, 21 April 😃 Here is the link to video in Slack.

[courtneyr-dev]

This looks good @westnz . Great work including the latest updates.

[westnz]

Thanks @courtneyr-dev!

[westnz]

This can be marked off of the May Sprint.

[abhansnuk]

Label reviewed for review in discussion with Courtney and Hauwa, has been reviewed.

[abhansnuk]

@westnz we are doing a lot of cross-collaboration for the release with documentation and Learn WordPress. It would be very helpful if you could add the following onto this issue, and any others with a priority for any you have done for 6.0 please. Thanks so much. A week to go, thanks for all you're doing to get the 6.0 items through.

• Could you please put the published link to workshops in the GitHub issue once it is published.

• The workshop needs to be the same name as the lesson plan, and the GitHub title needs to reflect the same. Could you please update this GitHub issue. Thanks.

[westnz]

Published Workshop: https://learn.wordpress.org/workshop/applying-duotone-filters-to-change-color-effects/

[courtneyr-dev]

WordPress/gutenberg#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: WordPress/gutenberg#39564

[Piyopiyo-Kitsune]

@westnz will you be working on these revisions or does this require reassigment?

[westnz]

Thanks, Desinty. I have taken note of this, but will only get to this a bit later. There are some other things that are taking precedence.

[westnz]

Updated with small UI changes in the text portion with explanation + screenshots as discussed in the Training Team.

[abhansnuk]

Can we remove the 'priority low' label to this now that it is published? We could do this for other items too. Thanks.

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

WordPress/gutenberg#49838 6.3

Finally, 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

[westnz]

I will work on updating this tutorial this week.

[westnz]

6.3.Duotone.tutorial.mp4

[github-actions]

This content is ready to be reviewed. Please follow the steps listed under Guidelines for reviewing content. Thank you for your contribution! ✨

[digitalchild]

@westnz Another tutorial well done. Yet another feature I didn't know about. As per the checklist, everything is all good!

Tutorial Review Checklist

Please tick all items you've confirmed:

• Learning outcomes/objectives are clear.
• Technical concepts introduced in the content are accurate.
• The speed of demonstrations are easy to follow.
• The narration audio matches what is shown visually.
• Spelling and grammar are correct.
• Sound quality is consistent throughout the video.
• Brand Usage Guidelines and Promotional Guidelines are being followed.
• Media assets are all in the public domain (CC0).

[westnz]

Thank you so much @digitalchild 👍

[Rashigupta2999]

Hi @westnz ,

I believe this video is fantastic for anyone looking to grasp the concept of the duotone filter. You've done a great job explaining the key points in a straightforward manner.

Revision
There is a minor spelling mistake on the first slide where "Duotone" is spelled incorrectly in the Learning Outcomes slide. Could you please correct it?

[westnz]

Thank you, @Rashigupta2999. I will update those slides!

[westnz]

Thanks for the feedback. I will publish it this week.

[westnz]

Published: https://learn.wordpress.org/tutorial/applying-duotone-filters-to-change-color-effects/