Opened 2 weeks ago
Last modified 8 days ago
#8149 new defect (bug)
Add warning when hotlinking images from external sources
| Reported by: |
|
Owned by: | |
|---|---|---|---|
| Milestone: | Priority: | normal | |
| Component: | Handbooks | Keywords: | good-first-bug has-patch |
| Cc: |
Description
When teams are creating documentation, it's incredibly common for teams to copy-paste content from Google Docs or other locations, which results in the document hotlinking an image from the google cdn. Eventually that URL ceases to work, and contributors struggle to find the original image.
We should add a warning in the editor when an image from an external source is referenced. This would remind users to upload the image to the site, and reduce ongoing maintenance burden on teams.
Places I've seen this varies, but currently team handbooks and user-facing documentation is where I'm seeing it.
This could be something as simple as a border on the images, eg.
img:not([src*=wordpress.org i]) { border: 10px solid red; }
or maybe a proper editor integration that flags this up properly. Thoughts?
Change History (3)
#2
@
13 days ago
If someone wants to whip up a lightweight plugin for this, happy to see that done :) (Either as a plugin on w.org/plugins, or stand alone for wporg).
As I said on Slack: βhttps://wordpress.slack.com/archives/C02RP4WU5/p1765856008439419?thread_ts=1765855859.923399&cid=C02RP4WU5
Hereβs an example of what I was thinking of doing.. does anyone have any thoughts on a better way to do it? Iβm not really great at editor enhancements, but Iβm sure I could force a CSS style in to make externally-loaded images look ugly in the editor :)
This ticket was mentioned in βPR #536 on βWordPress/wordpress.org by β@wildworks.
8 days ago
#3
- Keywords has-patch added; needs-patch removed
Closes: https://meta.trac.wordpress.org/ticket/8149
This PR adds a plugin that displays a warning for blocks that contain inappropriate external resources. This helps encourage contributors to upload resources when creating documentation by copying content from external documents, preventing media from potentially disappearing in the future.
## How this plugin works
- Check the three blocks Image, Cover, and Video that allow you to set external resources as media.
- Check whether the media URL matches your site's domain. If not, this plugin checks whether it matches one of the allowed domains. Finally, if the media URL does not match any domain, it is considered an inappropriate media resource.
- Blocks with invalid media resources will have a red border and overlay.
Additionally, the block toolbar will have a red icon button. Clicking that button will display a popover with details about the error.
## Testing Instructions
Use the .wp-env.override.json file to map the plugin to your local wp-env environment:
{
"plugins": [
"./your/plugins/plugin",
"../path/to/wordpress.org/wordpress.org/public_html/wp-content/plugins/wporg-media-resource-checker"
]
}
## Screenshot
That's a great idea.
Technically, there are many APIs that allow us to intervene in the editor to display warnings: in the list view, in the block toolbar, in an overlay above a block, in the sidebar, etc.