Add filter for crossOrigin image transforms (#28255)

Add `media.crossOrigin` filter to allow cross-origin images to be used in a canvas.

Co-authored-by: Jon Surrell <jon.surrell@automattic.com>
Co-authored-by: Bart <bartlomiej.kalisz@gmail.com>

docs/designers-developers/developers/filters/block-filters.md

@@ -319,6 +319,30 @@ wp.hooks.addFilter( 'editor.BlockListBlock', 'my-plugin/with-client-id-class-nam
 ```
 {% end %}
 
+#### `media.crossOrigin`
+
+Used to set or modify the `crossOrigin` attribute for foreign-origin media elements (i.e  `<img>`, `<audio>` , `<img>` , `<link>` , `<script>`, `<video>`). See this [article](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/crossorigin) for more information the `crossOrigin` attribute, its values and how it applies to each element.
+
+One example of it in action is in the Image block's transform feature to allow cross-origin images to be used in a `<canvas>`.
+
+_Example:_
+
+```js
+addFilter(
+	'media.crossOrigin',
+	'my-plugin/with-cors-media',
+	// The callback accepts a second `mediaSrc` argument which references
+	// the url to actual foreign media, useful if you want to decide
+	// the value of crossOrigin based upon it.
+	( crossOrigin, mediaSrc ) => {
+		if ( mediaSrc.startsWith( 'https://example.com' ) ) {
+			return 'use-credentials';
+		}
+		return crossOrigin;
+	}
+);
+```
+
 ## Removing Blocks
 
 ### Using a deny list

packages/block-library/CHANGELOG.md

@@ -2,6 +2,10 @@
 
 ## Unreleased
 
+### New Features
+
+- Allow setting the `crossOrigin` attribute so the `useTransformImage` hook can use cross-origin sources ([#28255](https://github.com/WordPress/gutenberg/pull/28255/)).
+
 ## 2.27.0 (2020-12-17)
 
 ### Enhancement

packages/block-library/src/image/image-editing/use-transform-image.js

@@ -2,6 +2,7 @@
  * WordPress dependencies
  */
 import { useCallback, useEffect, useMemo, useState } from '@wordpress/element';
+import { applyFilters } from '@wordpress/hooks';
 
 function useTransformState( { url, naturalWidth, naturalHeight } ) {
 	const [ editedUrl, setEditedUrl ] = useState();
@@ -90,6 +91,15 @@ function useTransformState( { url, naturalWidth, naturalHeight } ) {
 		const el = new window.Image();
 		el.src = url;
 		el.onload = editImage;
+
+		const imgCrossOrigin = applyFilters(
+			'media.crossOrigin',
+			undefined,
+			url
+		);
+		if ( typeof imgCrossOrigin === 'string' ) {
+			el.crossOrigin = imgCrossOrigin;
+		}
 	}, [
 		rotation,
 		naturalWidth,