File block: Do not persist blob urls and fix undo (WordPress#63282)

Co-authored-by: youknowriad <[email protected]> Co-authored-by: ellatrix <[email protected]>
huubl · Jul 10, 2024 · e30332a · e30332a
1 parent 9c32524
commit e30332a
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 9 deletions.
diff --git a/docs/reference-guides/core-blocks.md b/docs/reference-guides/core-blocks.md
@@ -273,7 +273,7 @@ Add a link to a downloadable file. ([Source](https://github.com/WordPress/gutenb
 -	**Name:** core/file
 -	**Category:** media
 -	**Supports:** align, anchor, color (background, gradients, link, ~~text~~), interactivity, spacing (margin, padding)
--	**Attributes:** displayPreview, downloadButtonText, fileId, fileName, href, id, previewHeight, showDownloadButton, textLinkHref, textLinkTarget
+-	**Attributes:** blob, displayPreview, downloadButtonText, fileId, fileName, href, id, previewHeight, showDownloadButton, textLinkHref, textLinkTarget
 
 ## Footnotes
 

diff --git a/packages/block-library/src/file/block.json b/packages/block-library/src/file/block.json
@@ -11,6 +11,10 @@
 		"id": {
 			"type": "number"
 		},
+		"blob": {
+			"type": "string",
+			"__experimentalRole": "local"
+		},
 		"href": {
 			"type": "string"
 		},

diff --git a/packages/block-library/src/file/edit.js b/packages/block-library/src/file/edit.js
@@ -23,7 +23,7 @@ import {
 	store as blockEditorStore,
 	__experimentalGetElementClassName,
 } from '@wordpress/block-editor';
-import { useEffect } from '@wordpress/element';
+import { useEffect, useState } from '@wordpress/element';
 import { useCopyToClipboard } from '@wordpress/compose';
 import { __, _x } from '@wordpress/i18n';
 import { file as icon } from '@wordpress/icons';
@@ -73,6 +73,7 @@ function FileEdit( { attributes, isSelected, setAttributes, clientId } ) {
 		displayPreview,
 		previewHeight,
 	} = attributes;
+	const [ temporaryURL, setTemporaryURL ] = useState( attributes.blob );
 	const { media } = useSelect(
 		( select ) => ( {
 			media:
@@ -88,7 +89,7 @@ function FileEdit( { attributes, isSelected, setAttributes, clientId } ) {
 		useDispatch( blockEditorStore );
 
 	useUploadMediaFromBlobURL( {
-		url: href,
+		url: temporaryURL,
 		onChange: onSelectFile,
 		onError: onUploadError,
 	} );
@@ -108,6 +109,12 @@ function FileEdit( { attributes, isSelected, setAttributes, clientId } ) {
 
 	function onSelectFile( newMedia ) {
 		if ( ! newMedia || ! newMedia.url ) {
+			setTemporaryURL();
+			return;
+		}
+
+		if ( isBlobURL( newMedia.url ) ) {
+			setTemporaryURL( newMedia.url );
 			return;
 		}
 
@@ -120,7 +127,9 @@ function FileEdit( { attributes, isSelected, setAttributes, clientId } ) {
 			displayPreview: isPdf ? true : undefined,
 			previewHeight: isPdf ? 600 : undefined,
 			fileId: `wp-block-file--media-${ clientId }`,
+			blob: undefined,
 		} );
+		setTemporaryURL();
 	}
 
 	function onUploadError( message ) {
@@ -166,16 +175,16 @@ function FileEdit( { attributes, isSelected, setAttributes, clientId } ) {
 
 	const blockProps = useBlockProps( {
 		className: clsx(
-			isBlobURL( href ) && getAnimateClassName( { type: 'loading' } ),
+			!! temporaryURL && getAnimateClassName( { type: 'loading' } ),
 			{
-				'is-transient': isBlobURL( href ),
+				'is-transient': !! temporaryURL,
 			}
 		),
 	} );
 
 	const displayPreviewInEditor = browserSupportsPdfs() && displayPreview;
 
-	if ( ! href ) {
+	if ( ! href && ! temporaryURL ) {
 		return (
 			<div { ...blockProps }>
 				<MediaPlaceholder
@@ -197,7 +206,11 @@ function FileEdit( { attributes, isSelected, setAttributes, clientId } ) {
 	return (
 		<>
 			<FileBlockInspector
-				hrefs={ { href, textLinkHref, attachmentPage } }
+				hrefs={ {
+					href: href || temporaryURL,
+					textLinkHref,
+					attachmentPage,
+				} }
 				{ ...{
 					openInNewWindow: !! textLinkTarget,
 					showDownloadButton,

diff --git a/packages/block-library/src/file/transforms.js b/packages/block-library/src/file/transforms.js
@@ -26,9 +26,8 @@ const transforms = {
 					// File will be uploaded in componentDidMount()
 					blocks.push(
 						createBlock( 'core/file', {
-							href: blobURL,
+							blob: blobURL,
 							fileName: file.name,
-							textLinkHref: blobURL,
 						} )
 					);
 				} );