From 40b84f9f42a314868cc338651fed5a3f82e8c33a Mon Sep 17 00:00:00 2001 From: tellthemachines Date: Mon, 18 Nov 2024 10:23:30 +1100 Subject: [PATCH 1/2] Fix dropping media from inserter into Cover block. --- .../src/components/media-placeholder/index.js | 2 +- .../block-library/src/cover/edit/index.js | 2 +- packages/block-library/src/cover/shared.js | 26 ++++++++++++------- 3 files changed, 18 insertions(+), 12 deletions(-) diff --git a/packages/block-editor/src/components/media-placeholder/index.js b/packages/block-editor/src/components/media-placeholder/index.js index 2f1a47be2f5a6e..4548fb26d0b1e8 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 ) ); diff --git a/packages/block-library/src/cover/edit/index.js b/packages/block-library/src/cover/edit/index.js index 1c86d953bc0bab..3ad7039b558924 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 37390354a37d63..f089f4bfe36ca8 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,29 @@ 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; + // If there's a url or src but no type, it's probably coming from the inserter so + // we still want to return what data we have. + } else if ( media.url ) { + mediaType = IMAGE_BACKGROUND_TYPE; + } else if ( media.src ) { + mediaType = VIDEO_BACKGROUND_TYPE; + } else { + return; } return { - url: media.url, + url: media.url || media.src, id: media.id, alt: media?.alt, backgroundType: mediaType, From 660e7265f3c3a69c37cfa8d87f7c32859e0aa5fa Mon Sep 17 00:00:00 2001 From: tellthemachines Date: Mon, 18 Nov 2024 10:39:58 +1100 Subject: [PATCH 2/2] Make sure Audio files don't make it in --- .../src/components/media-placeholder/index.js | 58 ++++++++++--------- packages/block-library/src/cover/shared.js | 6 -- 2 files changed, 31 insertions(+), 33 deletions(-) diff --git a/packages/block-editor/src/components/media-placeholder/index.js b/packages/block-editor/src/components/media-placeholder/index.js index 4548fb26d0b1e8..e7b6c836468f02 100644 --- a/packages/block-editor/src/components/media-placeholder/index.js +++ b/packages/block-editor/src/components/media-placeholder/index.js @@ -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/shared.js b/packages/block-library/src/cover/shared.js index f089f4bfe36ca8..7628300cbf8cff 100644 --- a/packages/block-library/src/cover/shared.js +++ b/packages/block-library/src/cover/shared.js @@ -63,12 +63,6 @@ export function attributesFromMedia( media ) { media.type === VIDEO_BACKGROUND_TYPE ) ) { mediaType = media.type; - // If there's a url or src but no type, it's probably coming from the inserter so - // we still want to return what data we have. - } else if ( media.url ) { - mediaType = IMAGE_BACKGROUND_TYPE; - } else if ( media.src ) { - mediaType = VIDEO_BACKGROUND_TYPE; } else { return; }