diff --git a/docs/reference-guides/core-blocks.md b/docs/reference-guides/core-blocks.md index d81a46cd727a17..71753c7e2ed871 100644 --- a/docs/reference-guides/core-blocks.md +++ b/docs/reference-guides/core-blocks.md @@ -24,7 +24,7 @@ Embed a simple audio player. ([Source](https://github.com/WordPress/gutenberg/tr - **Name:** core/audio - **Category:** media - **Supports:** align, anchor, interactivity (clientNavigation), spacing (margin, padding) -- **Attributes:** autoplay, caption, id, loop, preload, src +- **Attributes:** autoplay, blob, caption, id, loop, preload, src ## Avatar diff --git a/packages/block-library/src/audio/block.json b/packages/block-library/src/audio/block.json index 14b44704fb7e8f..bee2ff6d534a70 100644 --- a/packages/block-library/src/audio/block.json +++ b/packages/block-library/src/audio/block.json @@ -8,6 +8,10 @@ "keywords": [ "music", "sound", "podcast", "recording" ], "textdomain": "default", "attributes": { + "blob": { + "type": "string", + "__experimentalRole": "local" + }, "src": { "type": "string", "source": "attribute", diff --git a/packages/block-library/src/audio/edit.js b/packages/block-library/src/audio/edit.js index 0db2552b8ac264..97d3c9c5a1ae3f 100644 --- a/packages/block-library/src/audio/edit.js +++ b/packages/block-library/src/audio/edit.js @@ -26,6 +26,7 @@ import { __, _x } from '@wordpress/i18n'; import { useDispatch } from '@wordpress/data'; import { audio as icon } from '@wordpress/icons'; import { store as noticesStore } from '@wordpress/notices'; +import { useState } from '@wordpress/element'; /** * Internal dependencies @@ -45,10 +46,10 @@ function AudioEdit( { insertBlocksAfter, } ) { const { id, autoplay, loop, preload, src } = attributes; - const isTemporaryAudio = ! id && isBlobURL( src ); + const [ temporaryURL, setTemporaryURL ] = useState( attributes.blob ); useUploadMediaFromBlobURL( { - url: src, + url: temporaryURL, allowedTypes: ALLOWED_MEDIA_TYPES, onChange: onSelectAudio, onError: onUploadError, @@ -72,7 +73,8 @@ function AudioEdit( { onReplace( embedBlock ); return; } - setAttributes( { src: newSrc, id: undefined } ); + setAttributes( { src: newSrc, id: undefined, blob: undefined } ); + setTemporaryURL(); } } @@ -95,27 +97,37 @@ function AudioEdit( { src: undefined, id: undefined, caption: undefined, + blob: undefined, } ); + setTemporaryURL(); return; } + + if ( isBlobURL( media.url ) ) { + setTemporaryURL( media.url ); + return; + } + // Sets the block's attribute and updates the edit component from the // selected media, then switches off the editing UI. setAttributes( { + blob: undefined, src: media.url, id: media.id, caption: media.caption, } ); + setTemporaryURL(); } const classes = clsx( className, { - 'is-transient': isTemporaryAudio, + 'is-transient': !! temporaryURL, } ); const blockProps = useBlockProps( { className: classes, } ); - if ( ! src ) { + if ( ! src && ! temporaryURL ) { return (