Fix dropping media from inserter into Cover block (#67056)

Co-authored-by: tellthemachines <[email protected]>
Co-authored-by: ramonjd <[email protected]>

packages/block-editor/src/components/media-placeholder/index.js

@@ -239,7 +239,7 @@ export function MediaPlaceholder( {
 				( block.name === 'core/image' ||
 					block.name === 'core/audio' ||
 					block.name === 'core/video' ) &&
-				block.attributes.url
+				( block.attributes.url || block.attributes.src )
 					? [ block ]
 					: recursivelyFindMediaFromBlocks( block.innerBlocks )
 			);
@@ -252,33 +252,37 @@ export function MediaPlaceholder( {
 		}
 
 		const uploadedMediaList = await Promise.all(
-			mediaBlocks.map( ( block ) =>
-				block.attributes.id
-					? block.attributes
-					: new Promise( ( resolve, reject ) => {
-							window
-								.fetch( block.attributes.url )
-								.then( ( response ) => response.blob() )
-								.then( ( blob ) =>
-									mediaUpload( {
-										filesList: [ blob ],
-										additionalData: {
-											title: block.attributes.title,
-											alt_text: block.attributes.alt,
-											caption: block.attributes.caption,
-										},
-										onFileChange: ( [ media ] ) => {
-											if ( media.id ) {
-												resolve( media );
-											}
-										},
-										allowedTypes,
-										onError: reject,
-									} )
-								)
-								.catch( () => resolve( block.attributes.url ) );
-					  } )
-			)
+			mediaBlocks.map( ( block ) => {
+				const blockType = block.name.split( '/' )[ 1 ];
+				if ( block.attributes.id ) {
+					block.attributes.type = blockType;
+					return block.attributes;
+				}
+				return new Promise( ( resolve, reject ) => {
+					window
+						.fetch( block.attributes.url )
+						.then( ( response ) => response.blob() )
+						.then( ( blob ) =>
+							mediaUpload( {
+								filesList: [ blob ],
+								additionalData: {
+									title: block.attributes.title,
+									alt_text: block.attributes.alt,
+									caption: block.attributes.caption,
+									type: blockType,
+								},
+								onFileChange: ( [ media ] ) => {
+									if ( media.id ) {
+										resolve( media );
+									}
+								},
+								allowedTypes,
+								onError: reject,
+							} )
+						)
+						.catch( () => resolve( block.attributes.url ) );
+				} );
+			} )
 		).catch( ( err ) => onError( err ) );
 
 		if ( multiple ) {

packages/block-library/src/cover/edit/index.js

@@ -201,7 +201,7 @@ function CoverEdit( {
 			averageBackgroundColor
 		);
 
-		if ( backgroundType === IMAGE_BACKGROUND_TYPE && mediaAttributes.id ) {
+		if ( backgroundType === IMAGE_BACKGROUND_TYPE && mediaAttributes?.id ) {
 			const { imageDefaultSize } = getSettings();
 
 			// Try to use the previous selected image size if it's available

packages/block-library/src/cover/shared.js

@@ -35,7 +35,7 @@ export function dimRatioToClass( ratio ) {
 }
 
 export function attributesFromMedia( media ) {
-	if ( ! media || ! media.url ) {
+	if ( ! media || ( ! media.url && ! media.src ) ) {
 		return {
 			url: undefined,
 			id: undefined,
@@ -52,23 +52,23 @@ export function attributesFromMedia( media ) {
 		if ( media.media_type === IMAGE_BACKGROUND_TYPE ) {
 			mediaType = IMAGE_BACKGROUND_TYPE;
 		} else {
-			// only images and videos are accepted so if the media_type is not an image we can assume it is a video.
+			// Only images and videos are accepted so if the media_type is not an image we can assume it is a video.
 			// Videos contain the media type of 'file' in the object returned from the rest api.
 			mediaType = VIDEO_BACKGROUND_TYPE;
 		}
-	} else {
 		// For media selections originated from existing files in the media library.
-		if (
-			media.type !== IMAGE_BACKGROUND_TYPE &&
-			media.type !== VIDEO_BACKGROUND_TYPE
-		) {
-			return;
-		}
+	} else if (
+		media.type &&
+		( media.type === IMAGE_BACKGROUND_TYPE ||
+			media.type === VIDEO_BACKGROUND_TYPE )
+	) {
 		mediaType = media.type;
+	} else {
+		return;
 	}
 
 	return {
-		url: media.url,
+		url: media.url || media.src,
 		id: media.id,
 		alt: media?.alt,
 		backgroundType: mediaType,