diff --git a/docs/reference-guides/core-blocks.md b/docs/reference-guides/core-blocks.md index 001c7cff625807..d81a46cd727a17 100644 --- a/docs/reference-guides/core-blocks.md +++ b/docs/reference-guides/core-blocks.md @@ -958,6 +958,6 @@ Embed a video from your media library or upload a new one. ([Source](https://git - **Name:** core/video - **Category:** media - **Supports:** align, anchor, interactivity (clientNavigation), spacing (margin, padding) -- **Attributes:** autoplay, caption, controls, id, loop, muted, playsInline, poster, preload, src, tracks +- **Attributes:** autoplay, blob, caption, controls, id, loop, muted, playsInline, poster, preload, src, tracks diff --git a/packages/block-library/src/video/block.json b/packages/block-library/src/video/block.json index 2bc153bc1c6165..1d3dc75961e8f1 100644 --- a/packages/block-library/src/video/block.json +++ b/packages/block-library/src/video/block.json @@ -56,6 +56,10 @@ "attribute": "preload", "default": "metadata" }, + "blob": { + "type": "string", + "__experimentalRole": "local" + }, "src": { "type": "string", "source": "attribute", diff --git a/packages/block-library/src/video/edit.js b/packages/block-library/src/video/edit.js index f7d535667f2bfd..97a6e148d5d069 100644 --- a/packages/block-library/src/video/edit.js +++ b/packages/block-library/src/video/edit.js @@ -25,7 +25,7 @@ import { MediaReplaceFlow, useBlockProps, } from '@wordpress/block-editor'; -import { useRef, useEffect } from '@wordpress/element'; +import { useRef, useEffect, useState } from '@wordpress/element'; import { __, sprintf } from '@wordpress/i18n'; import { useInstanceId } from '@wordpress/compose'; import { useDispatch } from '@wordpress/data'; @@ -74,10 +74,10 @@ function VideoEdit( { const videoPlayer = useRef(); const posterImageButton = useRef(); const { id, controls, poster, src, tracks } = attributes; - const isTemporaryVideo = ! id && isBlobURL( src ); + const [ temporaryURL, setTemporaryURL ] = useState( attributes.blob ); useUploadMediaFromBlobURL( { - url: src, + url: temporaryURL, allowedTypes: ALLOWED_MEDIA_TYPES, onChange: onSelectVideo, onError: onUploadError, @@ -100,19 +100,28 @@ function VideoEdit( { id: undefined, poster: 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. setAttributes( { + blob: undefined, src: media.url, id: media.id, poster: media.image?.src !== media.icon ? media.image?.src : undefined, caption: media.caption, } ); + setTemporaryURL(); } function onSelectURL( newSrc ) { @@ -125,7 +134,13 @@ function VideoEdit( { onReplace( embedBlock ); return; } - setAttributes( { src: newSrc, id: undefined, poster: undefined } ); + setAttributes( { + blob: undefined, + src: newSrc, + id: undefined, + poster: undefined, + } ); + setTemporaryURL(); } } @@ -135,14 +150,14 @@ function VideoEdit( { } const classes = clsx( className, { - 'is-transient': isTemporaryVideo, + 'is-transient': !! temporaryURL, } ); const blockProps = useBlockProps( { className: classes, } ); - if ( ! src ) { + if ( ! src && ! temporaryURL ) { return (
- { isTemporaryVideo && } + { !! temporaryURL && }