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';
@@ -42,23 +43,6 @@ import TracksEditor from './tracks-editor';
 import Tracks from './tracks';
 import { Caption } from '../utils/caption';
 
-// Much of this description is duplicated from MediaPlaceholder.
-const placeholder = ( content ) => {
-	return (
-		<Placeholder
-			className="block-editor-media-placeholder"
-			withIllustration
-			icon={ icon }
-			label={ __( 'Video' ) }
-			instructions={ __(
-				'Upload a video file, pick one from your media library, or add one with a URL.'
-			) }
-		>
-			{ content }
-		</Placeholder>
-	);
-};
-
 const ALLOWED_MEDIA_TYPES = [ 'video' ];
 const VIDEO_POSTER_ALLOWED_MEDIA_TYPES = [ 'image' ];
 
@@ -75,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,
@@ -157,6 +142,27 @@ function VideoEdit( {
 		className: classes,
 	} );
 
+	// Much of this description is duplicated from MediaPlaceholder.
+	const placeholder = ( content ) => {
+		return (
+			<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={ borderProps.style }
+			>
+				{ content }
+			</Placeholder>
+		);
+	};
+
 	if ( ! src && ! temporaryURL ) {
 		return (
 			<div { ...blockProps }>
@@ -277,9 +283,13 @@ 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,29 +1,6 @@
 // Provide special styling for the placeholder.
 // @todo this particular minimal style of placeholder could be componentized further.
 .wp-block-video.wp-block-video {
-	// Show Placeholder style on-select.
-	&.is-selected .components-placeholder {
-		// Block UI appearance.
-		color: $gray-900;
-		background-color: $white;
-		box-shadow: inset 0 0 0 $border-width $gray-900;
-		border: none;
-
-		// @todo this should eventually be overridden by a custom border-radius set in the inspector.
-		border-radius: $radius-block-ui;
-
-		> svg {
-			opacity: 0;
-		}
-
-		.components-placeholder__illustration {
-			display: none;
-		}
-
-		&::before {
-			opacity: 0;
-		}
-	}
 
 	// Remove the transition while we still have a legacy placeholder style.
 	// Otherwise the content jumps between the 1px placeholder border, and any inherited custom

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) {