Description

We need to create a block variation of the WordPress Cover block that allows the entire block (including the image) to be clickable. Currently, we use Cover blocks for many cards in the plugin, but only the text title can be assigned a link. This forces users to click the text rather than the entire image, which isn't intuitive or user-friendly. By allowing the custom Cover block to be assigned a link, users can click anywhere on the block to follow the link, improving UX.

Requirements

• Create a block variation of the Cover block that allows a link to be assigned to the entire block.
• Ensure that the new Cover block variation maintains full compatibility with block editor settings and styles.
• The solution should ensure that the entire area, including the image and overlay, is clickable when a link is assigned.

Tasks

• Develop a block variation of the Cover block that supports assigning a link to the entire block.
• Ensure the block variation allows users to add links via the block settings in the editor.
• Test the block in various scenarios to ensure full functionality on both desktop and mobile devices.
• Implement a fallback mechanism to ensure proper behaviour if the block variation is not supported in specific contexts.
• Update relevant documentation and examples to showcase the clickable Cover block variation.

References

• WordPress Block Editor API: https://developer.wordpress.org/block-editor/
• Existing Cover block implementation in the plugin

Acceptance Criteria

• The new Cover block variation allows users to assign a link to the entire block.
• Users can click on the image, overlay, or text, and the entire block behaves as a link.
• The Cover block variation works across all device sizes without layout or interaction issues.
• The block variation integrates seamlessly with existing plugin design and styling.