[HelpHub] Cover block

[femkreations]

Article: https://wordpress.org/documentation/article/cover-block/

Updating for 6.2

• add HTML element selection. 46969
• Update the design of the focal point handle. 45053
• FocalPointPicker: add new opt-in prop 45958

Updating for 6.1

• Add typography supports. 43298
• Prevent transform to Group block when the featured image is set. 42638
• Start with featured image in media placeholder 41722
• Adds featured image toggle to media replace flow. 41476
• Adds placeholder when feature image is in use. 41460
• Move overlay and opacity controls to color panel. 41102
• Fix focal point error when the Featured Image is applied 40643
• Avoid unnecessary wrapping when transformed from Group. 40602
• Add transform between cover and media & text. 38458
• Show Resize Tooltip on Drag. 23522
• Add an illustration option to the Placeholder component 41605

Updating for 6.0

• Makes cover block dynamic and adds featured image binding. 39658
• Mention the upload error. 39428

Explain the following features using video/screenshots:
New featured image sizing controls make it easier to get the results you want. Refer video at 8.33

General

• Make sure all screenshots are relevant to the latest version
• Make sure videos, if any, are up to date
• Add ALT tags for the images
• Make sure the headings are in sentence case
• Convert all reusable blocks to a ‘regular block’.
• Update the changelog at the end of the article

Notes

1. We are not adding detailed updates for the Block settings - Typography, Color, Layout, Dimension and Border and for the More Options setting in the block toolbar. Pls mention the settings included for the block and link to the detailed settings pages instead.
2. Pls make 6.2 updates first and then move to 6.1.
3. Some of the PRs have great videos that can be added to the article
4. For 6.1, you can pick the screenshots added in the comments previously, if they are relevant.

[femkreations]

Added 6.1 tasks

Notes

1. We are not adding detailed updates for the Block settings as we are revamping the block settings for all the block articles
2. Pls make 6.1 updates first and then move into 6.0.
3. Some of the PRs for 6.1 have great videos that can be added to the article (even for the Block settings section)

[alianschiavoncini]

These are new screenshots for the Dimensions.

[alianschiavoncini]

New screenshot for Media settings.

[Thelmachido]

Hi @femkreations can you please assign me to this one?

[femkreations]

@Thelmachido All yours! Thanks for picking this one

[Thelmachido]

@femkreations I have updated the Cover Block with new screenshots and I have added the

• Duotone Filter
• A short video showing what it would look like using the featured image option

Would it be necessary to add information about the image upload error?

[femkreations]

@Thelmachido Pls note I have added two issues related to the 6.2 updates to this page. Let me know if you have any questions.

[Thelmachido]

@Femy I have done the following:

• Change the focal point image
• Added a short video to showcase what it would look like to use a featured image
• Information/video about how to resize the cover block
• HTML element

[femkreations]

Awesome work @Thelmachido That was quick! I'll review once I am through with adding all the 6.2 tasks

[abhansnuk]

I have been going through this ready for when second review is needed, will follow on when you have done first review @femkreations . Great job @Thelmachido and Femy on GitHub in general.

[annezazu]

Reviewing this now and will update shortly depending on whether we can publish this outright or not!

[annezazu]

Made an update to the short video on using a featured image in the cover block and added more information in around the HTML element as what was there before was too simplified to be understandable for an end user ("HTML element lets you choose the HTML element you want to be used for the Stack block’s wrapper in the HTML code."):

HTML element lets you choose between these HTML elements: Div, header, footer, main, section, article, and aside. It will default to div if another option isn't selected. While more advanced, this option allows you to add semantic elements that can be used to define different parts of a web page. For example, if you're using the Cover block as part of your Header, it would make sense to define it as such.

Before:

Screen-Recording-2023-03-02-at-20.48.39.mov

After:

Cover.block.using.featured.image.mov

As you'll notice the original video jumped too quickly into the featured image option, not leaving enough time to really understand what one needs to do.

Marking as done for 6.2.