From 134e4b48cd2872a2c9bc04f7c97d666c4ca1d7c9 Mon Sep 17 00:00:00 2001 From: tellthemachines Date: Mon, 18 Nov 2024 16:55:10 +1100 Subject: [PATCH] Fix dropping media from inserter into Cover block (#67056) Co-authored-by: tellthemachines Co-authored-by: ramonjd --- .../src/components/media-placeholder/index.js | 60 ++++++++++--------- .../block-library/src/cover/edit/index.js | 2 +- packages/block-library/src/cover/shared.js | 20 +++---- 3 files changed, 43 insertions(+), 39 deletions(-) diff --git a/packages/block-editor/src/components/media-placeholder/index.js b/packages/block-editor/src/components/media-placeholder/index.js index 2f1a47be2f5a6..e7b6c836468f0 100644 --- a/packages/block-editor/src/components/media-placeholder/index.js +++ b/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 ) { diff --git a/packages/block-library/src/cover/edit/index.js b/packages/block-library/src/cover/edit/index.js index 1c86d953bc0ba..3ad7039b55892 100644 --- a/packages/block-library/src/cover/edit/index.js +++ b/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 diff --git a/packages/block-library/src/cover/shared.js b/packages/block-library/src/cover/shared.js index 37390354a37d6..7628300cbf8cf 100644 --- a/packages/block-library/src/cover/shared.js +++ b/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,