Block API: Introduce "local" attributes and use it for the image block

docs/reference-guides/core-blocks.md

@@ -388,7 +388,7 @@ Insert an image to make a visual statement. ([Source](https://github.com/WordPre
 -	**Name:** core/image
 -	**Category:** media
 -	**Supports:** align (center, full, left, right, wide), anchor, color (~~background~~, ~~text~~), filter (duotone), interactivity, shadow ()
--	**Attributes:** alt, aspectRatio, caption, height, href, id, lightbox, linkClass, linkDestination, linkTarget, rel, scale, sizeSlug, title, url, width
+-	**Attributes:** alt, aspectRatio, caption, height, href, id, lightbox, linkClass, linkDestination, linkTarget, rel, scale, sizeSlug, temporaryUrl, title, url, width
 
 ## Latest Comments
 

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

@@ -249,9 +249,9 @@ function GalleryEdit( props ) {
 		const imageArray = newFileUploads
 			? Array.from( selectedImages ).map( ( file ) => {
 					if ( ! file.url ) {
-						return pickRelevantMediaFiles( {
-							url: createBlobURL( file ),
-						} );
+						return {
+							temporaryUrl: createBlobURL( file ),
+						};
 					}
 
 					return file;
@@ -271,9 +271,9 @@ function GalleryEdit( props ) {
 			.filter( ( file ) => file.url || isValidFileType( file ) )
 			.map( ( file ) => {
 				if ( ! file.url ) {
-					return pickRelevantMediaFiles( {
-						url: createBlobURL( file ),
-					} );
+					return {
+						temporaryUrl: createBlobURL( file ),
+					};
 				}
 
 				return file;
@@ -307,6 +307,7 @@ function GalleryEdit( props ) {
 		const newBlocks = newImageList.map( ( image ) => {
 			return createBlock( 'core/image', {
 				id: image.id,
+				temporaryUrl: image.temporaryUrl,
 				url: image.url,
 				caption: image.caption,
 				alt: image.alt,

packages/block-library/src/gallery/transforms.js

@@ -223,7 +223,7 @@ const transforms = {
 				if ( isGalleryV2Enabled() ) {
 					const innerBlocks = files.map( ( file ) =>
 						createBlock( 'core/image', {
-							url: createBlobURL( file ),
+							temporaryUrl: createBlobURL( file ),
 						} )
 					);
 

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

@@ -9,6 +9,10 @@
 	"keywords": [ "img", "photo", "picture" ],
 	"textdomain": "default",
 	"attributes": {
+		"temporaryUrl": {
+			"type": "string",
+			"isTemporary": true
+		},
 		"url": {
 			"type": "string",
 			"source": "attribute",

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

@@ -56,17 +56,6 @@ export const pickRelevantMediaFiles = ( image, size ) => {
 	return imageProps;
 };
 
-/**
- * Is the URL a temporary blob URL? A blob URL is one that is used temporarily
- * while the image is being uploaded and will not have an id yet allocated.
- *
- * @param {number=} id  The id of the image.
- * @param {string=} url The url of the image.
- *
- * @return {boolean} Is the URL a Blob URL
- */
-const isTemporaryImage = ( id, url ) => ! id && isBlobURL( url );
-
 /**
  * Is the url for the image hosted externally. An externally hosted image has no
  * id and is not a blob url.
@@ -118,9 +107,9 @@ export function ImageEdit( {
 		align,
 		metadata,
 	} = attributes;
-	const [ temporaryURL, setTemporaryURL ] = useState( () => {
-		return isTemporaryImage( id, url ) ? url : undefined;
-	} );
+	const [ temporaryURL, setTemporaryURL ] = useState(
+		attributes.temporaryUrl
+	);
 
 	const altRef = useRef();
 	useEffect( () => {
@@ -157,8 +146,8 @@ export function ImageEdit( {
 			src: undefined,
 			id: undefined,
 			url: undefined,
+			temporaryUrl: undefined,
 		} );
-		setTemporaryURL( undefined );
 	}
 
 	function onSelectImage( media ) {
@@ -169,7 +158,9 @@ export function ImageEdit( {
 				id: undefined,
 				title: undefined,
 				caption: undefined,
+				temporaryUrl: undefined,
 			} );
+			setTemporaryURL();
 
 			return;
 		}
@@ -179,8 +170,6 @@ export function ImageEdit( {
 			return;
 		}
 
-		setTemporaryURL();
-
 		const { imageDefaultSize } = getSettings();
 
 		// Try to use the previous selected image size if its available
@@ -254,24 +243,28 @@ export function ImageEdit( {
 		mediaAttributes.href = href;
 
 		setAttributes( {
+			temporaryUrl: undefined,
 			...mediaAttributes,
 			...additionalAttributes,
 			linkDestination,
 		} );
+		setTemporaryURL();
 	}
 
 	function onSelectURL( newURL ) {
 		if ( newURL !== url ) {
 			setAttributes( {
+				temporaryUrl: undefined,
 				url: newURL,
 				id: undefined,
 				sizeSlug: getSettings().imageDefaultSize,
 			} );
+			setTemporaryURL();
 		}
 	}
 
 	useUploadMediaFromBlobURL( {
-		url,
+		url: temporaryURL,
 		allowedTypes: ALLOWED_MEDIA_TYPES,
 		onChange: onSelectImage,
 		onError: onUploadError,
@@ -292,7 +285,7 @@ export function ImageEdit( {
 	const shadowProps = getShadowClassesAndStyles( attributes );
 
 	const classes = clsx( className, {
-		'is-transient': temporaryURL,
+		'is-transient': !! temporaryURL,
 		'is-resized': !! width || !! height,
 		[ `size-${ sizeSlug }` ]: sizeSlug,
 		'has-custom-border':

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

@@ -159,7 +159,7 @@ const transforms = {
 			transform( files ) {
 				const blocks = files.map( ( file ) => {
 					return createBlock( 'core/image', {
-						url: createBlobURL( file ),
+						temporaryUrl: createBlobURL( file ),
 					} );
 				} );
 				return blocks;

packages/block-library/src/utils/hooks.js

@@ -48,10 +48,7 @@ export function useUploadMediaFromBlobURL( args = {} ) {
 			return;
 		}
 
-		if (
-			! latestArgs.current.url ||
-			! isBlobURL( latestArgs.current.url )
-		) {
+		if ( ! latestArgs.current.url ) {
 			return;
 		}
 

packages/blocks/src/api/serializer.js

@@ -237,6 +237,11 @@ export function getCommentAttributes( blockType, attributes ) {
 				return accumulator;
 			}
 
+			// Ignore all temporary attributes
+			if ( attributeSchema.isTemporary ) {
+				return accumulator;
+			}
+
 			// Ignore default value.
 			if (
 				'default' in attributeSchema &&