Uncovering the Cover Block

[westnz]

[westnz]

https://user-images.githubusercontent.com/89751452/188335975-8b3bb6f4-fddf-4433-9a2d-be4ef570d804.mp4

[azhiya]

@artdecotech has volunteered to review this.

[artdecotech]

Hi @westnz – this is a great tutorial! I learned a lot.

One concern during the Roger Lister CTA example, the text is not legible when it is in front of his face, I wonder if that would be the case on small screen sizes? I have read that it's important to keep contrast and mobile screen sizes in mind when using the Cover block. Showing how to preview the page on mobile might be helpful here. Not a show stopper though.

Looking at other tutorials online, I wonder if it would make sense to show a cover block in line with text around it / alternate alignment options beyond full width.

Great work! I'd be happy to publish it as is, but just a few thoughts as I reviewed it. I loved the intro image too, better than just the boring blue. And it looks like a Cover block :D

[westnz]

Hey @artdecotech

Thank you very much for the feedback.

the text is not legible when it is in front of his face When you open the List View and Sidebar Settings that usually happens, but when you close it you will see that everything is in proportion. Showing the mobile screen preview is a great idea. I will see how it looks.

show a cover block in line with text around it / alternate alignment options beyond full width. Can you share a screenshot of an example? The only problem is that the tutorial is already longer than intended.

Really appreciate your input!

[amitpatel0702]

Hi @westnz,

Thanks for the great tutorial. Here are my comments.

• You covered the following crucial topics very well.

1. Cover block is a container block and it can contain other blocks in it.
2. Focal point setting which is really helpful for mobile views.
3. Dual tone settings in the background.

• I like your style of presentation. Loved the way you added "Color to match Roger's shirt" 🙂
• Overall extremely helpful tutorial explaining the power of Cover Block.

Thanks.

[westnz]

Thank you very much @amitpatel0702

[westnz]

Review: CTA example M: "should not use headers for text size or styling, headers are for identifying sections"

[westnz]

Published: https://learn.wordpress.org/tutorial/uncovering-the-cover-block/

[courtneyr-dev]

6.3 https://make.wordpress.org/core/2023/03/22/whats-new-in-gutenberg-15-4-22-march/#color-and-layout-support-for-cover-block

[courtneyr-dev]

https://github.com/WordPress/gutenberg/pull/41153 6.3 image of text color controls, image of layout controls. https://github.com/WordPress/gutenberg/pull/45326 Add text color controls and borders support (41153). Add text color controls (41572). Simplify cover block description. (50355). Add constrained/flow layout to Cover block (45326).

[westnz]

I plan to update and use this tutorial in the learning pathway project.

[lada7042]

@westnz I am giving myself a due date of June 7th for this lesson.

[github-actions[bot]]

Lesson Development Checklist

• [x] Gather any relevant links to Support, Docs, or related material
• [x] Description and Objectives finalized
• [ ] Lesson created and announced to the team for review
• [ ] Lesson reviewed
• [ ] Lesson video submitted and published to WPTV
• [ ] Lesson created on Learn.WordPress.org
• [ ] Lesson video published to YouTube
• [ ] Lesson on Learn.WordPress.org updated with YouTube video
• [ ] Lesson published to Learn.WordPress.org

[westnz]

https://github.com/WordPress/Learn/assets/89751452/45bee740-849e-4133-8b75-5d2dd7b8c795

[moltilearn]

Another review for contributor day today, and here is my comment. Thanks for your great video, i followed your instructions step-by-step and could create the examples with ease. I struggled with the parallax example at 4.40 with the block spacing setting, I didn't see the option. We at contributor day found out that it depents on the theme, in my case I use Neve, after changing the theme to Twenty Twenty-Two, the block spacing option is there. Do we need to mention that it can be different depending on theme set?
Cheers from Torino.

[ironnysh]

Tutorial/Lessons Review Checklist

• [x] Learning outcomes/objectives are clear.
• [x] Technical concepts introduced in the content are accurate.
• [x] The speed of demonstrations are easy to follow.
• [x] The narration audio matches what is shown visually.
• [x] Spelling and grammar are correct.
• [x] 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).

Great tutorial, @westnz. The hands-on demos are very cool.

There's one a11y issue with the hero video example: it defaults to autoplay and loop, which is a WCAG violation (and somewhat annoying 😅).

The problem is caused by how the block was coded in Gutenberg (see this open issue), but I think it's worth pointing out in the lesson.

[westnz]

Thank you for the feedback folks

@ironnysh, I think I am going to use another example instead of the video banner then.

[westnz]

https://github.com/WordPress/Learn/assets/89751452/70b7090c-4707-4cc6-96d9-ed3ba8010926

[westnz]

Added a new version and re-recorded the first example.

[westnz]

//published