Switch image and audio block to embed block if URL is embeddable

packages/block-library/src/audio/edit.js

@@ -21,6 +21,11 @@ import {
 } from '@wordpress/editor';
 import { getBlobByURL, isBlobURL } from '@wordpress/blob';
 
+/**
+ * Internal dependencies
+ */
+import { createUpgradedEmbedBlock } from '../embed/util';
+
 const ALLOWED_MEDIA_TYPES = [ 'audio' ];
 
 class AudioEdit extends Component {
@@ -73,6 +78,14 @@ class AudioEdit extends Component {
 		// Set the block's src from the edit component's state, and switch off
 		// the editing UI.
 		if ( newSrc !== src ) {
+			// Check if there's an embed block that handles this URL.
+			const embedBlock = createUpgradedEmbedBlock(
+				{ attributes: { url: newSrc } }
+			);
+			if ( undefined !== embedBlock ) {
+				this.props.onReplace( embedBlock );
+				return;
+			}
 			setAttributes( { src: newSrc, id: undefined } );
 		}
 

packages/block-library/src/image/edit.js

@@ -48,6 +48,7 @@ import { compose } from '@wordpress/compose';
 /**
  * Internal dependencies
  */
+import { createUpgradedEmbedBlock } from '../embed/util';
 import ImageSize from './image-size';
 
 /**
@@ -104,6 +105,7 @@ class ImageEdit extends Component {
 		this.getFilename = this.getFilename.bind( this );
 		this.toggleIsEditing = this.toggleIsEditing.bind( this );
 		this.onUploadError = this.onUploadError.bind( this );
+		this.onImageError = this.onImageError.bind( this );
 
 		this.state = {
 			captionFocused: false,
@@ -209,6 +211,16 @@ class ImageEdit extends Component {
 		} );
 	}
 
+	onImageError( url ) {
+		// Check if there's an embed block that handles this URL.
+		const embedBlock = createUpgradedEmbedBlock(
+			{ attributes: { url } }
+		);
+		if ( undefined !== embedBlock ) {
+			this.props.onReplace( embedBlock );
+		}
+	}
+
 	onSetCustomHref( value ) {
 		this.props.setAttributes( { href: value } );
 	}
@@ -507,13 +519,13 @@ class ImageEdit extends Component {
 							} else {
 								defaultedAlt = __( 'This image has an empty alt attribute' );
 							}
-
+      
 							const img = (
 								// Disable reason: Image itself is not meant to be interactive, but
 								// should direct focus to block.
 								/* eslint-disable jsx-a11y/no-noninteractive-element-interactions */
 								<Fragment>
-									<img src={ url } alt={ defaultedAlt } onClick={ this.onImageClick } />
+									<img src={ url } alt={ defaultedAlt } onClick={ this.onImageClick } onError={ () => this.onImageError( url ) } />
 									{ isBlobURL( url ) && <Spinner /> }
 								</Fragment>
 								/* eslint-enable jsx-a11y/no-noninteractive-element-interactions */