πŸ”₯ HOT: Ticket/ - High Quality

Opened 2 weeks ago

Last modified 8 days ago

#8149 new defect (bug)

Add warning when hotlinking images from external sources

Reported by: dd32's profile dd32 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)

#1 @wildworks
2 weeks ago

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.

#2 @dd32
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

https://github.com/user-attachments/assets/83430926-f60e-4994-89bd-3b4d700c1aa4

Note: See TracTickets for help on using tickets.