Image: Adds the block controls for uploading image.

packages/block-library/src/image/edit.js

@@ -12,8 +12,8 @@ import { Placeholder } from '@wordpress/components';
 import { useDispatch, useSelect } from '@wordpress/data';
 import {
 	BlockIcon,
-	MediaPlaceholder,
 	useBlockProps,
+	MediaPlaceholder,
 	store as blockEditorStore,
 	__experimentalUseBorderProps as useBorderProps,
 	__experimentalGetShadowClassesAndStyles as getShadowClassesAndStyles,
@@ -108,6 +108,7 @@ export function ImageEdit( {
 		align,
 		metadata,
 	} = attributes;
+
 	const [ temporaryURL, setTemporaryURL ] = useState( attributes.blob );
 
 	const [ contentResizeListener, { width: containerWidth } ] =

packages/block-library/src/image/editor.scss

@@ -1,9 +1,9 @@
 // Provide special styling for the placeholder.
 // @todo this particular minimal style of placeholder could be componentized further.
 .wp-block-image.wp-block-image {
-
 	// Show Placeholder style on-select.
-	&.is-selected .block-editor-media-placeholder {
+	&.is-selected .block-editor-media-placeholder.is-medium,
+	&.is-selected .block-editor-media-placeholder.is-large {
 		// Block UI appearance.
 		color: $gray-900;
 		background-color: $white;
@@ -27,13 +27,32 @@
 		&::before {
 			opacity: 0;
 		}
+
+		.block-bindings-media-placeholder-message {
+			opacity: 1;
+		}
+	}
+
+	.block-editor-media-placeholder.is-small {
+		min-height: 60px;
+	}
+
+	.block-editor-media-placeholder.is-medium,
+	.block-editor-media-placeholder.is-large {
+		.components-placeholder__fieldset,
+		.components-placeholder__label {
+			display: flex;
+		}
 	}
+
+	.block-editor-media-placeholder.is-large
+	.components-placeholder__instructions {
+		display: flex;
+	}
+
 	.block-bindings-media-placeholder-message {
 		opacity: 0;
 	}
-	&.is-selected .block-bindings-media-placeholder-message {
-		opacity: 1;
-	}
 
 	// Remove the transition while we still have a legacy placeholder style.
 	// Otherwise the content jumps between the 1px placeholder border, and any inherited custom
@@ -43,6 +62,12 @@
 	.components-button {
 		transition: none;
 	}
+
+	.components-placeholder__fieldset,
+	.components-placeholder__label,
+	.components-placeholder__instructions {
+		display: none;
+	}
 }
 
 figure.wp-block-image:not(.wp-block) {
@@ -100,7 +125,9 @@ figure.wp-block-image:not(.wp-block) {
 	}
 }
 
-.block-editor-block-list__block[data-type="core/image"] .block-editor-block-toolbar .block-editor-url-input__button-modal {
+.block-editor-block-list__block[data-type="core/image"]
+.block-editor-block-toolbar
+.block-editor-url-input__button-modal {
 	position: absolute;
 	left: 0;
 	right: 0;

packages/block-library/src/image/image.js

@@ -557,6 +557,29 @@ export default function Image( {
 
 	const showBlockControls = showUrlInput || allowCrop || showCoverControls;
 
+	const mediaReplaceFlow = isSingleSelected &&
+		! isEditingImage &&
+		! lockUrlControls && (
+			<BlockControls group="other">
+				<MediaReplaceFlow
+					mediaId={ id }
+					mediaURL={ url }
+					allowedTypes={ ALLOWED_MEDIA_TYPES }
+					accept="image/*"
+					onSelect={ onSelectImage }
+					onSelectURL={ onSelectURL }
+					onError={ onUploadError }
+					name={ ! url ? __( 'Add image' ) : __( 'Replace' ) }
+				>
+					{ url && (
+						<MenuItem onClick={ () => onSelectImage( undefined ) }>
+							{ __( 'Reset' ) }
+						</MenuItem>
+					) }
+				</MediaReplaceFlow>
+			</BlockControls>
+		);
+
 	const controls = (
 		<>
 			{ showBlockControls && (
@@ -593,23 +616,6 @@ export default function Image( {
 					) }
 				</BlockControls>
 			) }
-			{ isSingleSelected && ! isEditingImage && ! lockUrlControls && (
-				<BlockControls group="other">
-					<MediaReplaceFlow
-						mediaId={ id }
-						mediaURL={ url }
-						allowedTypes={ ALLOWED_MEDIA_TYPES }
-						accept="image/*"
-						onSelect={ onSelectImage }
-						onSelectURL={ onSelectURL }
-						onError={ onUploadError }
-					>
-						<MenuItem onClick={ () => onSelectImage( undefined ) }>
-							{ __( 'Reset' ) }
-						</MenuItem>
-					</MediaReplaceFlow>
-				</BlockControls>
-			) }
 			{ isSingleSelected && externalBlob && (
 				<BlockControls>
 					<ToolbarGroup>
@@ -1028,12 +1034,18 @@ export default function Image( {
 	}
 
 	if ( ! url && ! temporaryURL ) {
-		// Add all controls if the image attributes are connected.
-		return metadata?.bindings ? controls : sizeControls;
+		return (
+			<>
+				{ mediaReplaceFlow }
+				{ /* Add all controls if the image attributes are connected. */ }
+				{ metadata?.bindings ? controls : sizeControls }
+			</>
+		);
 	}
 
 	return (
 		<>
+			{ mediaReplaceFlow }
 			{ controls }
 			{ img }