From 10158173e3b30d6daf60b4dda02f2acf0f200b5a Mon Sep 17 00:00:00 2001
From: akasunil <sdprajapati999@gmail.com>
Date: Sun, 21 Jul 2024 16:12:37 +0530
Subject: [PATCH 01/13] Add border support to video block

---
 packages/block-library/src/video/block.json | 12 ++++++++++++
 1 file changed, 12 insertions(+)

diff --git a/packages/block-library/src/video/block.json b/packages/block-library/src/video/block.json
index 1d3dc75961e8f1..99eec2949f2de4 100644
--- a/packages/block-library/src/video/block.json
+++ b/packages/block-library/src/video/block.json
@@ -95,6 +95,18 @@
 		},
 		"interactivity": {
 			"clientNavigation": true
+		},
+		"__experimentalBorder": {
+			"radius": true,
+			"color": true,
+			"width": true,
+			"style": true,
+			"__experimentalDefaultControls": {
+				"radius": true,
+				"color": true,
+				"width": true,
+				"style": true
+			}
 		}
 	},
 	"editorStyle": "wp-block-video-editor",

From ca2d2ef23b1a40a18ef36375da0bb4b42915c301 Mon Sep 17 00:00:00 2001
From: akasunil <sdprajapati999@gmail.com>
Date: Sun, 11 Aug 2024 21:19:20 +0530
Subject: [PATCH 02/13] Skip serialisation of border styles and add selectors

---
 packages/block-library/src/video/block.json | 10 ++++------
 1 file changed, 4 insertions(+), 6 deletions(-)

diff --git a/packages/block-library/src/video/block.json b/packages/block-library/src/video/block.json
index 99eec2949f2de4..5e29e9695117eb 100644
--- a/packages/block-library/src/video/block.json
+++ b/packages/block-library/src/video/block.json
@@ -101,14 +101,12 @@
 			"color": true,
 			"width": true,
 			"style": true,
-			"__experimentalDefaultControls": {
-				"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"
 }

From b1d5c63a4f917fcc98d9064f79b05f455dabee94 Mon Sep 17 00:00:00 2001
From: akasunil <sdprajapati999@gmail.com>
Date: Sun, 11 Aug 2024 21:20:46 +0530
Subject: [PATCH 03/13] Implement border style on video tag in edit component

---
 packages/block-library/src/video/edit.js | 43 ++++++++++++++----------
 1 file changed, 26 insertions(+), 17 deletions(-)

diff --git a/packages/block-library/src/video/edit.js b/packages/block-library/src/video/edit.js
index 97a6e148d5d069..f55e14b8147191 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';
@@ -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,26 @@ function VideoEdit( {
 		className: classes,
 	} );
 
