diff --git a/packages/block-library/src/image/edit.js b/packages/block-library/src/image/edit.js index 9898c1b4c40af..5e9ceccc4f6b3 100644 --- a/packages/block-library/src/image/edit.js +++ b/packages/block-library/src/image/edit.js @@ -274,7 +274,11 @@ export function ImageEdit( { const file = getBlobByURL( url ); if ( file ) { - getSettings().mediaUpload( { + const { mediaUpload } = getSettings(); + if ( ! mediaUpload ) { + return; + } + mediaUpload( { filesList: [ file ], onFileChange: ( [ img ] ) => { onSelectImage( img ); diff --git a/packages/block-library/src/image/image.js b/packages/block-library/src/image/image.js index 68ad8ece77128..2aca33784474a 100644 --- a/packages/block-library/src/image/image.js +++ b/packages/block-library/src/image/image.js @@ -132,7 +132,7 @@ export default function Image( { const imageRef = useRef(); const { allowResize = true } = context; - const { getBlock } = useSelect( blockEditorStore ); + const { getBlock, getSettings } = useSelect( blockEditorStore ); const image = useSelect( ( select ) => @@ -142,31 +142,26 @@ export default function Image( { [ id, isSingleSelected ] ); - const { canInsertCover, imageEditing, imageSizes, maxWidth, mediaUpload } = - useSelect( - ( select ) => { - const { - getBlockRootClientId, - getSettings, - canInsertBlockType, - } = select( blockEditorStore ); - - const rootClientId = getBlockRootClientId( clientId ); - const settings = getSettings(); - - return { - imageEditing: settings.imageEditing, - imageSizes: settings.imageSizes, - maxWidth: settings.maxWidth, - mediaUpload: settings.mediaUpload, - canInsertCover: canInsertBlockType( - 'core/cover', - rootClientId - ), - }; - }, - [ clientId ] - ); + const { canInsertCover, imageEditing, imageSizes, maxWidth } = useSelect( + ( select ) => { + const { getBlockRootClientId, canInsertBlockType } = + select( blockEditorStore ); + + const rootClientId = getBlockRootClientId( clientId ); + const settings = getSettings(); + + return { + imageEditing: settings.imageEditing, + imageSizes: settings.imageSizes, + maxWidth: settings.maxWidth, + canInsertCover: canInsertBlockType( + 'core/cover', + rootClientId + ), + }; + }, + [ clientId ] + ); const { replaceBlocks, toggleSelection } = useDispatch( blockEditorStore ); const { createErrorNotice, createSuccessNotice } = @@ -191,7 +186,6 @@ export default function Image( { ( { slug } ) => image?.media_details?.sizes?.[ slug ]?.source_url ) .map( ( { name, slug } ) => ( { value: slug, label: name } ) ); - const canUploadMedia = !! mediaUpload; // If an image is externally hosted, try to fetch the image data. This may // fail if the image host doesn't allow CORS with the domain. If it works, @@ -200,7 +194,7 @@ export default function Image( { if ( ! isExternalImage( id, url ) || ! isSingleSelected || - ! canUploadMedia + ! getSettings().mediaUpload ) { setExternalBlob(); return; @@ -215,7 +209,7 @@ export default function Image( { .then( ( blob ) => setExternalBlob( blob ) ) // Do nothing, cannot upload. .catch( () => {} ); - }, [ id, url, isSingleSelected, externalBlob, canUploadMedia ] ); + }, [ id, url, isSingleSelected, externalBlob ] ); // Get naturalWidth and naturalHeight from image ref, and fall back to loaded natural // width and height. This resolves an issue in Safari where the loaded natural @@ -283,6 +277,10 @@ export default function Image( { } function uploadExternal() { + const { mediaUpload } = getSettings(); + if ( ! mediaUpload ) { + return; + } mediaUpload( { filesList: [ externalBlob ], onFileChange( [ img ] ) {