@wordpress/block-library 10.1.0 → 10.2.0

package/src/image/editor.scss

@@ -17,6 +17,15 @@ figure.wp-block-image:not(.wp-block) {
 .wp-block-image {
 	position: relative;
 
+	// While uploading or processing client-side, hug the preview so the
+	// centered spinner lands on the image. A preview narrower than the content
+	// width (e.g. a small animated GIF being transcoded to a video) otherwise
+	// leaves the spinner off to one side. Wide and full alignments keep their
+	// own width.
+	&.is-transient:not(.alignwide):not(.alignfull) {
+		width: fit-content;
+	}
+
 	.is-applying img,
 	&.is-transient img {
 		opacity: 0.3;
@@ -120,6 +129,7 @@ figure.wp-block-image:not(.wp-block) {
 	width: 100%;
 	overflow: hidden;
 
+	// stylelint-disable selector-class-pattern -- react-easy-crop library class names.
 	.reactEasyCrop_Container {
 		// The linked Image block has `pointer-events: none` applied. Override it
 		// here to enable the crop action.
@@ -134,6 +144,7 @@ figure.wp-block-image:not(.wp-block) {
 			border-radius: 0; // Prevent's theme.json radius bleeding into cropper.
 		}
 	}
+	// stylelint-enable selector-class-pattern
 }
 
 .wp-block-image__crop-icon {

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,
@@ -84,6 +82,7 @@ const {
 	isDefaultBlockStyleState,
 	ResolutionTool,
 	mediaEditKey,
+	mediaSideloadFromUrlKey,
 } = unlock( blockEditorPrivateApis );
 
 const scaleOptions = [
@@ -416,8 +415,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 +461,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 +587,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 +614,7 @@ export default function Image( {
 	const allowCrop =
 		isSingleSelected &&
 		canEditImage &&
-		! isEditingImage &&
+		!! openImageMediaEditorModal &&
 		! isContentOnlyMode &&
 		! isUploading;
 
@@ -663,8 +626,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 +844,6 @@ export default function Image( {
 
 	const showUrlInput =
 		isSingleSelected &&
-		! isEditingImage &&
 		! lockHrefControls &&
 		! lockUrlControls &&
 		! isDecorative;
@@ -891,10 +853,9 @@ 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.
+	const mediaControls = 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 }
@@ -908,7 +869,8 @@ export default function Image( {
 					variant="toolbar"
 				/>
 			</BlockControls>
-		);
+		</>
+	);
 
 	const hasDataFormBlockFields =
 		window?.__experimentalContentOnlyInspectorFields;
@@ -936,14 +898,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 +913,7 @@ export default function Image( {
 					) }
 				</BlockControls>
 			) }
-			{ isSingleSelected && externalBlob && (
+			{ canUploadExternalImage && (
 				<BlockControls>
 					<ToolbarGroup>
 						<ToolbarButton
@@ -1194,108 +1150,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 )
 	) {
@@ -1420,7 +1356,7 @@ export default function Image( {
 	if ( ! url && ! temporaryURL ) {
 		return (
 			<>
-				{ mediaReplaceFlow }
+				{ mediaControls }
 				{ controls }
 			</>
 		);
@@ -1455,7 +1391,7 @@ export default function Image( {
 
 	return (
 		<>
-			{ mediaReplaceFlow }
+			{ mediaControls }
 			{ controls }
 			{ featuredImageControl }
 			{ img }

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;

package/src/image/test/use-open-image-media-editor-modal.js

@@ -1,7 +1,3 @@
-/**
- * @jest-environment jsdom
- */
-
 /**
  * External dependencies
  */
@@ -109,6 +105,25 @@ describe( 'useOpenImageMediaEditorModal', () => {
 		jest.clearAllMocks();
 	} );
 
+	it( 'returns no opener when the media editor modal setting is unavailable', () => {
+		useRegistry.mockReturnValue( createRegistry() );
+		mockMediaEditorModalSetting( undefined );
+
+		const { result } = renderHook( () =>
+			useOpenImageMediaEditorModal( {
+				attributes: {
+					id: 1,
+					url: 'original.jpg',
+					alt: '',
+					caption: '',
+				},
+				setAttributes: jest.fn(),
+			} )
+		);
+
+		expect( result.current ).toBeUndefined();
+	} );
+
 	it( 'passes an onClose handler for returning focus when the media editor closes', async () => {
 		const cropButton = document.createElement( 'button' );
 		const otherButton = document.createElement( 'button' );

package/src/image/transforms.js

@@ -3,6 +3,95 @@
  */
 import { createBlobURL, isBlobURL } from '@wordpress/blob';
 import { createBlock, getBlockAttributes } from '@wordpress/blocks';
+import { select } from '@wordpress/data';
+import { store as coreStore } from '@wordpress/core-data';
+
+/**
+ * Returns the subset of block attributes that should be carried over when
+ * converting an animated-GIF Image block into its converted Video block.
+ *
+ * The conversion swaps one block for another via `createBlock`, which would
+ * otherwise drop everything the author set on the original block. This carries
+ * the attributes both blocks support: block alignment, the HTML anchor, custom
+ * class names, and margin spacing.
+ *
+ * Image-only attributes such as links (`href`/`linkDestination`), sizing
+ * (`sizeSlug`/`scale`), and `border`/`shadow` styles are intentionally not
+ * carried: the Video block has no equivalent, so copying them would leave
+ * attributes the target block cannot represent.
+ *
+ * @param {Object} attributes Source block attributes.
+ * @return {Object} Attributes to spread into the converted block.
+ */
+function getCarriedGifConversionAttributes( attributes ) {
+	const { align, anchor, className, style } = attributes;
+	const margin = style?.spacing?.margin;
+
+	return {
+		...( align && { align } ),
+		...( anchor && { anchor } ),
+		...( className && { className } ),
+		...( margin && { style: { spacing: { margin } } } ),
+	};
+}
+
+/**
+ * Returns the sideloaded video companion of an animated GIF image attachment,
+ * or `null` when the media is not a converted animated GIF.
+ *
+ * An animated GIF uploaded through the editor gets a muted, looping video
+ * transcode sideloaded next to it and recorded (as basenames) in the
+ * attachment's `media_details.animated_video` / `animated_video_poster`.
+ *
+ * Block transforms match and run synchronously, so this reads the attachment
+ * record straight from the core-data store: it only returns the companion once
+ * the record is resolved. The Image block resolves the record while the block
+ * is selected, which is also when the block switcher can offer the transform.
+ *
+ * @param {number} id  Image attachment ID.
+ * @param {string} url Image block URL, used to cheaply skip non-GIF media.
+ * @return {Object|null} Companion details (absolute `src`/`poster` URLs and
+ *                       the GIF's intrinsic `width`/`height`), or `null`.
+ */
+function getAnimatedGifVideoCompanion( id, url ) {
+	if ( ! id ) {
+		return null;
+	}
+	/*
+	 * Only animated GIFs have a video companion. Gate on the `.gif` extension
+	 * so an ordinary image never reaches into the attachment record just to
+	 * discover it has no companion. Strip any query string or fragment first
+	 * so a URL like `cat.gif?ver=2` still matches.
+	 */
+	const urlPath = url?.split( /[?#]/ )[ 0 ];
+	if ( ! urlPath?.toLowerCase().endsWith( '.gif' ) ) {
+		return null;
+	}
+	const record = select( coreStore ).getEntityRecord(
+		'postType',
+		'attachment',
+		id,
+		{ context: 'view' }
+	);
+	const details = record?.media_details;
+	if ( ! details?.animated_video || ! record?.source_url ) {
+		return null;
+	}
+	// Companion files are sideloaded next to the GIF, so they share its
+	// directory; build their URLs from the GIF's own source URL.
+	const dir = record.source_url.slice(
+		0,
+		record.source_url.lastIndexOf( '/' ) + 1
+	);
+	return {
+		src: dir + details.animated_video,
+		poster: details.animated_video_poster
+			? dir + details.animated_video_poster
+			: undefined,
+		width: details.width,
+		height: details.height,
+	};
+}
 
 export function stripFirstImage( attributes, { shortcode } ) {
 	const { body } = document.implementation.createHTMLDocument( '' );
@@ -253,6 +342,45 @@ const transforms = {
 			},
 		},
 	],
+	to: [
+		{
+			// Offer converting an animated GIF into the Video block's "GIF"
+			// variation: a muted, looping, autoplaying video transcoded from
+			// the GIF and sideloaded next to it when it was uploaded. Only
+			// matches when that companion video exists, so ordinary images
+			// never see this transform.
+			type: 'block',
+			blocks: [ 'core/video' ],
+			isMatch: ( { id, url } ) =>
+				!! getAnimatedGifVideoCompanion( id, url ),
+			transform( attributes ) {
+				const { id, url, caption } = attributes;
+				const companion = getAnimatedGifVideoCompanion( id, url );
+
+				return createBlock( 'core/video', {
+					...getCarriedGifConversionAttributes( attributes ),
+					id,
+					src: companion.src,
+					poster: companion.poster,
+					caption,
+					controls: false,
+					loop: true,
+					autoplay: true,
+					muted: true,
+					playsInline: true,
+					/*
+					 * Carry the GIF's intrinsic dimensions so the <video>
+					 * keeps its aspect ratio from the first paint. Without
+					 * them the element collapses to the browser-default size
+					 * and then jumps once the poster/metadata load, which
+					 * shows up as a brief duplicated image during the swap.
+					 */
+					width: companion.width,
+					height: companion.height,
+				} );
+			},
+		},
+	],
 };
 
 export default transforms;

package/src/index.js

@@ -197,6 +197,8 @@ const getAllBlocks = () => {
 		pageList,
 		pageListItem,
 		pattern,
+		playlist,
+		playlistTrack,
 		preformatted,
 		pullquote,
 		reusableBlock,
@@ -208,6 +210,10 @@ const getAllBlocks = () => {
 		socialLinks,
 		spacer,
 		table,
+		tabs,
+		tabList,
+		tabPanels,
+		tabPanel,
 		tagCloud,
 		textColumns,
 		verse,
@@ -281,16 +287,10 @@ const getAllBlocks = () => {
 	}
 
 	if ( window?.__experimentalEnableBlockExperiments ) {
-		blocks.push( tabList );
-		blocks.push( tabs );
-		blocks.push( tabPanel );
-		blocks.push( tabPanels );
-		blocks.push( playlist );
-		blocks.push( playlistTrack );
+		// Blocks added here are only registered when the "Block experiments"
+		// option is enabled in the Gutenberg > Experiments settings page.
 	}
 
-	// Always register the classic block. Inserter availability is controlled
-	// by the block's `supports.inserter` value in `freeform/init`.
 	blocks.push( classic );
 
 	return blocks.filter( Boolean );
@@ -345,13 +345,23 @@ export const registerCoreBlocks = (
 				...( ( bootstrappedBlockType?.apiVersion ?? 0 ) < 3 && {
 					apiVersion: 3,
 				} ),
+				// Always pass the postId context so the server-side render can
+				// reproduce the same output as the front end, while preserving
+				// any context declared in the block's PHP registration.
+				usesContext: Array.from(
+					new Set( [
+						...( bootstrappedBlockType?.usesContext ?? [] ),
+						'postId',
+					] )
+				),
 				// Inspector controls are rendered by the auto-register hook in block-editor
-				edit: function Edit( { attributes } ) {
+				edit: function Edit( { attributes, context } ) {
 					const disabledRef = useDisabled();
 					const blockProps = useBlockProps( { ref: disabledRef } );
 					const { content, status, error } = useServerSideRender( {
 						block: blockName,
 						attributes,
+						urlQueryArgs: { post_id: context?.postId },
 					} );
 
 					if ( status === 'loading' ) {