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,11 +108,17 @@ export function ImageEdit( {
 		align,
 		metadata,
 	} = attributes;
+
 	const [ temporaryURL, setTemporaryURL ] = useState( attributes.blob );
 
 	const [ contentResizeListener, { width: containerWidth } ] =
 		useResizeObserver();
 
+	const [ placeholderResizeListener, { width: placeholderWidth } ] =
+		useResizeObserver();
+
+	const isSmallContainer = placeholderWidth ? placeholderWidth < 160 : false;
+
 	const altRef = useRef();
 	useEffect( () => {
 		altRef.current = alt;
@@ -335,11 +341,15 @@ export function ImageEdit( {
 					[ borderProps.className ]:
 						!! borderProps.className && ! isSingleSelected,
 				} ) }
-				withIllustration
-				icon={ lockUrlControls ? pluginsIcon : icon }
-				label={ __( 'Image' ) }
+				icon={
+					! isSmallContainer &&
+					( lockUrlControls ? pluginsIcon : icon )
+				}
+				withIllustration={ ! isSingleSelected || isSmallContainer }
+				label={ ! isSmallContainer && __( 'Image' ) }
 				instructions={
 					! lockUrlControls &&
+					! isSmallContainer &&
 					__(
 						'Upload an image file, pick one from your media library, or add one with a URL.'
 					)
@@ -356,13 +366,12 @@ export function ImageEdit( {
 					...shadowProps.style,
 				} }
 			>
-				{ lockUrlControls ? (
-					<span className="block-bindings-media-placeholder-message">
-						{ lockUrlControlsMessage }
-					</span>
-				) : (
-					content
-				) }
+				{ lockUrlControls &&
+					! isSmallContainer &&
+					lockUrlControlsMessage }
+
+				{ ! lockUrlControls && ! isSmallContainer && content }
+				{ placeholderResizeListener }
 			</Placeholder>
 		);
 	};

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

@@ -1,44 +1,8 @@
 // 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 {
-		// Block UI appearance.
-		color: $gray-900;
-		background-color: $white;
-		box-shadow: inset 0 0 0 $border-width $gray-900;
-		border: none;
-
-		// Disable any duotone filter applied in the selected state.
-		filter: none !important;
-
-		> svg {
-			opacity: 0;
-		}
-
-		.components-placeholder__illustration {
-			display: none;
-		}
-
-		&::before {
-			opacity: 0;
-		}
-	}
-	.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
-	// parent border that may get applied when you deselect.
-	.components-placeholder__label,
-	.components-placeholder__instructions,
-	.components-button {
-		transition: none;
+	.block-editor-media-placeholder.is-small {
+		min-height: 60px;
 	}
 }
 

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

@@ -556,6 +556,24 @@ 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' ) }
+					onReset={ () => onSelectImage( undefined ) }
+				/>
+			</BlockControls>
+		);
+
 	const controls = (
 		<>
 			{ showBlockControls && (
@@ -592,20 +610,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 }
-						onReset={ () => onSelectImage( undefined ) }
-					/>
-				</BlockControls>
-			) }
 			{ isSingleSelected && externalBlob && (
 				<BlockControls>
 					<ToolbarGroup>
@@ -1029,12 +1033,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 }