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,35 @@ export function ImageEdit( {
 		align,
 		metadata,
 	} = attributes;
+
 	const [ temporaryURL, setTemporaryURL ] = useState( attributes.blob );
 
 	const [ contentResizeListener, { width: containerWidth } ] =
 		useResizeObserver();
 
+	const [ placeholderResizeListener, { width: placeholderWidth } ] =
+		useResizeObserver();
+
+	// Parse width of the image block attribute.
+	const parseWidth = ( widthValue ) => {
+		const parsed = parseInt( widthValue, 10 );
+		return isNaN( parsed ) ? null : parsed;
+	};
+
+	const parsedWidth = parseWidth( width );
+
+	// Get the effective width of the image placeholder use the minimum of placeholder width
+	// or image attribute width if both are defined. If only one is defined, use that one.
+	const getEffectiveWidth = () => {
+		if ( placeholderWidth !== null && parsedWidth !== null ) {
+			return Math.min( placeholderWidth, parsedWidth );
+		}
+		return placeholderWidth !== null ? placeholderWidth : parsedWidth;
+	};
+
+	const effectiveWidth = getEffectiveWidth();
+	const isLargeContainer = effectiveWidth !== null && effectiveWidth > 160;
+
 	const altRef = useRef();
 	useEffect( () => {
 		altRef.current = alt;
@@ -330,40 +354,48 @@ export function ImageEdit( {
 	);
 	const placeholder = ( content ) => {
 		return (
-			<Placeholder
-				className={ clsx( 'block-editor-media-placeholder', {
-					[ borderProps.className ]:
-						!! borderProps.className && ! isSingleSelected,
-				} ) }
-				withIllustration
-				icon={ lockUrlControls ? pluginsIcon : icon }
-				label={ __( 'Image' ) }
-				instructions={
-					! lockUrlControls &&
-					__(
-						'Upload an image file, pick one from your media library, or add one with a URL.'
-					)
-				}
-				style={ {
-					aspectRatio:
-						! ( width && height ) && aspectRatio
-							? aspectRatio
-							: undefined,
-					width: height && aspectRatio ? '100%' : width,
-					height: width && aspectRatio ? '100%' : height,
-					objectFit: scale,
-					...borderProps.style,
-					...shadowProps.style,
-				} }
-			>
-				{ lockUrlControls ? (
-					<span className="block-bindings-media-placeholder-message">
-						{ lockUrlControlsMessage }
-					</span>
-				) : (
-					content
-				) }
-			</Placeholder>
+			<>
+				{ placeholderResizeListener }
+				<Placeholder
+					className={ clsx( 'block-editor-media-placeholder', {
+						[ borderProps.className ]:
+							!! borderProps.className && ! isSingleSelected,
+					} ) }
+					icon={
+						isLargeContainer &&
+						( lockUrlControls ? pluginsIcon : icon )
+					}
+					withIllustration={
+						! isSingleSelected || ! isLargeContainer
+					}
+					label={ isLargeContainer && __( 'Image' ) }
+					instructions={
+						! lockUrlControls &&
+						isLargeContainer &&
+						__(
+							'Upload an image file, pick one from your media library, or add one with a URL.'
+						)
+					}
+					style={ {
+						aspectRatio:
+							! ( width && height ) && aspectRatio
+								? aspectRatio
+								: undefined,
+						width: height && aspectRatio ? '100%' : width,
+						height: width && aspectRatio ? '100%' : height,
+						objectFit: scale,
+						...borderProps.style,
+						...shadowProps.style,
+					} }
+				>
+					{ lockUrlControls && isLargeContainer && (
+						<span className="block-bindings-media-placeholder-message">
+							{ lockUrlControlsMessage }
+						</span>
+					) }
+					{ ! lockUrlControls && isLargeContainer && content }
+				</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 }