diff --git a/packages/block-library/src/audio/edit.js b/packages/block-library/src/audio/edit.js index ed5c7d5aee2d9..ee2966208d015 100644 --- a/packages/block-library/src/audio/edit.js +++ b/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 } ); } diff --git a/packages/block-library/src/image/edit.js b/packages/block-library/src/image/edit.js index b714b27ae549c..2301340bf7052 100644 --- a/packages/block-library/src/image/edit.js +++ b/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 } ); } @@ -513,7 +525,7 @@ class ImageEdit extends Component { // should direct focus to block. /* eslint-disable jsx-a11y/no-noninteractive-element-interactions */ - { + { this.onImageError( url ) } /> { isBlobURL( url ) && } /* eslint-enable jsx-a11y/no-noninteractive-element-interactions */