diff --git a/packages/block-library/src/image/edit.js b/packages/block-library/src/image/edit.js
index bc4a18927b0f0a..cea813aefc4a6d 100644
--- a/packages/block-library/src/image/edit.js
+++ b/packages/block-library/src/image/edit.js
@@ -400,39 +400,40 @@ class ImageEdit extends Component {
) }
);
+ const src = isExternal ? url : undefined;
+ const labels = {
+ title: ! url ? __( 'Image' ) : __( 'Edit image' ),
+ instructions: __( 'Drag an image to upload, select a file from your library or add one from an URL.' ),
+ };
+ const mediaPreview = ( !! url && );
+ const mediaPlaceholder = (
+ }
+ className={ className }
+ labels={ labels }
+ onSelect={ this.onSelectImage }
+ onSelectURL={ this.onSelectURL }
+ onDoubleClick={ this.toggleIsEditing }
+ onCancel={ !! url && this.toggleIsEditing }
+ notices={ noticeUI }
+ onError={ this.onUploadError }
+ accept="image/*"
+ allowedTypes={ ALLOWED_MEDIA_TYPES }
+ value={ { id, src } }
+ mediaPreview={ mediaPreview }
+ dropZoneUIOnly={ ! isEditing && url }
+ />
+ );
if ( isEditing || ! url ) {
- const src = isExternal ? url : undefined;
-
- const labels = {
- title: ! url ? __( 'Image' ) : __( 'Edit image' ),
- instructions: __( 'Drag an image to upload, select a file from your library or add one from an URL.' ),
- };
-
- const mediaPreview = ( !! url && );
-
return (
{ controls }
- }
- className={ className }
- labels={ labels }
- onSelect={ this.onSelectImage }
- onSelectURL={ this.onSelectURL }
- onDoubleClick={ this.toggleIsEditing }
- onCancel={ !! url && this.toggleIsEditing }
- notices={ noticeUI }
- onError={ this.onUploadError }
- accept="image/*"
- allowedTypes={ ALLOWED_MEDIA_TYPES }
- value={ { id, src } }
- mediaPreview={ mediaPreview }
- />
+ { mediaPlaceholder }
);
}
@@ -707,6 +708,7 @@ class ImageEdit extends Component {
/>
) }
+ { mediaPlaceholder }
);
/* eslint-enable jsx-a11y/no-static-element-interactions, jsx-a11y/onclick-has-role, jsx-a11y/click-events-have-key-events */