[6.6 HelpHub]: Cover Block

[jennydupuy]

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

Update for 6.6

• [ ] Enable shadow support for cover block 61883

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. Some of the PRs have great videos that can be added to the article.

[github-actions[bot]]

Heads up @WordPress/docs-issues-coordinators, we have a new issue open. Time to use 'em labels.

[ghost]

Hi @jennydupuy,

I'd like to work on this issue.

Does the existing Cover Block article need references to the Shadow option or simply a reference to the Filter Settings article? I could expand on the Shadows write-up in the Filter Settings Overview.

[atachibana]

@HikerWalker Shadow options exists under the 'Border & Shadow' section in the Styles tab of Cover block settings, not Filter Settings.

You should consider to newly create the Border & Shadow Settings overview page (similar to Typography Settings Overview) , and put a link to that page on this Cover block page.

[kbdave25]

i would like to work on this issue.

[mday-godaddy]

In the help article, on the bullet item, "You can add an image or video from your device or from the Openverse." Please make Openverse a link so people know what it actually is. As a new user, I had never heard of Openverse.

[kbdave25]

Block Toolbar Features:

New Toolbar Layout: In WordPress 6.6, the block editor's toolbar layout has been enhanced. Users can highlight how the new layout improves usability, making it easier to access tools without unnecessary clutter.

Contextual Toolbars:

1. Image Selected Inside the Cover Block

When you select an image inside the Cover Block, the toolbar options will change to provide tools specifically relevant to image content. Some of the contextual tools you might see include:

Transform to: Options to transform the Cover Block or the selected image into another block type, such as Media & Text, Group, or Columns.

Replace: Directly replace the image with another from your media library or upload a new one.

Crop: A cropping tool allows you to resize or crop the selected image without leaving the editor.

Add Caption: If the image selected supports captions, an option to add a caption will appear, allowing you to include text information for the image.

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

2. Video Selected Inside the Cover Block

When a video is selected within the Cover Block, the toolbar dynamically adjusts to provide video-related options:

Replace: Similar to the image tool, you can replace the video with another from your media library or upload it.

Video Settings: An additional video settings button may appear, allowing users to toggle the embedded video's autoplay, loop, or mute options.

Aspect Ratio/Resize Options: Depending on the theme or layout, you may see options to adjust the video's aspect ratio, such as setting it to 16:9, 4:3, or other predefined sizes.

Overlay Toggle: You can control the video’s overlay color or opacity, as Cover Blocks allow you to place text or other content on top of videos.

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

3. Text Selected Inside the Cover Block

When you select text within the Cover Block (which is often used as a headline or call-to-action), the toolbar changes to present options focused on text styling and layout:

Bold/Italic/Underline: Basic text formatting tools will appear to adjust the style of the selected text.

Text Alignment: You can align the text to the left, right, center, or justify directly from the toolbar.

Link Tool: The toolbar allows adding or editing hyperlinks within the selected text.

Font Size and Color: If supported by the theme or custom CSS, font size and color options may appear, allowing you to style the text within the Cover Block differently.

Text Background Color: Some themes or blocks allow you to add a background color specifically for the text, making it stand out more against the Cover Block’s background (image or video).

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

[kbdave25]

Interactive elements and dynamic content within the Cover Block, particularly focused on video backgrounds and media handling:

Video Backgrounds: WordPress 6.6 improves the workflow and user control over video backgrounds in the Cover Block, focusing on ease of use and better integration with site-wide design elements.

Media Handling: Lazy loading, optimized video formats, and responsive support contribute to faster loading, improved performance, and better media quality in the Cover Block.

Full-Site Editing: Integration with FSE allows for greater flexibility in designing consistent layouts using video backgrounds across entire sites.

Developer-Friendly: Advanced controls and error handling make WordPress 6.6 more accessible for developers working with video content in the Cover Block.

[kbdave25]

Advanced Settings of the Cover Block:

Improved Accessibility for Semantic HTML Elements: WordPress 6.6 improves how semantic HTML elements are handled within the Cover Block. When selecting elements like "header", "footer", or "main", these elements now more effectively integrate with accessibility features, helping screen readers and assistive technologies better understand the structure of your webpage.

Enhanced HTML Anchor Functionality: In WordPress 6.6, the HTML anchor feature has been refined to ensure that links to anchors scroll smoothly to the corresponding section, enhancing the user experience on long, content-heavy pages. This update also improves compatibility with Single Page Applications (SPAs).

CSS Class Management Improvements: WordPress 6.6 offers better support for managing multiple custom CSS classes within the Additional CSS class(es) field. This allows for more complex and layered styling, making it easier for developers to apply custom styles dynamically without conflicts, improving flexibility for advanced customizations.

[kbdave25]

In the help article, on the bullet item, "You can add an image or video from your device or from the Openverse." Please make Openverse a link so people know what it actually is. As a new user, I had never heard of Openverse.

Tutorial links have been added now.