Skip to content

Conversation

@jenish77
Copy link

What?

Closes #10853

This PR adds "Insert from URL" support for the Cover block, allowing users to add image or video backgrounds by directly entering a URL instead of only being able to upload media or select from the Media Library.

Why?

Currently, the Cover block only allows users to add background media through uploading files or selecting from the Media Library. However, users often want to use images or videos hosted externally (e.g., CDN-hosted assets, stock photo URLs, etc.) without having to download and re-upload them.
Other media-related blocks like Image and Video already support "Insert from URL" functionality. This PR brings feature parity to the Cover block.

How?

  1. Added onSelectURL prop to CoverPlaceholder component, which is passed to the underlying MediaPlaceholder component to enable the URL input UI.
  2. Implemented getMediaTypeFromURL() async function in shared.js that detects whether a URL points to an image or video:
    • Fast path: First checks the file extension for common image/video formats
    • Content-Type detection: If extension detection fails, makes a HEAD request to check the Content-Type header
    • Fallback: If HEAD is not supported by the server, falls back to a GET request with Range: bytes=0-0 header
  3. Added proper error handling:
    • If the media type cannot be determined (e.g., CORS restrictions, invalid URL, non-media Content-Type), a snackbar error notification is shown
    • The Cover block is NOT created with a blank background if detection fails

Testing Instructions

  1. Open a post or page in the editor.
  2. Insert a Cover block.
  3. Click "Insert from URL" in the placeholder.
  4. Enter a valid image URL and press Enter or click Apply.
  5. Verify the image is loaded as the Cover background.

Screenshots or screencast

Before After
WhatsApp Image 2026-01-01 at 1 13 11 AM WhatsApp Image 2026-01-01 at 1 12 10 AM

@github-actions github-actions bot added the [Package] Block library /packages/block-library label Dec 31, 2025
@github-actions
Copy link

👋 Thanks for your first Pull Request and for helping build the future of Gutenberg and WordPress, @jenish77! In case you missed it, we'd love to have you join us in our Slack community.

If you want to learn more about WordPress development in general, check out the Core Handbook full of helpful information.

@github-actions github-actions bot added the First-time Contributor Pull request opened by a first-time contributor to Gutenberg repository label Dec 31, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

First-time Contributor Pull request opened by a first-time contributor to Gutenberg repository [Package] Block library /packages/block-library

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Insert image using url for cover

1 participant