diff --git a/packages/block-library/src/video/block.json b/packages/block-library/src/video/block.json index d2dcd95365c3b..a36263885bed7 100644 --- a/packages/block-library/src/video/block.json +++ b/packages/block-library/src/video/block.json @@ -95,8 +95,18 @@ }, "interactivity": { "clientNavigation": true + }, + "__experimentalBorder": { + "radius": true, + "color": true, + "width": true, + "style": true, + "__experimentalSkipSerialization": true } }, + "selectors": { + "border": ".wp-block-video video, .wp-block-video .components-placeholder" + }, "editorStyle": "wp-block-video-editor", "style": "wp-block-video" } diff --git a/packages/block-library/src/video/edit.js b/packages/block-library/src/video/edit.js index ba6b4c869aefc..fe77d061beaf5 100644 --- a/packages/block-library/src/video/edit.js +++ b/packages/block-library/src/video/edit.js @@ -24,6 +24,7 @@ import { MediaUploadCheck, MediaReplaceFlow, useBlockProps, + __experimentalUseBorderProps as useBorderProps, } from '@wordpress/block-editor'; import { useRef, useEffect, useState } from '@wordpress/element'; import { __, sprintf } from '@wordpress/i18n'; @@ -58,6 +59,7 @@ function VideoEdit( { const posterImageButton = useRef(); const { id, controls, poster, src, tracks } = attributes; const [ temporaryURL, setTemporaryURL ] = useState( attributes.blob ); + const borderProps = useBorderProps( attributes ); useUploadMediaFromBlobURL( { url: temporaryURL, @@ -136,13 +138,17 @@ function VideoEdit( { const placeholder = ( content ) => { return ( { content } @@ -280,9 +286,11 @@ function VideoEdit( { */ }