From b4424d8c2c6b6c95a973383abe5650c8aac73107 Mon Sep 17 00:00:00 2001
From: Utsav Patel <75293077+up1512001@users.noreply.github.com>
Date: Fri, 27 Dec 2024 14:43:28 +0530
Subject: [PATCH] Video Block: refactor setting panel (#67044)

Co-authored-by: up1512001 <up1512001@git.wordpress.org>
Co-authored-by: aaronrobertshaw <aaronrobertshaw@git.wordpress.org>
Co-authored-by: t-hamano <wildworks@git.wordpress.org>
---
 .../src/video/edit-common-settings.js         | 136 +++++++++++++-----
 packages/block-library/src/video/edit.js      | 104 ++++----------
 .../block-library/src/video/poster-image.js   |  86 +++++++++++
 3 files changed, 212 insertions(+), 114 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 9394bfaf5c614..4f85f929b07cf 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: true } );
+				} }
+			>
+				<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 32221919c7ea2..95ecab25f9598 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,
@@ -55,9 +54,9 @@ 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();
 
 	useUploadMediaFromBlobURL( {
 		url: temporaryURL,
@@ -174,19 +173,6 @@ function VideoEdit( {
 		);
 	}
 
-	function onSelectPoster( image ) {
-		setAttributes( { poster: image.url } );
-	}
-
-	function onRemovePoster() {
-		setAttributes( { poster: undefined } );
-
-		// Move focus back to the Media Upload button.
-		posterImageButton.current.focus();
-	}
-
-	const videoPosterDescription = `video-block__poster-image-description-${ instanceId }`;
-
 	return (
 		<>
 			{ isSingleSelected && (
@@ -214,63 +200,31 @@ function VideoEdit( {
 				</>
 			) }
 			<InspectorControls>
-				<PanelBody title={ __( 'Settings' ) }>
+				<ToolsPanel
+					label={ __( 'Settings' ) }
+					resetAll={ () => {
+						setAttributes( {
+							autoplay: false,
+							controls: true,
+							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 }
+						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 0000000000000..cde95f974d8e6
--- /dev/null
+++ b/packages/block-library/src/video/poster-image.js
@@ -0,0 +1,86 @@
+/**
+ * WordPress dependencies
+ */
+import { MediaUpload, MediaUploadCheck } from '@wordpress/block-editor';
+import {
+	Button,
+	BaseControl,
+	__experimentalToolsPanelItem as ToolsPanelItem,
+} from '@wordpress/components';
+import { __, sprintf } from '@wordpress/i18n';
+import { useRef } from '@wordpress/element';
+
+function PosterImage( { poster, setAttributes, instanceId } ) {
+	const posterImageButton = useRef();
+	const VIDEO_POSTER_ALLOWED_MEDIA_TYPES = [ 'image' ];
+
+	const videoPosterDescription = `video-block__poster-image-description-${ instanceId }`;
+
+	function onSelectPoster( image ) {
+		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' ) }
+			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;