+	// 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.'
+				) }
+				style={ {
+					...borderProps.style,
+				} }
+			>
+				{ content }
+			</Placeholder>
+		);
+	};
+
 	if ( ! src && ! temporaryURL ) {
 		return (
 			<div { ...blockProps }>
@@ -277,9 +282,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 } />

From 81f4dd0a4484dc229e5dbaf41dd9daf882037571 Mon Sep 17 00:00:00 2001
From: akasunil <sdprajapati999@gmail.com>
Date: Sun, 11 Aug 2024 21:21:31 +0530
Subject: [PATCH 04/13] Add border styles to save component

---
 packages/block-library/src/video/save.js | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/packages/block-library/src/video/save.js b/packages/block-library/src/video/save.js
index 834ba3e84ac867..8877e358682aee 100644
--- a/packages/block-library/src/video/save.js
+++ b/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,10 @@ export default function save( { attributes } ) {
 					preload={ preload !== 'metadata' ? preload : undefined }
 					src={ src }
 					playsInline={ playsInline }
+					className={ borderProps.className }
+					style={ {
+						...borderProps.style,
+					} }
 				>
 					<Tracks tracks={ tracks } />
 				</video>

From cc02c4c1a5d1376389bcf0fe13d452ea6013d79f Mon Sep 17 00:00:00 2001
From: akasunil <sdprajapati999@gmail.com>
Date: Sun, 11 Aug 2024 21:23:10 +0530
Subject: [PATCH 05/13] Set box sizing css for video tag in video block

---
 packages/block-library/src/video/style.scss | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/packages/block-library/src/video/style.scss b/packages/block-library/src/video/style.scss
index 06c0dfd9cdd469..f0ba0fd670f5ea 100644
--- a/packages/block-library/src/video/style.scss
+++ b/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) {

From 35e4b0af862c8e14c587b936d744fe1aa8a0f955 Mon Sep 17 00:00:00 2001
From: akasunil <sdprajapati999@gmail.com>
Date: Sun, 11 Aug 2024 22:06:07 +0530
Subject: [PATCH 06/13] Add border support's classes to video placeholder

---
 packages/block-library/src/video/edit.js | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/packages/block-library/src/video/edit.js b/packages/block-library/src/video/edit.js
index f55e14b8147191..7510c86e74f6e9 100644
--- a/packages/block-library/src/video/edit.js
+++ b/packages/block-library/src/video/edit.js
@@ -146,7 +146,10 @@ function VideoEdit( {
 	const placeholder = ( content ) => {
 		return (
 			<Placeholder
-				className="block-editor-media-placeholder"
+				className={ clsx( 'block-editor-media-placeholder', {
+					[ borderProps.className ]:
+						!! borderProps.className && ! isSingleSelected,
+				} ) }
 				withIllustration
 				icon={ icon }
 				label={ __( 'Video' ) }

From 9e872072e02d00670d73994442454095e9cd1b84 Mon Sep 17 00:00:00 2001
From: akasunil <sdprajapati999@gmail.com>
Date: Mon, 12 Aug 2024 14:24:52 +0530
Subject: [PATCH 07/13] Remove unneccessory destructure of border styles object

---
 packages/block-library/src/video/save.js | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/packages/block-library/src/video/save.js b/packages/block-library/src/video/save.js
index 8877e358682aee..95431c8b27ddcb 100644
--- a/packages/block-library/src/video/save.js
+++ b/packages/block-library/src/video/save.js
@@ -42,9 +42,7 @@ export default function save( { attributes } ) {
 					src={ src }
 					playsInline={ playsInline }
 					className={ borderProps.className }
-					style={ {
-						...borderProps.style,
-					} }
+					style={ borderProps.style }
 				>
 					<Tracks tracks={ tracks } />
 				</video>

From 1ba0c3ab53f37a00ada501d1479a1e94ee0ce878 Mon Sep 17 00:00:00 2001
From: akasunil <sdprajapati999@gmail.com>
Date: Mon, 26 Aug 2024 15:01:58 +0530
Subject: [PATCH 08/13] Show illustration on video block selection

---
 packages/block-library/src/video/edit.js | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/packages/block-library/src/video/edit.js b/packages/block-library/src/video/edit.js
index 7510c86e74f6e9..1c7e960e746c12 100644
--- a/packages/block-library/src/video/edit.js
+++ b/packages/block-library/src/video/edit.js
@@ -150,15 +150,13 @@ function VideoEdit( {
 					[ borderProps.className ]:
 						!! borderProps.className && ! isSingleSelected,
 				} ) }
-				withIllustration
+				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,
-				} }
+				style={ borderProps.style }
 			>
 				{ content }
 			</Placeholder>

From f266811590291034d12a5a5b0140a15f1c5f0108 Mon Sep 17 00:00:00 2001
From: akasunil <sdprajapati999@gmail.com>
Date: Mon, 26 Aug 2024 15:02:35 +0530
Subject: [PATCH 09/13] Remove placeholder illustration css which is
 unneccessory

---
 packages/block-library/src/video/editor.scss | 23 --------------------
 1 file changed, 23 deletions(-)

diff --git a/packages/block-library/src/video/editor.scss b/packages/block-library/src/video/editor.scss
index 792939356b1de9..68d2cf2c217b01 100644
--- a/packages/block-library/src/video/editor.scss
+++ b/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

From 6b2ce5a967afe5760612085d7793c7bcb8f1ea5c Mon Sep 17 00:00:00 2001
From: akasunil <sdprajapati999@gmail.com>
Date: Mon, 26 Aug 2024 15:10:15 +0530
Subject: [PATCH 10/13] Remove unneccessory destructure of border styles object

---
 packages/block-library/src/video/edit.js     | 4 +---
 packages/block-library/src/video/editor.scss | 4 ++++
 2 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/packages/block-library/src/video/edit.js b/packages/block-library/src/video/edit.js
index 524d2a6d44727b..324d57edb39dd8 100644
--- a/packages/block-library/src/video/edit.js
+++ b/packages/block-library/src/video/edit.js
@@ -287,9 +287,7 @@ function VideoEdit( {
 						controls={ controls }
 						poster={ poster }
 						src={ src || temporaryURL }
-						style={ {
-							...borderProps.style,
-						} }
+						style={ borderProps.style }
 						ref={ videoPlayer }
 					>
 						<Tracks tracks={ tracks } />
diff --git a/packages/block-library/src/video/editor.scss b/packages/block-library/src/video/editor.scss
index 68d2cf2c217b01..a4e496352e3419 100644
--- a/packages/block-library/src/video/editor.scss
+++ b/packages/block-library/src/video/editor.scss
@@ -1,6 +1,10 @@
 // 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 {
+		border: none;
+	}
 
 	// Remove the transition while we still have a legacy placeholder style.
 	// Otherwise the content jumps between the 1px placeholder border, and any inherited custom

From 10305af0705a8d424dee87967999ed7276cff370 Mon Sep 17 00:00:00 2001
From: akasunil <sdprajapati999@gmail.com>
Date: Mon, 26 Aug 2024 15:23:12 +0530
Subject: [PATCH 11/13] Update styles comment

---
 packages/block-library/src/video/editor.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/block-library/src/video/editor.scss b/packages/block-library/src/video/editor.scss
index a4e496352e3419..c90bc8d43fb0bc 100644
--- a/packages/block-library/src/video/editor.scss
+++ b/packages/block-library/src/video/editor.scss
@@ -1,7 +1,7 @@
 // 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.
+	// Hide border style on-select, when placeholder is visible.
 	&.is-selected .components-placeholder {
 		border: none;
 	}

From 2128bb774543ad21f42ea71a7b6adb76089328c5 Mon Sep 17 00:00:00 2001
From: akasunil <sdprajapati999@gmail.com>
Date: Wed, 28 Aug 2024 19:43:50 +0530
Subject: [PATCH 12/13] Add border style on block unselect

---
 packages/block-library/src/video/edit.js | 27 +++++-------------------
 1 file changed, 5 insertions(+), 22 deletions(-)

diff --git a/packages/block-library/src/video/edit.js b/packages/block-library/src/video/edit.js
index 80f66f39ea3cc5..8240cb0c551150 100644
--- a/packages/block-library/src/video/edit.js
+++ b/packages/block-library/src/video/edit.js
@@ -138,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>
@@ -159,27 +163,6 @@ 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 }>

From 74d69066f6677edfdfc860760d46bdba4600317f Mon Sep 17 00:00:00 2001
From: akasunil <sdprajapati999@gmail.com>
Date: Fri, 13 Sep 2024 14:18:00 +0530
Subject: [PATCH 13/13] Remove unneccessory destructure of border styles object

---
 packages/block-library/src/video/edit.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/block-library/src/video/edit.js b/packages/block-library/src/video/edit.js
index 47aa03dc56a24e..fe77d061beaf53 100644
--- a/packages/block-library/src/video/edit.js
+++ b/packages/block-library/src/video/edit.js
@@ -148,7 +148,7 @@ function VideoEdit( {
 				instructions={ __(
 					'Upload a video file, pick one from your media library, or add one with a URL.'
 				) }
-				style={ ! isSingleSelected ? { ...borderProps.style } : {} }
+				style={ ! isSingleSelected ? borderProps.style : {} }
 			>
 				{ content }
 			</Placeholder>