Tutorial - Add media and Openverse images to your content directly from the Inserter

[westnz]

Topic Description

With WordPress 6.2, you will be able to both add media directly from your library from the Inserter and search/select images from Openverse for openly-licensed media.

Related Resources

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

• [ ]

Guidelines

Review the team guidelines

Tutorial Development Checklist

• Vetted by instructional designers for content idea
• Provide feedback of the idea
• Gather links to Support and Developer Docs
• 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
• Tutorial created and announced to the team for Q/A review
• Tutorial reviewed and ready to publish
• Tutorial submitted and published to WPTV
• Tutorial published on WPTV
• Tutorial captioned
• Tutorial created on Learn.WordPress.org
• Tutorial post reviewed for grammar, spelling, etc.
• Tutorial published on Learn.WordPress.org
• Tutorial announced to Marketing Team for promotion

[westnz]

Add.images.via.the.Inserter.Tutorial.mp4

[vagelisp]

Looking good to me. Well done @westnz !

[westnz]

Thanks @vagelisp

[nomad-skateboarding-dev]

Overall Impression

Great job on this, Wes! I thought the presentation, delivery, and length were spot on. Easy to understand, and enjoyable to listen to. 🙂

Specific Feedback

• At 2:29, you say, "set the overlay to 30 pixels". I'm not sure what the correct term is here? Opacity, transparency, overlay percentage, or something else?

This is a general thought for all Learn content: Do we want to explore best practices, the block's settings, or both in tutorials?

• Example: Text on image overlay is the biggest contributor to accessibility issues along with missing link tags. Note in example to especially check the contrast if it's text on image?
• Example: We could show both how the Border Radius can be set on all four sides, while at the same time pointing out that making a cool border by using different radius' not only looks great, but decreases page load time and environmental impacts.

[westnz]

Hi @nomad-skateboarding-dev
Thank you for the helpful feedback. I used the term 'Overlay Opacity' as that is what it is called in the sidebar settings. Opacity by itself could also work.

Your thought about best practices is something I will definitely take on board, depending on the context. This is something we can chat about more.

The second example you mentioned is something I didn't know.

[nomad-skateboarding-dev]

Thank you for the helpful feedback. I used the term 'Overlay Opacity' as that is what it is called in the sidebar settings. Opacity by itself could also work.

I apologies my feedback wasn't clearer, Wes!

I was referring specifically to the word "pixels". 🙂🙌

Should I edit my feedback above, Wes?

[westnz]

Ah! Got it 😆 Thank you

[westnz]

Yes, should be 'percentage'

[nomad-skateboarding-dev]

Yes, should be 'percentage'

Thank you for the update, now I know as well. 🙂🙌

[wparasae]

Review:
Suggestion: Add a transition between :10 and :11
Suggestion: The images shown between :11 and :23 all show a particular demographic--is there another example you could use here from the start that might be more inclusive to people of differing cultures, genders, abilities, or racial backgrounds? The rest of your images are thoughtfully chosen, but this would make our content stronger and more inclusive from the very beginning. :)

Overall, this looks fabulous, Wes! Another stellar tutorial. Thank you for all your great work!

[westnz]

Thank you for the feedback and suggestions @wparasae

[westnz]

Published: https://learn.wordpress.org/tutorial/add-media-and-openverse-images-to-your-content-directly-from-the-inserter/

[courtneyr-dev]

WordPress/gutenberg#51132 Lightbox added in WP 6.4

[westnz]

Lightbox is not relevant to this tutorial 👍