@wordpress/block-library 10.0.1 → 10.1.1-next.v.202607070741.0

package/src/image/image.js

@@ -1,7 +1,6 @@
 /**
  * WordPress dependencies
  */
-import { isBlobURL } from '@wordpress/blob';
 import {
 	ExternalLink,
 	FocalPointPicker,
@@ -34,7 +33,6 @@ import {
 	MediaReplaceFlow,
 	store as blockEditorStore,
 	useSettings,
-	__experimentalImageEditor as ImageEditor,
 	__experimentalUseBorderProps as useBorderProps,
 	__experimentalGetShadowClassesAndStyles as getShadowClassesAndStyles,
 	privateApis as blockEditorPrivateApis,
@@ -71,6 +69,7 @@ import {
 	getStyleStateKey,
 } from '../utils/style-state';
 import { useOpenImageMediaEditorModal } from './use-open-image-media-editor-modal';
+import AnimatedGifConvertControl from './animated-gif-convert-control';
 import {
 	MIN_SIZE,
 	ALLOWED_MEDIA_TYPES,
@@ -84,6 +83,7 @@ const {
 	isDefaultBlockStyleState,
 	ResolutionTool,
 	mediaEditKey,
+	mediaSideloadFromUrlKey,
 } = unlock( blockEditorPrivateApis );
 
 const scaleOptions = [
@@ -416,8 +416,6 @@ export default function Image( {
 		{ loadedNaturalWidth, loadedNaturalHeight },
 		setLoadedNaturalSize,
 	] = useState( {} );
-	const [ isEditingImage, setIsEditingImage ] = useState( false );
-	const [ externalBlob, setExternalBlob ] = useState();
 	const [ hasImageErrored, setHasImageErrored ] = useState( false );
 	const hasNonContentControls = blockEditingMode === 'default';
 	const isContentOnlyMode = blockEditingMode === 'contentOnly';
@@ -464,31 +462,16 @@ export default function Image( {
 		__unstableMarkNextChangeAsNotPersistent,
 	] );
 
-	// If an image is externally hosted, try to fetch the image data. This may
-	// fail if the image host doesn't allow CORS with the domain. If it works,
-	// we can enable a button in the toolbar to upload the image.
-	useEffect( () => {
-		if (
-			! isExternalImage( id, url ) ||
-			! isSingleSelected ||
-			! getSettings().mediaUpload
-		) {
-			setExternalBlob();
-			return;
-		}
-
-		if ( externalBlob ) {
-			return;
-		}
-
-		window
-			// Avoid cache, which seems to help avoid CORS problems.
-			.fetch( url.includes( '?' ) ? url : url + '?' )
-			.then( ( response ) => response.blob() )
-			.then( ( blob ) => setExternalBlob( blob ) )
-			// Do nothing, cannot upload.
-			.catch( () => {} );
-	}, [ id, url, isSingleSelected, externalBlob, getSettings ] );
+	/*
+	 * Externally hosted images can be uploaded to the media library. The
+	 * server sideloads the URL (see mediaSideloadFromUrl), so this works even
+	 * when the editor is cross-origin isolated and the browser cannot read the
+	 * cross-origin image's bytes itself.
+	 */
+	const canUploadExternalImage =
+		isSingleSelected &&
+		isExternalImage( id, url ) &&
+		!! getSettings()[ mediaSideloadFromUrlKey ];
 
 	// Get naturalWidth and naturalHeight from image, and fall back to loaded natural
 	// width and height. This resolves an issue in Safari where the loaded natural
@@ -605,43 +588,24 @@ export default function Image( {
 	}
 
 	function uploadExternal() {
-		const { mediaUpload } = getSettings();
-		if ( ! mediaUpload ) {
+		const mediaSideloadFromUrl = getSettings()[ mediaSideloadFromUrlKey ];
+		if ( ! mediaSideloadFromUrl ) {
 			return;
 		}
-		let notified = false;
-		mediaUpload( {
-			filesList: [ externalBlob ],
-			onFileChange( [ img ] ) {
+		mediaSideloadFromUrl( {
+			url,
+			onSuccess( img ) {
 				onSelectImage( img );
-
-				if ( isBlobURL( img.url ) ) {
-					return;
-				}
-
-				// With client-side media processing, onFileChange fires
-				// for each generated sub-size. Only show the notice once.
-				if ( ! notified ) {
-					notified = true;
-					setExternalBlob();
-					createSuccessNotice( __( 'Image uploaded.' ), {
-						type: 'snackbar',
-					} );
-				}
+				createSuccessNotice( __( 'Image uploaded.' ), {
+					type: 'snackbar',
+				} );
 			},
-			allowedTypes: ALLOWED_MEDIA_TYPES,
 			onError( message ) {
 				createErrorNotice( message, { type: 'snackbar' } );
 			},
 		} );
 	}
 
-	useEffect( () => {
-		if ( ! isSingleSelected ) {
-			setIsEditingImage( false );
-		}
-	}, [ isSingleSelected ] );
-
 	const canEditImage =
 		id &&
 		naturalWidth &&
@@ -651,7 +615,7 @@ export default function Image( {
 	const allowCrop =
 		isSingleSelected &&
 		canEditImage &&
-		! isEditingImage &&
+		!! openImageMediaEditorModal &&
 		! isContentOnlyMode &&
 		! isUploading;
 
@@ -663,8 +627,8 @@ export default function Image( {
 	}
 
 	// TODO: Can allow more units after figuring out how they should interact
-	// with the ResizableBox and ImageEditor components. Calculations later on
-	// for those components are currently assuming px units.
+	// with the ResizableBox component. Calculations later on for that
+	// component are currently assuming px units.
 	const dimensionsUnitsOptions = useCustomUnits( {
 		availableUnits: [ 'px' ],
 	} );
@@ -881,7 +845,6 @@ export default function Image( {
 
 	const showUrlInput =
 		isSingleSelected &&
-		! isEditingImage &&
 		! lockHrefControls &&
 		! lockUrlControls &&
 		! isDecorative;
@@ -891,24 +854,22 @@ export default function Image( {
 
 	const showBlockControls = showUrlInput || allowCrop || showCoverControls;
 
-	const mediaReplaceFlow = isSingleSelected &&
-		! isEditingImage &&
-		! lockUrlControls && (
-			// For contentOnly mode, put this button in its own area so it has borders around it.
-			<BlockControls group={ isContentOnlyMode ? 'inline' : 'other' }>
-				<MediaReplaceFlow
-					mediaId={ id }
-					mediaURL={ url }
-					allowedTypes={ ALLOWED_MEDIA_TYPES }
-					onSelect={ onSelectImage }
-					onSelectURL={ onSelectURL }
-					onError={ onUploadError }
-					name={ ! url ? __( 'Add image' ) : __( 'Replace' ) }
-					onReset={ () => onSelectImage( undefined ) }
-					variant="toolbar"
-				/>
-			</BlockControls>
-		);
+	const mediaReplaceFlow = isSingleSelected && ! lockUrlControls && (
+		// For contentOnly mode, put this button in its own area so it has borders around it.
+		<BlockControls group={ isContentOnlyMode ? 'inline' : 'other' }>
+			<MediaReplaceFlow
+				mediaId={ id }
+				mediaURL={ url }
+				allowedTypes={ ALLOWED_MEDIA_TYPES }
+				onSelect={ onSelectImage }
+				onSelectURL={ onSelectURL }
+				onError={ onUploadError }
+				name={ ! url ? __( 'Add image' ) : __( 'Replace' ) }
+				onReset={ () => onSelectImage( undefined ) }
+				variant="toolbar"
+			/>
+		</BlockControls>
+	);
 
 	const hasDataFormBlockFields =
 		window?.__experimentalContentOnlyInspectorFields;
@@ -936,14 +897,8 @@ export default function Image( {
 					{ allowCrop && (
 						<ToolbarButton
 							ref={ cropButtonRef }
-							onClick={
-								openImageMediaEditorModal
-									? openImageMediaEditorModal
-									: () => setIsEditingImage( true )
-							}
-							aria-haspopup={
-								openImageMediaEditorModal ? 'dialog' : undefined
-							}
+							onClick={ openImageMediaEditorModal }
+							aria-haspopup="dialog"
 							icon={ crop }
 							label={ __( 'Crop' ) }
 						/>
@@ -957,7 +912,7 @@ export default function Image( {
 					) }
 				</BlockControls>
 			) }
-			{ isSingleSelected && externalBlob && (
+			{ canUploadExternalImage && (
 				<BlockControls>
 					<ToolbarGroup>
 						<ToolbarButton
@@ -1194,108 +1149,88 @@ export default function Image( {
 
 	const borderProps = useBorderProps( attributes );
 	const shadowProps = getShadowClassesAndStyles( attributes );
-	const isRounded = attributes.className?.includes( 'is-style-rounded' );
 
 	const { postType, postId, queryId } = context;
 	const isDescendentOfQueryLoop = Number.isFinite( queryId );
 
-	let img =
-		temporaryURL && hasImageErrored ? (
-			// Show a placeholder during upload when the blob URL can't be loaded. This can
-			// happen when the user uploads a HEIC image in a browser that doesn't support them.
-			<Placeholder
-				className="wp-block-image__placeholder"
-				withIllustration
-			>
-				<Spinner />
-			</Placeholder>
-		) : (
-			<>
-				<img
-					src={ temporaryURL || url }
-					alt={ defaultedAlt }
-					onError={ onImageError }
-					onLoad={ onImageLoad }
-					ref={ setRefs }
-					className={ borderProps.className }
-					width={ naturalWidth }
-					height={ naturalHeight }
-					style={ {
-						aspectRatio,
-						...( resizeDelta
-							? {
-									width: pixelSize.width + resizeDelta.width,
-									height:
-										pixelSize.height + resizeDelta.height,
-							  }
-							: ( () => {
-									const style = {};
-									if ( width === 'auto' ) {
-										style.width = 'auto';
-									} else if (
-										width !== undefined &&
-										width !== null
-									) {
-										style.width =
-											typeof width === 'number'
-												? `${ width }px`
-												: width;
-									}
-									if (
-										height === 'auto' ||
-										height === undefined ||
-										height === null
-									) {
-										style.height = 'auto';
-									} else {
-										style.height =
-											typeof height === 'number'
-												? `${ height }px`
-												: height;
-									}
-									return style;
-							  } )() ),
-						objectFit: scale,
-						objectPosition:
-							focalPoint && scale
-								? mediaPosition( focalPoint )
-								: undefined,
-						...borderProps.style,
-						...shadowProps.style,
-					} }
-				/>
-				{ isUploading && <Spinner /> }
-			</>
-		);
-
-	if ( canEditImage && isEditingImage ) {
-		img = (
-			<ImageWrapper href={ href }>
-				<ImageEditor
-					id={ id }
-					url={ url }
-					{ ...pixelSize }
-					naturalHeight={ naturalHeight }
-					naturalWidth={ naturalWidth }
-					onSaveImage={ ( imageAttributes ) =>
-						setAttributes( imageAttributes )
-					}
-					onFinishEditing={ () => {
-						setIsEditingImage( false );
-					} }
-					borderProps={ isRounded ? undefined : borderProps }
-				/>
-			</ImageWrapper>
-		);
-	} else {
-		img = <ImageWrapper href={ href }>{ img }</ImageWrapper>;
-	}
+	const img = (
+		<ImageWrapper href={ href }>
+			{ temporaryURL && hasImageErrored ? (
+				// Show a placeholder during upload when the blob URL can't be loaded. This can
+				// happen when the user uploads a HEIC image in a browser that doesn't support them.
+				<Placeholder
+					className="wp-block-image__placeholder"
+					withIllustration
+				>
+					<Spinner />
+				</Placeholder>
+			) : (
+				<>
+					<img
+						src={ temporaryURL || url }
+						alt={ defaultedAlt }
+						onError={ onImageError }
+						onLoad={ onImageLoad }
+						ref={ setRefs }
+						className={ borderProps.className }
+						width={ naturalWidth }
+						height={ naturalHeight }
+						style={ {
+							aspectRatio,
+							...( resizeDelta
+								? {
+										width:
+											pixelSize.width + resizeDelta.width,
+										height:
+											pixelSize.height +
+											resizeDelta.height,
+								  }
+								: ( () => {
+										const style = {};
+										if ( width === 'auto' ) {
+											style.width = 'auto';
+										} else if (
+											width !== undefined &&
+											width !== null
+										) {
+											style.width =
+												typeof width === 'number'
+													? `${ width }px`
+													: width;
+										}
+										if (
+											height === 'auto' ||
+											height === undefined ||
+											height === null
+										) {
+											style.height = 'auto';
+										} else {
+											style.height =
+												typeof height === 'number'
+													? `${ height }px`
+													: height;
+										}
+										return style;
+								  } )() ),
+							objectFit: scale,
+							objectPosition:
+								focalPoint && scale
+									? mediaPosition( focalPoint )
+									: undefined,
+							...borderProps.style,
+							...shadowProps.style,
+						} }
+					/>
+					{ isUploading && <Spinner /> }
+				</>
+			) }
+		</ImageWrapper>
+	);
 
 	let resizableBox;
 	if (
 		isResizable &&
 		isSingleSelected &&
-		! isEditingImage &&
 		! isUploading &&
 		! SIZED_LAYOUTS.includes( parentLayoutType )
 	) {
@@ -1455,6 +1390,12 @@ export default function Image( {
 
 	return (
 		<>
+			{ isSingleSelected && ! lockUrlControls && (
+				<AnimatedGifConvertControl
+					attributes={ attributes }
+					clientId={ clientId }
+				/>
+			) }
 			{ mediaReplaceFlow }
 			{ controls }
 			{ featuredImageControl }

package/src/image/style.scss

@@ -117,7 +117,6 @@
 
 		// If a browser supports it, we will switch to using a circular SVG mask.
 		@supports (mask-image: none) or (-webkit-mask-image: none) {
-			/* stylelint-disable-next-line function-url-quotes -- We need quotes for the data URL to use the SVG inline. */
 			mask-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><circle cx="50" cy="50" r="50"/></svg>');
 			mask-mode: alpha;
 			mask-repeat: no-repeat;