Use block meta to store file block's image blob

WordPress · Mar 28, 2023 · 61ad707 · 61ad707
1 parent 80aca27
commit 61ad707
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 21 deletions.
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';
@@ -59,7 +59,7 @@ function ClipboardToolbarButton( { text, disabled } ) {
 	);
 }
 
-function FileEdit( { attributes, isSelected, setAttributes, clientId } ) {
+function FileEdit( { attributes, isSelected, setAttributes, clientId, meta } ) {
 	const {
 		id,
 		fileId,
@@ -72,6 +72,9 @@ function FileEdit( { attributes, isSelected, setAttributes, clientId } ) {
 		displayPreview,
 		previewHeight,
 	} = attributes;
+
+	const { blobURL } = meta;
+
 	const { media, mediaUpload } = useSelect(
 		( select ) => ( {
 			media:
@@ -87,22 +90,27 @@ function FileEdit( { attributes, isSelected, setAttributes, clientId } ) {
 	const { toggleSelection, __unstableMarkNextChangeAsNotPersistent } =
 		useDispatch( blockEditorStore );
 
+	const [ isUploadingBlob, setIsUploadingBlob ] = useState( false );
+
 	useEffect( () => {
 		// Upload a file drag-and-dropped into the editor.
-		if ( isBlobURL( href ) ) {
-			const file = getBlobByURL( href );
+		const file = getBlobByURL( blobURL );
+		if ( file ) {
+			setIsUploadingBlob( true );
 
 			mediaUpload( {
 				filesList: [ file ],
-				onFileChange: ( [ newMedia ] ) => onSelectFile( newMedia ),
-				onError: onUploadError,
+				onFileChange: ( [ newMedia ] ) => {
+					onSelectFile( newMedia, { isPersistent: false } );
+					setIsUploadingBlob( false );
+				},
+				onError: ( message ) => {
+					onUploadError( message, { isPersistent: false } );
+					setIsUploadingBlob( false );
+				},
 			} );
 
-			revokeBlobURL( href );
-		}
-
-		if ( downloadButtonText === undefined ) {
-			changeDownloadButtonText( _x( 'Download', 'button label' ) );
+			revokeBlobURL( blobURL );
 		}
 	}, [] );
 
@@ -114,9 +122,12 @@ function FileEdit( { attributes, isSelected, setAttributes, clientId } ) {
 		}
 	}, [ href, fileId, clientId ] );
 
-	function onSelectFile( newMedia ) {
-		if ( newMedia && newMedia.url ) {
+	function onSelectFile( newMedia, { isPersistent = true } = {} ) {
+		if ( newMedia && newMedia.url && ! isBlobURL( newMedia.url ) ) {
 			const isPdf = newMedia.url.endsWith( '.pdf' );
+			if ( ! isPersistent ) {
+				__unstableMarkNextChangeAsNotPersistent();
+			}
 			setAttributes( {
 				href: newMedia.url,
 				fileName: newMedia.title,
@@ -178,9 +189,9 @@ function FileEdit( { attributes, isSelected, setAttributes, clientId } ) {
 
 	const blockProps = useBlockProps( {
 		className: classnames(
-			isBlobURL( href ) && getAnimateClassName( { type: 'loading' } ),
+			isUploadingBlob && getAnimateClassName( { type: 'loading' } ),
 			{
-				'is-transient': isBlobURL( href ),
+				'is-transient': isUploadingBlob,
 			}
 		),
 	} );
@@ -232,7 +243,7 @@ function FileEdit( { attributes, isSelected, setAttributes, clientId } ) {
 				/>
 				<ClipboardToolbarButton
 					text={ href }
-					disabled={ isBlobURL( href ) }
+					disabled={ isUploadingBlob }
 				/>
 			</BlockControls>
 			<div { ...blockProps }>
@@ -297,7 +308,10 @@ function FileEdit( { attributes, isSelected, setAttributes, clientId } ) {
 										'button'
 									)
 								) }
-								value={ downloadButtonText }
+								value={
+									downloadButtonText ??
+									_x( 'Download', 'button label' )
+								}
 								withoutInteractiveFormatting
 								placeholder={ __( 'Add text…' ) }
 								onChange={ ( text ) =>

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