From 7c97a35d771e7d573d51c7618c0dfa9bc91373eb Mon Sep 17 00:00:00 2001
From: Utsav Patel <utsav.patel1512@outlook.com>
Date: Sat, 16 Nov 2024 00:06:11 +0530
Subject: [PATCH 1/3] chore: convert video panelbody to toolspanel

---
 .../src/video/edit-common-settings.js         | 136 +++++++++++++-----
 packages/block-library/src/video/edit.js      |  98 ++++---------
 .../block-library/src/video/poster-image.js   |  83 +++++++++++
 3 files changed, 211 insertions(+), 106 deletions(-)
 create mode 100644 packages/block-library/src/video/poster-image.js

diff --git a/packages/block-library/src/video/edit-common-settings.js b/packages/block-library/src/video/edit-common-settings.js
index 9394bfaf5c6145..d41c0c45937f5e 100644
--- a/packages/block-library/src/video/edit-common-settings.js
+++ b/packages/block-library/src/video/edit-common-settings.js
@@ -2,7 +2,11 @@
  * WordPress dependencies
  */
 import { __, _x } from '@wordpress/i18n';
-import { ToggleControl, SelectControl } from '@wordpress/components';
+import {
+	ToggleControl,
+	SelectControl,
+	__experimentalToolsPanelItem as ToolsPanelItem,
+} from '@wordpress/components';
 import { useMemo, useCallback, Platform } from '@wordpress/element';
 
 const options = [
@@ -47,50 +51,104 @@ const VideoSettings = ( { setAttributes, attributes } ) => {
 
 	return (
 		<>
-			<ToggleControl
-				__nextHasNoMarginBottom
+			<ToolsPanelItem
 				label={ __( 'Autoplay' ) }
-				onChange={ toggleFactory.autoplay }
-				checked={ !! autoplay }
-				help={ getAutoplayHelp }
-			/>
-			<ToggleControl
-				__nextHasNoMarginBottom
+				isShownByDefault
+				hasValue={ () => !! autoplay }
+				onDeselect={ () => {
+					setAttributes( { autoplay: false } );
+				} }
+			>
+				<ToggleControl
+					__nextHasNoMarginBottom
+					label={ __( 'Autoplay' ) }
+					onChange={ toggleFactory.autoplay }
+					checked={ !! autoplay }
+					help={ getAutoplayHelp }
+				/>
+			</ToolsPanelItem>
+			<ToolsPanelItem
 				label={ __( 'Loop' ) }
-				onChange={ toggleFactory.loop }
-				checked={ !! loop }
-			/>
-			<ToggleControl
-				__nextHasNoMarginBottom
+				isShownByDefault
+				hasValue={ () => !! loop }
+				onDeselect={ () => {
+					setAttributes( { loop: false } );
+				} }
+			>
+				<ToggleControl
+					__nextHasNoMarginBottom
+					label={ __( 'Loop' ) }
+					onChange={ toggleFactory.loop }
+					checked={ !! loop }
+				/>
+			</ToolsPanelItem>
+			<ToolsPanelItem
 				label={ __( 'Muted' ) }
-				onChange={ toggleFactory.muted }
-				checked={ !! muted }
-			/>
-			<ToggleControl
-				__nextHasNoMarginBottom
+				isShownByDefault
+				hasValue={ () => !! muted }
+				onDeselect={ () => {
+					setAttributes( { muted: false } );
+				} }
+			>
+				<ToggleControl
+					__nextHasNoMarginBottom
+					label={ __( 'Muted' ) }
+					onChange={ toggleFactory.muted }
+					checked={ !! muted }
+				/>
+			</ToolsPanelItem>
+			<ToolsPanelItem
 				label={ __( 'Playback controls' ) }
-				onChange={ toggleFactory.controls }
-				checked={ !! controls }
-			/>
-			<ToggleControl
-				__nextHasNoMarginBottom
-				/* translators: Setting to play videos within the webpage on mobile browsers rather than opening in a fullscreen player. */
+				isShownByDefault
+				hasValue={ () => !! controls }
+				onDeselect={ () => {
+					setAttributes( { controls: false } );
+				} }
+			>
+				<ToggleControl
+					__nextHasNoMarginBottom
+					label={ __( 'Playback controls' ) }
+					onChange={ toggleFactory.controls }
+					checked={ !! controls }
+				/>
+			</ToolsPanelItem>
+			<ToolsPanelItem
 				label={ __( 'Play inline' ) }
-				onChange={ toggleFactory.playsInline }
-				checked={ !! playsInline }
-				help={ __(
-					'When enabled, videos will play directly within the webpage on mobile browsers, instead of opening in a fullscreen player.'
-				) }
-			/>
-			<SelectControl
-				__next40pxDefaultSize
-				__nextHasNoMarginBottom
+				isShownByDefault
+				hasValue={ () => !! playsInline }
+				onDeselect={ () => {
+					setAttributes( { playsInline: false } );
+				} }
+			>
+				<ToggleControl
+					__nextHasNoMarginBottom
+					/* translators: Setting to play videos within the webpage on mobile browsers rather than opening in a fullscreen player. */
+					label={ __( 'Play inline' ) }
+					onChange={ toggleFactory.playsInline }
+					checked={ playsInline }
+					help={ __(
+						'When enabled, videos will play directly within the webpage on mobile browsers, instead of opening in a fullscreen player.'
+					) }
+				/>
+			</ToolsPanelItem>
+			<ToolsPanelItem
 				label={ __( 'Preload' ) }
-				value={ preload }
-				onChange={ onChangePreload }
-				options={ options }
-				hideCancelButton
-			/>
+				isShownByDefault
+				hasValue={ () => preload !== 'metadata' }
+				onDeselect={ () => {
+					setAttributes( { preload: 'metadata' } );
+				} }
+			>
+				<SelectControl
+					__next40pxDefaultSize
+					__nextHasNoMarginBottom
+					label={ __( 'Preload' ) }
+					value={ preload }
+					onChange={ onChangePreload }
+					options={ options }
+					hideCancelButton
+				/>
+			</ToolsPanelItem>
 		</>
 	);
 };
diff --git a/packages/block-library/src/video/edit.js b/packages/block-library/src/video/edit.js
index 32221919c7ea20..64b22726687804 100644
--- a/packages/block-library/src/video/edit.js
+++ b/packages/block-library/src/video/edit.js
@@ -8,25 +8,21 @@ import clsx from 'clsx';
  */
 import { isBlobURL } from '@wordpress/blob';
 import {
-	BaseControl,
-	Button,
 	Disabled,
-	PanelBody,
 	Spinner,
 	Placeholder,
+	__experimentalToolsPanel as ToolsPanel,
 } from '@wordpress/components';
 import {
 	BlockControls,
 	BlockIcon,
 	InspectorControls,
 	MediaPlaceholder,
-	MediaUpload,
-	MediaUploadCheck,
 	MediaReplaceFlow,
 	useBlockProps,
 } from '@wordpress/block-editor';
 import { useRef, useEffect, useState } from '@wordpress/element';
-import { __, sprintf } from '@wordpress/i18n';
+import { __ } from '@wordpress/i18n';
 import { useInstanceId } from '@wordpress/compose';
 import { useDispatch } from '@wordpress/data';
 import { video as icon } from '@wordpress/icons';
@@ -35,15 +31,18 @@ import { store as noticesStore } from '@wordpress/notices';
 /**
  * Internal dependencies
  */
+import PosterImage from './poster-image';
 import { createUpgradedEmbedBlock } from '../embed/util';
-import { useUploadMediaFromBlobURL } from '../utils/hooks';
+import {
+	useUploadMediaFromBlobURL,
+	useToolsPanelDropdownMenuProps,
+} from '../utils/hooks';
 import VideoCommonSettings from './edit-common-settings';
 import TracksEditor from './tracks-editor';
 import Tracks from './tracks';
 import { Caption } from '../utils/caption';
 
 const ALLOWED_MEDIA_TYPES = [ 'video' ];
-const VIDEO_POSTER_ALLOWED_MEDIA_TYPES = [ 'image' ];
 
 function VideoEdit( {
 	isSelected: isSingleSelected,
@@ -58,6 +57,7 @@ function VideoEdit( {
 	const posterImageButton = useRef();
 	const { id, controls, poster, src, tracks } = attributes;
 	const [ temporaryURL, setTemporaryURL ] = useState( attributes.blob );
+	const dropdownMenuProps = useToolsPanelDropdownMenuProps();
 
 	useUploadMediaFromBlobURL( {
 		url: temporaryURL,
@@ -174,10 +174,6 @@ function VideoEdit( {
 		);
 	}
 
-	function onSelectPoster( image ) {
-		setAttributes( { poster: image.url } );
-	}
-
 	function onRemovePoster() {
 		setAttributes( { poster: undefined } );
 
@@ -185,8 +181,6 @@ function VideoEdit( {
 		posterImageButton.current.focus();
 	}
 
-	const videoPosterDescription = `video-block__poster-image-description-${ instanceId }`;
-
 	return (
 		<>
 			{ isSingleSelected && (
@@ -214,63 +208,33 @@ function VideoEdit( {
 				</>
 			) }
 			<InspectorControls>
-				<PanelBody title={ __( 'Settings' ) }>
+				<ToolsPanel
+					label={ __( 'Settings' ) }
+					resetAll={ () => {
+						setAttributes( {
+							autoplay: false,
+							controls: false,
+							loop: false,
+							muted: false,
+							playsInline: false,
+							preload: 'metadata',
+							poster: '',
+						} );
+					} }
+					dropdownMenuProps={ dropdownMenuProps }
+				>
 					<VideoCommonSettings
 						setAttributes={ setAttributes }
 						attributes={ attributes }
 					/>
-					<MediaUploadCheck>
-						<div className="editor-video-poster-control">
-							<BaseControl.VisualLabel>
-								{ __( 'Poster image' ) }
-							</BaseControl.VisualLabel>
-							<MediaUpload
-								title={ __( 'Select poster image' ) }
-								onSelect={ onSelectPoster }
-								allowedTypes={
-									VIDEO_POSTER_ALLOWED_MEDIA_TYPES
-								}
-								render={ ( { open } ) => (
-									<Button
-										__next40pxDefaultSize
-										variant="primary"
-										onClick={ open }
-										ref={ posterImageButton }
-										aria-describedby={
-											videoPosterDescription
-										}
-									>
-										{ ! poster
-											? __( 'Select' )
-											: __( 'Replace' ) }
-									</Button>
-								) }
-							/>
-							<p id={ videoPosterDescription } hidden>
-								{ poster
-									? sprintf(
-											/* translators: %s: poster image URL. */
-											__(
-												'The current poster image url is %s'
-											),
-											poster
-									  )
-									: __(
-											'There is no poster image currently selected'
-									  ) }
-							</p>
-							{ !! poster && (
-								<Button
-									__next40pxDefaultSize
-									onClick={ onRemovePoster }
-									variant="tertiary"
-								>
-									{ __( 'Remove' ) }
-								</Button>
-							) }
-						</div>
-					</MediaUploadCheck>
-				</PanelBody>
+					<PosterImage
+						poster={ poster }
+						setAttributes={ setAttributes }
+						posterImageButton={ posterImageButton }
+						onRemovePoster={ onRemovePoster }
+						instanceId={ instanceId }
+					/>
+				</ToolsPanel>
 			</InspectorControls>
 			<figure { ...blockProps }>
 				{ /*
diff --git a/packages/block-library/src/video/poster-image.js b/packages/block-library/src/video/poster-image.js
new file mode 100644
index 00000000000000..7be5255375d0eb
--- /dev/null
+++ b/packages/block-library/src/video/poster-image.js
@@ -0,0 +1,83 @@
+/**
+ * WordPress dependencies
+ */
+import { MediaUpload, MediaUploadCheck } from '@wordpress/block-editor';
+import {
+	Button,
+	BaseControl,
+	__experimentalToolsPanelItem as ToolsPanelItem,
+} from '@wordpress/components';
+import { __, sprintf } from '@wordpress/i18n';
+
+function PosterImage( {
+	poster,
+	setAttributes,
+	posterImageButton,
+	onRemovePoster,
+	instanceId,
+} ) {
+	const VIDEO_POSTER_ALLOWED_MEDIA_TYPES = [ 'image' ];
+
+	const videoPosterDescription = `video-block__poster-image-description-${ instanceId }`;
+
+	function onSelectPoster( image ) {
+		setAttributes( { poster: image.url } );
+	}
+
+	return (
+		<ToolsPanelItem
+			label={ __( 'Poster image' ) }
+			isShownByDefault
+			hasValue={ () => !! poster }
+			onDeselect={ () => {
+				setAttributes( { poster: '' } );
+			} }
+		>
+			<MediaUploadCheck>
+				<div className="editor-video-poster-control">
+					<BaseControl.VisualLabel>
+						{ __( 'Poster image' ) }
+					</BaseControl.VisualLabel>
+					<MediaUpload
+						title={ __( 'Select poster image' ) }
+						onSelect={ onSelectPoster }
+						allowedTypes={ VIDEO_POSTER_ALLOWED_MEDIA_TYPES }
+						render={ ( { open } ) => (
+							<Button
+								__next40pxDefaultSize
+								variant="primary"
+								onClick={ open }
+								ref={ posterImageButton }
+								aria-describedby={ videoPosterDescription }
+							>
+								{ ! poster ? __( 'Select' ) : __( 'Replace' ) }
+							</Button>
+						) }
+					/>
+					<p id={ videoPosterDescription } hidden>
+						{ poster
+							? sprintf(
+									/* translators: %s: poster image URL. */
+									__( 'The current poster image url is %s' ),
+									poster
+							  )
+							: __(
+									'There is no poster image currently selected'
+							  ) }
+					</p>
+					{ !! poster && (
+						<Button
+							__next40pxDefaultSize
+							onClick={ onRemovePoster }
+							variant="tertiary"
+						>
+							{ __( 'Remove' ) }
+						</Button>
+					) }
+				</div>
+			</MediaUploadCheck>
+		</ToolsPanelItem>
+	);
+}
+
+export default PosterImage;

From a631118355eca9059453edd46edfa56120c0793e Mon Sep 17 00:00:00 2001
From: Utsav Patel <utsav.patel1512@outlook.com>
Date: Sat, 16 Nov 2024 00:17:48 +0530
Subject: [PATCH 2/3] chore: move poster methods to its file

---
 packages/block-library/src/video/edit.js        | 10 ----------
 .../block-library/src/video/poster-image.js     | 17 ++++++++++-------
 2 files changed, 10 insertions(+), 17 deletions(-)

diff --git a/packages/block-library/src/video/edit.js b/packages/block-library/src/video/edit.js
index 64b22726687804..1f26f3a4355bfa 100644
--- a/packages/block-library/src/video/edit.js
+++ b/packages/block-library/src/video/edit.js
@@ -54,7 +54,6 @@ function VideoEdit( {
 } ) {
 	const instanceId = useInstanceId( VideoEdit );
 	const videoPlayer = useRef();
-	const posterImageButton = useRef();
 	const { id, controls, poster, src, tracks } = attributes;
 	const [ temporaryURL, setTemporaryURL ] = useState( attributes.blob );
 	const dropdownMenuProps = useToolsPanelDropdownMenuProps();
@@ -174,13 +173,6 @@ function VideoEdit( {
 		);
 	}
 
-	function onRemovePoster() {
-		setAttributes( { poster: undefined } );
-
-		// Move focus back to the Media Upload button.
-		posterImageButton.current.focus();
-	}
-
 	return (
 		<>
 			{ isSingleSelected && (
@@ -230,8 +222,6 @@ function VideoEdit( {
 					<PosterImage
 						poster={ poster }
 						setAttributes={ setAttributes }
-						posterImageButton={ posterImageButton }
-						onRemovePoster={ onRemovePoster }
 						instanceId={ instanceId }
 					/>
 				</ToolsPanel>
diff --git a/packages/block-library/src/video/poster-image.js b/packages/block-library/src/video/poster-image.js
index 7be5255375d0eb..cde95f974d8e69 100644
--- a/packages/block-library/src/video/poster-image.js
+++ b/packages/block-library/src/video/poster-image.js
@@ -8,14 +8,10 @@ import {
 	__experimentalToolsPanelItem as ToolsPanelItem,
 } from '@wordpress/components';
 import { __, sprintf } from '@wordpress/i18n';
+import { useRef } from '@wordpress/element';
 
-function PosterImage( {
-	poster,
-	setAttributes,
-	posterImageButton,
-	onRemovePoster,
-	instanceId,
-} ) {
+function PosterImage( { poster, setAttributes, instanceId } ) {
+	const posterImageButton = useRef();
 	const VIDEO_POSTER_ALLOWED_MEDIA_TYPES = [ 'image' ];
 
 	const videoPosterDescription = `video-block__poster-image-description-${ instanceId }`;
@@ -24,6 +20,13 @@ function PosterImage( {
 		setAttributes( { poster: image.url } );
 	}
 
+	function onRemovePoster() {
+		setAttributes( { poster: undefined } );
+
+		// Move focus back to the Media Upload button.
+		posterImageButton.current.focus();
+	}
+
 	return (
 		<ToolsPanelItem
 			label={ __( 'Poster image' ) }

From 47ad559253f62da7f804410b1fdb525c244ab23f Mon Sep 17 00:00:00 2001
From: Utsav Patel <utsav.patel1512@outlook.com>
Date: Fri, 27 Dec 2024 14:06:33 +0530
Subject: [PATCH 3/3] Fix: default state for playback control

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

diff --git a/packages/block-library/src/video/edit-common-settings.js b/packages/block-library/src/video/edit-common-settings.js
index d41c0c45937f5e..4f85f929b07cfc 100644
--- a/packages/block-library/src/video/edit-common-settings.js
+++ b/packages/block-library/src/video/edit-common-settings.js
@@ -100,9 +100,9 @@ const VideoSettings = ( { setAttributes, attributes } ) => {
 			<ToolsPanelItem
 				label={ __( 'Playback controls' ) }
 				isShownByDefault
-				hasValue={ () => !! controls }
+				hasValue={ () => ! controls }
 				onDeselect={ () => {
-					setAttributes( { controls: false } );
+					setAttributes( { controls: true } );
 				} }
 			>
 				<ToggleControl
diff --git a/packages/block-library/src/video/edit.js b/packages/block-library/src/video/edit.js
index 1f26f3a4355bfa..95ecab25f95985 100644
--- a/packages/block-library/src/video/edit.js
+++ b/packages/block-library/src/video/edit.js
@@ -205,7 +205,7 @@ function VideoEdit( {
 					resetAll={ () => {
 						setAttributes( {
 							autoplay: false,
-							controls: false,
+							controls: true,
 							loop: false,
 							muted: false,
 							playsInline: false,