diff --git a/docs/reference-guides/core-blocks.md b/docs/reference-guides/core-blocks.md index 71753c7e2ed87..4bfe230f6df03 100644 --- 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 index fd5da67d284f4..a5dbaae0c1025 100644 --- 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 index 42bb5fd7cf684..448b6f5ec73d1 100644 --- 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 (