-
Notifications
You must be signed in to change notification settings - Fork 42
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[6.6 HelpHub]: Cover Block #1680
Comments
Heads up @WordPress/docs-issues-coordinators, we have a new issue open. Time to use 'em labels. |
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. |
@HikerWalker 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. |
i would like to work on this issue. |
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. |
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/ |
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. |
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. |
Tutorial links have been added now. |
Article: https://wordpress.org/documentation/article/cover-block/
Update for 6.6
General
Notes
The text was updated successfully, but these errors were encountered: