Add ability to use drag & drop to select and replace an image in the Image component

components/image/index.js

@@ -19,18 +19,12 @@ const Image = (props) => {
 	const hasImage = !!id;
 	const { media, isResolvingMedia } = useMedia(id);
 
-	const shouldDisplayFocalPointPicker = typeof onChangeFocalPoint === 'function';
+	const shouldDisplayFocalPointPicker = typeof onChangeFocalPoint === 'function' && hasImage;
 
 	if (!hasImage && !canEditImage) {
 		return <Placeholder className="block-editor-media-placeholder" withIllustration />;
 	}
 
-	if (!hasImage && canEditImage) {
-		return (
-			<MediaPlaceholder labels={labels} onSelect={onSelect} accept="image" multiple={false} />
-		);
-	}
-
 	if (isResolvingMedia) {
 		return <Spinner />;
 	}
@@ -64,14 +58,26 @@ const Image = (props) => {
 					</PanelBody>
 				</InspectorControls>
 			)}
-			<img src={imageUrl} alt={altText} {...rest} />
+
+			{/* This DIV with position `relative` is necessary to limit the DropZone area. */}
+			<div style={{ position: 'relative' }}>
+				<img src={imageUrl} alt={altText} {...rest} />
+				<MediaPlaceholder
+					labels={labels}
+					onSelect={onSelect}
+					accept="image"
+					multiple={false}
+					disableMediaButtons={imageUrl}
+				/>
+			</div>
 		</>
 	);
 };
 
 export { Image };
 
 Image.defaultProps = {
+	id: 0,
 	size: 'large',
 	focalPoint: { x: 0.5, y: 0.5 },
 	onChangeFocalPoint: undefined,
@@ -80,13 +86,13 @@ Image.defaultProps = {
 };
 
 Image.propTypes = {
-	id: PropTypes.number.isRequired,
+	id: PropTypes.number,
 	size: PropTypes.string,
 	onSelect: PropTypes.func.isRequired,
 	onChangeFocalPoint: PropTypes.func,
 	focalPoint: PropTypes.shape({
-		x: PropTypes.string,
-		y: PropTypes.string,
+		x: PropTypes.number,
+		y: PropTypes.number,
 	}),
 	labels: PropTypes.shape({
 		title: PropTypes.string,

cypress/e2e/Image.spec.js

@@ -8,34 +8,39 @@ context('Image', () => {
 
 	it('allows the user to pick an image from the media library and displays it inline', () => {
 		cy.createPost({title: 'Image Component'});
-		cy.insertBlock('Image Example');
-
-        cy.get('button').contains('Media Library').click();
-        cy.get('#menu-item-browse').click();
-        cy.get('.attachment-preview').first().click();
-        cy.get('#attachment-details-alt-text').type('Test Alt Text');
-        cy.get('.media-button-select').contains('Select').click();
-
-        cy.get('.wp-block-example-image-example img').scrollIntoView().should('be.visible');
 
-        cy.get('.wp-block-example-image-example img')
-            .should('have.attr', 'alt');
+		cy.window().then( ( win ) => {
+			const { wp } = win;
 
-        cy.get('.wp-block-example-image-example img')
-            .should('have.attr', 'src');
+			const paraBlock = wp.blocks.createBlock( 'example/image-example' );
 
-        cy.savePost();
 
-		// click on the View Post snackbar item
-		cy.get('.components-snackbar a').click();
+			wp.data.dispatch( 'core/editor' ).insertBlocks( paraBlock );
+		} );
+
+		cy.get('button').contains('Media Library').click();
+		cy.get('#menu-item-browse').click();
+		cy.get('.attachment-preview').first().click();
+		cy.get('#attachment-details-alt-text').type('Test Alt Text');
+		cy.get('.media-button-select').contains('Select').click();
+
+		cy.get('.wp-block-example-image-example img').scrollIntoView().should('be.visible');
+
+		cy.get('.wp-block-example-image-example img')
+			.should('have.attr', 'alt');
 
-        // return to the editor
-        cy.get('a').contains('Edit Page').click();
+		cy.get('.wp-block-example-image-example img')
+			.should('have.attr', 'src');
 
-		cy.wait(500);
+		cy.savePost();
+
+		// click on the View Post snackbar item
+		cy.get('.components-snackbar a').click();
 
-        cy.get('.wp-block-example-image-example img').scrollIntoView().should('be.visible');
+		// return to the editor
+		cy.get('a').contains('Edit Page').click();
 
+		cy.get('.wp-block-example-image-example img', { timeout: 5000 }).should('be.visible');
 	})
 
 })

example/src/blocks/image-example/edit.js

@@ -23,9 +23,13 @@ export function BlockEdit(props) {
 
     return (
         <>
-            <BlockControls>
-               <MediaToolbar id={imageId} onSelect={ handleImageSelection } isOptional={true} onRemove={removeImage} />
-            </BlockControls>
+            {
+                imageId && (
+                    <BlockControls>
+                        <MediaToolbar id={imageId} onSelect={ handleImageSelection } isOptional={true} onRemove={removeImage} />
+                    </BlockControls>
+                )
+            }
             <div {...blockProps}>
                 <h2>Hello World!</h2>
                 <Image id={imageId} size="large" onSelect={handleImageSelection} className="example-image" focalPoint={focalPoint} onChangeFocalPoint={handleFocalPointChange} />