Video: Fix 'MediaUploadCheck' wrapper for Poster control (WordPress#70830)

Co-authored-by: Mamaduka <mamaduka@git.wordpress.org>
Co-authored-by: yogeshbhutkar <yogeshbhutkar@git.wordpress.org>
Co-authored-by: fabiankaegy <fabiankaegy@git.wordpress.org>

Author: 3 people

packages/block-library/src/video/edit.js

@@ -23,7 +23,6 @@ import {
 } from '@wordpress/block-editor';
 import { useRef, useEffect, useState } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
-import { useInstanceId } from '@wordpress/compose';
 import { useDispatch } from '@wordpress/data';
 import { video as icon } from '@wordpress/icons';
 import { store as noticesStore } from '@wordpress/notices';
@@ -52,7 +51,6 @@ function VideoEdit( {
 	insertBlocksAfter,
 	onReplace,
 } ) {
-	const instanceId = useInstanceId( VideoEdit );
 	const videoPlayer = useRef();
 	const { id, controls, poster, src, tracks } = attributes;
 	const [ temporaryURL, setTemporaryURL ] = useState( attributes.blob );
@@ -210,7 +208,7 @@ function VideoEdit( {
 							muted: false,
 							playsInline: false,
 							preload: 'metadata',
-							poster: '',
+							poster: undefined,
 						} );
 					} }
 					dropdownMenuProps={ dropdownMenuProps }
@@ -222,7 +220,6 @@ function VideoEdit( {
 					<PosterImage
 						poster={ poster }
 						setAttributes={ setAttributes }
-						instanceId={ instanceId }
 					/>
 				</ToolsPanel>
 			</InspectorControls>

packages/block-library/src/video/editor.scss

@@ -19,12 +19,6 @@
 	}
 }
 
-.editor-video-poster-control {
-	.components-button {
-		margin-right: $grid-unit-10;
-	}
-}
-
 .block-library-video-tracks-editor {
 	z-index: z-index("{core/video track editor popover}");
 }

packages/block-library/src/video/poster-image.js

@@ -5,16 +5,21 @@ import { MediaUpload, MediaUploadCheck } from '@wordpress/block-editor';
 import {
 	Button,
 	BaseControl,
+	__experimentalHStack as HStack,
 	__experimentalToolsPanelItem as ToolsPanelItem,
 } from '@wordpress/components';
 import { __, sprintf } from '@wordpress/i18n';
 import { useRef } from '@wordpress/element';
+import { useInstanceId } from '@wordpress/compose';
 
-function PosterImage( { poster, setAttributes, instanceId } ) {
-	const posterImageButton = useRef();
-	const VIDEO_POSTER_ALLOWED_MEDIA_TYPES = [ 'image' ];
+const VIDEO_POSTER_ALLOWED_MEDIA_TYPES = [ 'image' ];
 
-	const videoPosterDescription = `video-block__poster-image-description-${ instanceId }`;
+function PosterImage( { poster, setAttributes } ) {
+	const posterButtonRef = useRef();
+	const descriptionId = useInstanceId(
+		PosterImage,
+		'video-block__poster-image-description'
+	);
 
 	function onSelectPoster( image ) {
 		setAttributes( { poster: image.url } );
@@ -24,23 +29,23 @@ function PosterImage( { poster, setAttributes, instanceId } ) {
 		setAttributes( { poster: undefined } );
 
 		// Move focus back to the Media Upload button.
-		posterImageButton.current.focus();
+		posterButtonRef.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>
+		<MediaUploadCheck>
+			<ToolsPanelItem
+				label={ __( 'Poster image' ) }
+				isShownByDefault
+				hasValue={ () => !! poster }
+				onDeselect={ () => {
+					setAttributes( { poster: undefined } );
+				} }
+			>
+				<BaseControl.VisualLabel>
+					{ __( 'Poster image' ) }
+				</BaseControl.VisualLabel>
+				<HStack justify="flex-start">
 					<MediaUpload
 						title={ __( 'Select poster image' ) }
 						onSelect={ onSelectPoster }
@@ -50,14 +55,14 @@ function PosterImage( { poster, setAttributes, instanceId } ) {
 								__next40pxDefaultSize
 								variant="primary"
 								onClick={ open }
-								ref={ posterImageButton }
-								aria-describedby={ videoPosterDescription }
+								ref={ posterButtonRef }
+								aria-describedby={ descriptionId }
 							>
 								{ ! poster ? __( 'Select' ) : __( 'Replace' ) }
 							</Button>
 						) }
 					/>
-					<p id={ videoPosterDescription } hidden>
+					<p id={ descriptionId } hidden>
 						{ poster
 							? sprintf(
 									/* translators: %s: poster image URL. */
@@ -77,9 +82,9 @@ function PosterImage( { poster, setAttributes, instanceId } ) {
 							{ __( 'Remove' ) }
 						</Button>
 					) }
-				</div>
-			</MediaUploadCheck>
-		</ToolsPanelItem>
+				</HStack>
+			</ToolsPanelItem>
+		</MediaUploadCheck>
 	);
 }