chore: convert video panelbody to toolspanel

up1512001 · Nov 15, 2024 · 7c97a35 · 7c97a35
1 parent d2bc9ea
commit 7c97a35
Show file tree

Hide file tree

Showing 3 changed files with 211 additions and 106 deletions.
diff --git 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
@@ -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,19 +174,13 @@ 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 +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 }>
 				{ /*