Video: Add border block support

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"
 }

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 (
 			<Placeholder
-				className="block-editor-media-placeholder"
+				className={ clsx( 'block-editor-media-placeholder', {
+					[ borderProps.className ]:
+						!! borderProps.className && ! isSingleSelected,
+				} ) }
 				withIllustration={ ! isSingleSelected }
 				icon={ icon }
 				label={ __( 'Video' ) }
 				instructions={ __(
 					'Upload a video file, pick one from your media library, or add one with a URL.'
 				) }
+				style={ ! isSingleSelected ? borderProps.style : {} }
 			>
 				{ content }
 			</Placeholder>
@@ -280,9 +286,11 @@ function VideoEdit( {
             */ }
 				<Disabled isDisabled={ ! isSingleSelected }>
 					<video
+						className={ borderProps.className }
 						controls={ controls }
 						poster={ poster }
 						src={ src || temporaryURL }
+						style={ borderProps.style }
 						ref={ videoPlayer }
 					>
 						<Tracks tracks={ tracks } />

packages/block-library/src/video/editor.scss

@@ -1,3 +1,10 @@
+.wp-block-video.wp-block-video {
+	// Hide border style on-select, when placeholder is visible.
+	&.is-selected .components-placeholder {
+		border: none;
+	}
+}
+
 .wp-block[data-align="center"] > .wp-block-video {
 	text-align: center;
 }

packages/block-library/src/video/save.js

@@ -5,6 +5,7 @@ import {
 	RichText,
 	useBlockProps,
 	__experimentalGetElementClassName,
+	__experimentalGetBorderClassesAndStyles as getBorderClassesAndStyles,
 } from '@wordpress/block-editor';
 
 /**
@@ -25,6 +26,9 @@ export default function save( { attributes } ) {
 		playsInline,
 		tracks,
 	} = attributes;
+
+	const borderProps = getBorderClassesAndStyles( attributes );
+
 	return (
 		<figure { ...useBlockProps.save() }>
 			{ src && (
@@ -37,6 +41,8 @@ export default function save( { attributes } ) {
 					preload={ preload !== 'metadata' ? preload : undefined }
 					src={ src }
 					playsInline={ playsInline }
+					className={ borderProps.className }
+					style={ borderProps.style }
 				>
 					<Tracks tracks={ tracks } />
 				</video>

packages/block-library/src/video/style.scss

@@ -4,6 +4,8 @@
 	video {
 		width: 100%;
 		vertical-align: middle;
+		// Video tag has customizable border, border-box makes that more predictable.
+		box-sizing: border-box;
 	}
 
 	@supports (position: sticky) {