@wordpress/block-library 9.26.1-next.719a03cbe.0 → 9.27.1-next.46f643fa0.0

package/src/video/index.php

@@ -0,0 +1,91 @@
+<?php
+/**
+ * Server-side rendering of the `core/video` block.
+ *
+ * @package WordPress
+ */
+
+/**
+ * Renders the `core/video` block on the server to supply the width and height attributes from the attachment metadata.
+ *
+ * @since 6.9.0
+ *
+ * @phpstan-param  array{ "id"?: positive-int } $attributes
+ *
+ * @param array   $attributes The block attributes.
+ * @param string  $content    The block content.
+ * @return string The block content with the dimensions added.
+ */
+function render_block_core_video( array $attributes, string $content ): string {
+	// if the content lacks any video tag, abort.
+	if ( ! str_contains( $content, '<video' ) ) {
+		return $content;
+	}
+
+	// If the 'id' attribute is not populated for a video attachment, abort.
+	if (
+		! isset( $attributes['id'] ) ||
+		! is_int( $attributes['id'] ) ||
+		$attributes['id'] <= 0
+	) {
+		return $content;
+	}
+
+	// If the 'id' attribute wasn't for an attachment, abort.
+	if ( get_post_type( $attributes['id'] ) !== 'attachment' ) {
+		return $content;
+	}
+
+	// Get the width and height metadata for the video, and abort if absent or invalid.
+	$metadata = wp_get_attachment_metadata( $attributes['id'] );
+	if (
+		! isset( $metadata['width'], $metadata['height'] ) ||
+		! ( is_int( $metadata['width'] ) && is_int( $metadata['height'] ) ) ||
+		! ( $metadata['width'] > 0 && $metadata['height'] > 0 )
+	) {
+		return $content;
+	}
+
+	// Locate the VIDEO tag to add the dimensions.
+	$p = new WP_HTML_Tag_Processor( $content );
+	if ( ! $p->next_tag( array( 'tag_name' => 'VIDEO' ) ) ) {
+		return $content;
+	}
+
+	$p->set_attribute( 'width', (string) $metadata['width'] );
+	$p->set_attribute( 'height', (string) $metadata['height'] );
+
+	/*
+	 * The aspect-ratio style is needed due to an issue with the CSS spec: <https://github.com/w3c/csswg-drafts/issues/7524>.
+	 * Note that a style rule using attr() like the following cannot currently be used:
+	 *
+	 *     .wp-block-video video[width][height] {
+	 *         aspect-ratio: attr(width type(<number>)) / attr(height type(<number>));
+	 *     }
+	 *
+	 * This is because this attr() is yet only implemented in Chromium: <https://caniuse.com/css3-attr>.
+	 */
+	$style = $p->get_attribute( 'style' );
+	if ( ! is_string( $style ) ) {
+		$style = '';
+	}
+	$aspect_ratio_style = sprintf( 'aspect-ratio: %d / %d;', $metadata['width'], $metadata['height'] );
+	$p->set_attribute( 'style', $aspect_ratio_style . $style );
+
+	return $p->get_updated_html();
+}
+
+/**
+ * Registers the `core/video` block on server.
+ *
+ * @since 6.9.0
+ */
+function register_block_core_video(): void {
+	register_block_type_from_metadata(
+		__DIR__ . '/video',
+		array(
+			'render_callback' => 'render_block_core_video',
+		)
+	);
+}
+add_action( 'init', 'register_block_core_video' );

package/src/video/style.native.scss

@@ -2,6 +2,7 @@
 
 .video {
 	width: 100%;
+	height: auto;
 }
 
 .videoContainer {

package/src/video/style.scss

@@ -3,6 +3,7 @@
 	box-sizing: border-box;
 	video {
 		width: 100%;
+		height: auto;
 		vertical-align: middle;
 	}
 

package/src/video/tracks-editor.js

@@ -24,9 +24,8 @@ import {
 	MediaUploadCheck,
 	store as blockEditorStore,
 } from '@wordpress/block-editor';
-import { store as noticesStore } from '@wordpress/notices';
 import { upload, media } from '@wordpress/icons';
-import { useSelect, useDispatch } from '@wordpress/data';
+import { useSelect } from '@wordpress/data';
 import { useState, useRef, useEffect } from '@wordpress/element';
 import { getFilename } from '@wordpress/url';
 
@@ -49,11 +48,19 @@ const KIND_OPTIONS = [
 	{ label: __( 'Metadata' ), value: 'metadata' },
 ];
 
+const DEFAULT_TRACK = {
+	src: '',
+	label: '',
+	srcLang: 'en',
+	kind: DEFAULT_KIND,
+	default: false,
+};
+
 function TrackList( { tracks, onEditPress } ) {
 	const content = tracks.map( ( track, index ) => {
 		return (
 			<HStack
-				key={ track.src }
+				key={ track.id ?? track.src }
 				className="block-library-video-tracks-editor__track-list-track"
 			>
 				<span>{ track.label }</span>
@@ -93,13 +100,12 @@ function SingleTrackEditor( {
 	onRemove,
 	allowSettingDefault,
 } ) {
-	const {
-		src = '',
-		label = '',
-		srcLang = '',
-		kind = DEFAULT_KIND,
-		default: isDefaultTrack = false,
-	} = track;
+	const [ trackState, setTrackState ] = useState( {
+		...DEFAULT_TRACK,
+		...track,
+	} );
+
+	const { src, label, srcLang, kind, default: isDefaultTrack } = trackState;
 	const fileName = src.startsWith( 'blob:' ) ? '' : getFilename( src ) || '';
 	return (
 		<VStack
@@ -117,10 +123,10 @@ function SingleTrackEditor( {
 					__next40pxDefaultSize
 					__nextHasNoMarginBottom
 					onChange={ ( newLabel ) =>
-						onChange( {
-							...track,
+						setTrackState( ( prevTrackState ) => ( {
+							...prevTrackState,
 							label: newLabel,
-						} )
+						} ) )
 					}
 					label={ __( 'Label' ) }
 					value={ label }
@@ -130,10 +136,10 @@ function SingleTrackEditor( {
 					__next40pxDefaultSize
 					__nextHasNoMarginBottom
 					onChange={ ( newSrcLang ) =>
-						onChange( {
-							...track,
+						setTrackState( ( prevTrackState ) => ( {
+							...prevTrackState,
 							srcLang: newSrcLang,
-						} )
+						} ) )
 					}
 					label={ __( 'Source language' ) }
 					value={ srcLang }
@@ -148,12 +154,12 @@ function SingleTrackEditor( {
 					options={ KIND_OPTIONS }
 					value={ kind }
 					label={ __( 'Kind' ) }
-					onChange={ ( newKind ) => {
-						onChange( {
-							...track,
+					onChange={ ( newKind ) =>
+						setTrackState( ( prevTrackState ) => ( {
+							...prevTrackState,
 							kind: newKind,
-						} );
-					} }
+						} ) )
+					}
 				/>
 				<ToggleControl
 					__next40pxDefaultSize
@@ -161,12 +167,12 @@ function SingleTrackEditor( {
 					label={ __( 'Set as default track' ) }
 					checked={ isDefaultTrack }
 					disabled={ ! allowSettingDefault }
-					onChange={ ( defaultTrack ) => {
-						onChange( {
-							...track,
+					onChange={ ( defaultTrack ) =>
+						setTrackState( ( prevTrackState ) => ( {
+							...prevTrackState,
 							default: defaultTrack,
-						} );
-					} }
+						} ) )
+					}
 				/>
 				<HStack className="block-library-video-tracks-editor__single-track-editor-buttons-container">
 					<Button
@@ -181,26 +187,7 @@ function SingleTrackEditor( {
 						__next40pxDefaultSize
 						variant="primary"
 						onClick={ () => {
-							const changes = {};
-							let hasChanges = false;
-							if ( label === '' ) {
-								changes.label = __( 'English' );
-								hasChanges = true;
-							}
-							if ( srcLang === '' ) {
-								changes.srcLang = 'en';
-								hasChanges = true;
-							}
-							if ( track.kind === undefined ) {
-								changes.kind = DEFAULT_KIND;
-								hasChanges = true;
-							}
-							if ( hasChanges ) {
-								onChange( {
-									...track,
-									...changes,
-								} );
-							}
+							onChange( trackState );
 							onClose();
 						} }
 					>
@@ -213,27 +200,60 @@ function SingleTrackEditor( {
 }
 
 export default function TracksEditor( { tracks = [], onChange } ) {
-	const { createNotice } = useDispatch( noticesStore );
 	const mediaUpload = useSelect( ( select ) => {
 		return select( blockEditorStore ).getSettings().mediaUpload;
 	}, [] );
 	const [ trackBeingEdited, setTrackBeingEdited ] = useState( null );
 	const dropdownPopoverRef = useRef();
 
-	const handleTrackSelect = ( { title, url } ) => {
-		if ( tracks.some( ( track ) => track.src === url ) ) {
-			createNotice( 'error', __( 'This track already exists.' ), {
-				isDismissible: true,
-				type: 'snackbar',
-			} );
+	const handleTrackSelect = ( selectedTracks = [], appendTracks = false ) => {
+		const existingTracksMap = new Map(
+			tracks.map( ( track ) => [ track.id, track ] )
+		);
+		const tracksToAdd = selectedTracks.map( ( { id, title, url } ) => {
+			// Reuse existing tracks to preserve user-configured metadata.
+			if ( existingTracksMap.has( id ) ) {
+				return existingTracksMap.get( id );
+			}
+
+			return {
+				...DEFAULT_TRACK,
+				id,
+				label: title || '',
+				src: url,
+			};
+		} );
+
+		if ( tracksToAdd.length === 0 ) {
 			return;
 		}
 
-		const trackIndex = tracks.length;
-		onChange( [ ...tracks, { label: title || '', src: url } ] );
-		setTrackBeingEdited( trackIndex );
+		onChange( [ ...( appendTracks ? tracks : [] ), ...tracksToAdd ] );
 	};
 
+	function uploadFiles( event ) {
+		const files = event.target.files;
+		mediaUpload( {
+			allowedTypes: ALLOWED_TYPES,
+			filesList: files,
+			onFileChange: ( selectedTracks ) => {
+				if ( ! Array.isArray( selectedTracks ) ) {
+					return;
+				}
+
+				// Wait until the track has been uploaded.
+				const uploadedTracks = selectedTracks.filter(
+					( track ) => !! track?.id
+				);
+
+				if ( ! uploadedTracks.length ) {
+					return;
+				}
+				handleTrackSelect( uploadedTracks, true );
+			},
+		} );
+	}
+
 	useEffect( () => {
 		dropdownPopoverRef.current?.focus();
 	}, [ trackBeingEdited ] );
@@ -321,60 +341,30 @@ export default function TracksEditor( { tracks = [], onChange } ) {
 								className="block-library-video-tracks-editor__add-tracks-container"
 								label={ __( 'Add tracks' ) }
 							>
-								<MediaUpload
-									onSelect={ handleTrackSelect }
-									allowedTypes={ ALLOWED_TYPES }
-									render={ ( { open } ) => (
-										<MenuItem
-											icon={ media }
-											onClick={ open }
-										>
-											{ __( 'Open Media Library' ) }
-										</MenuItem>
-									) }
-								/>
 								<MediaUploadCheck>
+									<MediaUpload
+										onSelect={ handleTrackSelect }
+										allowedTypes={ ALLOWED_TYPES }
+										value={ tracks.map( ( { id } ) => id ) }
+										multiple
+										render={ ( { open } ) => (
+											<MenuItem
+												icon={ media }
+												onClick={ open }
+											>
+												{ __( 'Open Media Library' ) }
+											</MenuItem>
+										) }
+									/>
 									<FormFileUpload
-										onChange={ ( event ) => {
-											const files = event.target.files;
-											const trackIndex = tracks.length;
-											mediaUpload( {
-												allowedTypes: ALLOWED_TYPES,
-												filesList: files,
-												onFileChange: ( [
-													{ url },
-												] ) => {
-													const newTracks = [
-														...tracks,
-													];
-													if (
-														! newTracks[
-															trackIndex
-														]
-													) {
-														newTracks[
-															trackIndex
-														] = {};
-													}
-													newTracks[ trackIndex ] = {
-														...tracks[ trackIndex ],
-														src: url,
-													};
-													onChange( newTracks );
-													setTrackBeingEdited(
-														trackIndex
-													);
-												},
-											} );
-										} }
+										onChange={ uploadFiles }
 										accept=".vtt,text/vtt"
+										multiple
 										render={ ( { openFileDialog } ) => {
 											return (
 												<MenuItem
 													icon={ upload }
-													onClick={ () => {
-														openFileDialog();
-													} }
+													onClick={ openFileDialog }
 												>
 													{ _x( 'Upload', 'verb' ) }
 												</MenuItem>

package/src/video/tracks.js

@@ -1,5 +1,6 @@
 export default function Tracks( { tracks = [] } ) {
 	return tracks.map( ( track ) => {
-		return <track key={ track.src } { ...track } />;
+		const { id, ...trackAttrs } = track;
+		return <track key={ id ?? trackAttrs.src } { ...trackAttrs } />;
 	} );
 }

package/build/video/poster-image.js

@@ -1,81 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _blockEditor = require("@wordpress/block-editor");
-var _components = require("@wordpress/components");
-var _i18n = require("@wordpress/i18n");
-var _element = require("@wordpress/element");
-var _jsxRuntime = require("react/jsx-runtime");
-/**
- * WordPress dependencies
- */
-
-function PosterImage({
-  poster,
-  setAttributes,
-  instanceId
-}) {
-  const posterImageButton = (0, _element.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 /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalToolsPanelItem, {
-    label: (0, _i18n.__)('Poster image'),
-    isShownByDefault: true,
-    hasValue: () => !!poster,
-    onDeselect: () => {
-      setAttributes({
-        poster: ''
-      });
-    },
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_blockEditor.MediaUploadCheck, {
-      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-        className: "editor-video-poster-control",
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.BaseControl.VisualLabel, {
-          children: (0, _i18n.__)('Poster image')
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_blockEditor.MediaUpload, {
-          title: (0, _i18n.__)('Select poster image'),
-          onSelect: onSelectPoster,
-          allowedTypes: VIDEO_POSTER_ALLOWED_MEDIA_TYPES,
-          render: ({
-            open
-          }) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Button, {
-            __next40pxDefaultSize: true,
-            variant: "primary",
-            onClick: open,
-            ref: posterImageButton,
-            "aria-describedby": videoPosterDescription,
-            children: !poster ? (0, _i18n.__)('Select') : (0, _i18n.__)('Replace')
-          })
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
-          id: videoPosterDescription,
-          hidden: true,
-          children: poster ? (0, _i18n.sprintf)(/* translators: %s: poster image URL. */
-          (0, _i18n.__)('The current poster image url is %s'), poster) : (0, _i18n.__)('There is no poster image currently selected')
-        }), !!poster && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Button, {
-          __next40pxDefaultSize: true,
-          onClick: onRemovePoster,
-          variant: "tertiary",
-          children: (0, _i18n.__)('Remove')
-        })]
-      })
-    })
-  });
-}
-var _default = exports.default = PosterImage;
-//# sourceMappingURL=poster-image.js.map

package/build/video/poster-image.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["_blockEditor","require","_components","_i18n","_element","_jsxRuntime","PosterImage","poster","setAttributes","instanceId","posterImageButton","useRef","VIDEO_POSTER_ALLOWED_MEDIA_TYPES","videoPosterDescription","onSelectPoster","image","url","onRemovePoster","undefined","current","focus","jsx","__experimentalToolsPanelItem","label","__","isShownByDefault","hasValue","onDeselect","children","MediaUploadCheck","jsxs","className","BaseControl","VisualLabel","MediaUpload","title","onSelect","allowedTypes","render","open","Button","__next40pxDefaultSize","variant","onClick","ref","id","hidden","sprintf","_default","exports","default"],"sources":["@wordpress/block-library/src/video/poster-image.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { MediaUpload, MediaUploadCheck } from '@wordpress/block-editor';\nimport {\n\tButton,\n\tBaseControl,\n\t__experimentalToolsPanelItem as ToolsPanelItem,\n} from '@wordpress/components';\nimport { __, sprintf } from '@wordpress/i18n';\nimport { useRef } from '@wordpress/element';\n\nfunction PosterImage( { poster, setAttributes, instanceId } ) {\n\tconst posterImageButton = useRef();\n\tconst VIDEO_POSTER_ALLOWED_MEDIA_TYPES = [ 'image' ];\n\n\tconst videoPosterDescription = `video-block__poster-image-description-${ instanceId }`;\n\n\tfunction onSelectPoster( image ) {\n\t\tsetAttributes( { poster: image.url } );\n\t}\n\n\tfunction onRemovePoster() {\n\t\tsetAttributes( { poster: undefined } );\n\n\t\t// Move focus back to the Media Upload button.\n\t\tposterImageButton.current.focus();\n\t}\n\n\treturn (\n\t\t<ToolsPanelItem\n\t\t\tlabel={ __( 'Poster image' ) }\n\t\t\tisShownByDefault\n\t\t\thasValue={ () => !! poster }\n\t\t\tonDeselect={ () => {\n\t\t\t\tsetAttributes( { poster: '' } );\n\t\t\t} }\n\t\t>\n\t\t\t<MediaUploadCheck>\n\t\t\t\t<div className=\"editor-video-poster-control\">\n\t\t\t\t\t<BaseControl.VisualLabel>\n\t\t\t\t\t\t{ __( 'Poster image' ) }\n\t\t\t\t\t</BaseControl.VisualLabel>\n\t\t\t\t\t<MediaUpload\n\t\t\t\t\t\ttitle={ __( 'Select poster image' ) }\n\t\t\t\t\t\tonSelect={ onSelectPoster }\n\t\t\t\t\t\tallowedTypes={ VIDEO_POSTER_ALLOWED_MEDIA_TYPES }\n\t\t\t\t\t\trender={ ( { open } ) => (\n\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t\t\t\tvariant=\"primary\"\n\t\t\t\t\t\t\t\tonClick={ open }\n\t\t\t\t\t\t\t\tref={ posterImageButton }\n\t\t\t\t\t\t\t\taria-describedby={ videoPosterDescription }\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{ ! poster ? __( 'Select' ) : __( 'Replace' ) }\n\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t) }\n\t\t\t\t\t/>\n\t\t\t\t\t<p id={ videoPosterDescription } hidden>\n\t\t\t\t\t\t{ poster\n\t\t\t\t\t\t\t? sprintf(\n\t\t\t\t\t\t\t\t\t/* translators: %s: poster image URL. */\n\t\t\t\t\t\t\t\t\t__( 'The current poster image url is %s' ),\n\t\t\t\t\t\t\t\t\tposter\n\t\t\t\t\t\t\t  )\n\t\t\t\t\t\t\t: __(\n\t\t\t\t\t\t\t\t\t'There is no poster image currently selected'\n\t\t\t\t\t\t\t  ) }\n\t\t\t\t\t</p>\n\t\t\t\t\t{ !! poster && (\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t\t\tonClick={ onRemovePoster }\n\t\t\t\t\t\t\tvariant=\"tertiary\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ __( 'Remove' ) }\n\t\t\t\t\t\t</Button>\n\t\t\t\t\t) }\n\t\t\t\t</div>\n\t\t\t</MediaUploadCheck>\n\t\t</ToolsPanelItem>\n\t);\n}\n\nexport default PosterImage;\n"],"mappings":"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","ignoreList":[]}

package/build-module/video/poster-image.js

@@ -1,74 +0,0 @@
-/**
- * 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';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-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 /*#__PURE__*/_jsx(ToolsPanelItem, {
-    label: __('Poster image'),
-    isShownByDefault: true,
-    hasValue: () => !!poster,
-    onDeselect: () => {
-      setAttributes({
-        poster: ''
-      });
-    },
-    children: /*#__PURE__*/_jsx(MediaUploadCheck, {
-      children: /*#__PURE__*/_jsxs("div", {
-        className: "editor-video-poster-control",
-        children: [/*#__PURE__*/_jsx(BaseControl.VisualLabel, {
-          children: __('Poster image')
-        }), /*#__PURE__*/_jsx(MediaUpload, {
-          title: __('Select poster image'),
-          onSelect: onSelectPoster,
-          allowedTypes: VIDEO_POSTER_ALLOWED_MEDIA_TYPES,
-          render: ({
-            open
-          }) => /*#__PURE__*/_jsx(Button, {
-            __next40pxDefaultSize: true,
-            variant: "primary",
-            onClick: open,
-            ref: posterImageButton,
-            "aria-describedby": videoPosterDescription,
-            children: !poster ? __('Select') : __('Replace')
-          })
-        }), /*#__PURE__*/_jsx("p", {
-          id: videoPosterDescription,
-          hidden: true,
-          children: poster ? sprintf(/* translators: %s: poster image URL. */
-          __('The current poster image url is %s'), poster) : __('There is no poster image currently selected')
-        }), !!poster && /*#__PURE__*/_jsx(Button, {
-          __next40pxDefaultSize: true,
-          onClick: onRemovePoster,
-          variant: "tertiary",
-          children: __('Remove')
-        })]
-      })
-    })
-  });
-}
-export default PosterImage;
-//# sourceMappingURL=poster-image.js.map

package/build-module/video/poster-image.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["MediaUpload","MediaUploadCheck","Button","BaseControl","__experimentalToolsPanelItem","ToolsPanelItem","__","sprintf","useRef","jsx","_jsx","jsxs","_jsxs","PosterImage","poster","setAttributes","instanceId","posterImageButton","VIDEO_POSTER_ALLOWED_MEDIA_TYPES","videoPosterDescription","onSelectPoster","image","url","onRemovePoster","undefined","current","focus","label","isShownByDefault","hasValue","onDeselect","children","className","VisualLabel","title","onSelect","allowedTypes","render","open","__next40pxDefaultSize","variant","onClick","ref","id","hidden"],"sources":["@wordpress/block-library/src/video/poster-image.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { MediaUpload, MediaUploadCheck } from '@wordpress/block-editor';\nimport {\n\tButton,\n\tBaseControl,\n\t__experimentalToolsPanelItem as ToolsPanelItem,\n} from '@wordpress/components';\nimport { __, sprintf } from '@wordpress/i18n';\nimport { useRef } from '@wordpress/element';\n\nfunction PosterImage( { poster, setAttributes, instanceId } ) {\n\tconst posterImageButton = useRef();\n\tconst VIDEO_POSTER_ALLOWED_MEDIA_TYPES = [ 'image' ];\n\n\tconst videoPosterDescription = `video-block__poster-image-description-${ instanceId }`;\n\n\tfunction onSelectPoster( image ) {\n\t\tsetAttributes( { poster: image.url } );\n\t}\n\n\tfunction onRemovePoster() {\n\t\tsetAttributes( { poster: undefined } );\n\n\t\t// Move focus back to the Media Upload button.\n\t\tposterImageButton.current.focus();\n\t}\n\n\treturn (\n\t\t<ToolsPanelItem\n\t\t\tlabel={ __( 'Poster image' ) }\n\t\t\tisShownByDefault\n\t\t\thasValue={ () => !! poster }\n\t\t\tonDeselect={ () => {\n\t\t\t\tsetAttributes( { poster: '' } );\n\t\t\t} }\n\t\t>\n\t\t\t<MediaUploadCheck>\n\t\t\t\t<div className=\"editor-video-poster-control\">\n\t\t\t\t\t<BaseControl.VisualLabel>\n\t\t\t\t\t\t{ __( 'Poster image' ) }\n\t\t\t\t\t</BaseControl.VisualLabel>\n\t\t\t\t\t<MediaUpload\n\t\t\t\t\t\ttitle={ __( 'Select poster image' ) }\n\t\t\t\t\t\tonSelect={ onSelectPoster }\n\t\t\t\t\t\tallowedTypes={ VIDEO_POSTER_ALLOWED_MEDIA_TYPES }\n\t\t\t\t\t\trender={ ( { open } ) => (\n\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t\t\t\tvariant=\"primary\"\n\t\t\t\t\t\t\t\tonClick={ open }\n\t\t\t\t\t\t\t\tref={ posterImageButton }\n\t\t\t\t\t\t\t\taria-describedby={ videoPosterDescription }\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{ ! poster ? __( 'Select' ) : __( 'Replace' ) }\n\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t) }\n\t\t\t\t\t/>\n\t\t\t\t\t<p id={ videoPosterDescription } hidden>\n\t\t\t\t\t\t{ poster\n\t\t\t\t\t\t\t? sprintf(\n\t\t\t\t\t\t\t\t\t/* translators: %s: poster image URL. */\n\t\t\t\t\t\t\t\t\t__( 'The current poster image url is %s' ),\n\t\t\t\t\t\t\t\t\tposter\n\t\t\t\t\t\t\t  )\n\t\t\t\t\t\t\t: __(\n\t\t\t\t\t\t\t\t\t'There is no poster image currently selected'\n\t\t\t\t\t\t\t  ) }\n\t\t\t\t\t</p>\n\t\t\t\t\t{ !! poster && (\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t\t\tonClick={ onRemovePoster }\n\t\t\t\t\t\t\tvariant=\"tertiary\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ __( 'Remove' ) }\n\t\t\t\t\t\t</Button>\n\t\t\t\t\t) }\n\t\t\t\t</div>\n\t\t\t</MediaUploadCheck>\n\t\t</ToolsPanelItem>\n\t);\n}\n\nexport default PosterImage;\n"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,WAAW,EAAEC,gBAAgB,QAAQ,yBAAyB;AACvE,SACCC,MAAM,EACNC,WAAW,EACXC,4BAA4B,IAAIC,cAAc,QACxC,uBAAuB;AAC9B,SAASC,EAAE,EAAEC,OAAO,QAAQ,iBAAiB;AAC7C,SAASC,MAAM,QAAQ,oBAAoB;AAAC,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAE5C,SAASC,WAAWA,CAAE;EAAEC,MAAM;EAAEC,aAAa;EAAEC;AAAW,CAAC,EAAG;EAC7D,MAAMC,iBAAiB,GAAGT,MAAM,CAAC,CAAC;EAClC,MAAMU,gCAAgC,GAAG,CAAE,OAAO,CAAE;EAEpD,MAAMC,sBAAsB,GAAG,yCAA0CH,UAAU,EAAG;EAEtF,SAASI,cAAcA,CAAEC,KAAK,EAAG;IAChCN,aAAa,CAAE;MAAED,MAAM,EAAEO,KAAK,CAACC;IAAI,CAAE,CAAC;EACvC;EAEA,SAASC,cAAcA,CAAA,EAAG;IACzBR,aAAa,CAAE;MAAED,MAAM,EAAEU;IAAU,CAAE,CAAC;;IAEtC;IACAP,iBAAiB,CAACQ,OAAO,CAACC,KAAK,CAAC,CAAC;EAClC;EAEA,oBACChB,IAAA,CAACL,cAAc;IACdsB,KAAK,EAAGrB,EAAE,CAAE,cAAe,CAAG;IAC9BsB,gBAAgB;IAChBC,QAAQ,EAAGA,CAAA,KAAM,CAAC,CAAEf,MAAQ;IAC5BgB,UAAU,EAAGA,CAAA,KAAM;MAClBf,aAAa,CAAE;QAAED,MAAM,EAAE;MAAG,CAAE,CAAC;IAChC,CAAG;IAAAiB,QAAA,eAEHrB,IAAA,CAACT,gBAAgB;MAAA8B,QAAA,eAChBnB,KAAA;QAAKoB,SAAS,EAAC,6BAA6B;QAAAD,QAAA,gBAC3CrB,IAAA,CAACP,WAAW,CAAC8B,WAAW;UAAAF,QAAA,EACrBzB,EAAE,CAAE,cAAe;QAAC,CACE,CAAC,eAC1BI,IAAA,CAACV,WAAW;UACXkC,KAAK,EAAG5B,EAAE,CAAE,qBAAsB,CAAG;UACrC6B,QAAQ,EAAGf,cAAgB;UAC3BgB,YAAY,EAAGlB,gCAAkC;UACjDmB,MAAM,EAAGA,CAAE;YAAEC;UAAK,CAAC,kBAClB5B,IAAA,CAACR,MAAM;YACNqC,qBAAqB;YACrBC,OAAO,EAAC,SAAS;YACjBC,OAAO,EAAGH,IAAM;YAChBI,GAAG,EAAGzB,iBAAmB;YACzB,oBAAmBE,sBAAwB;YAAAY,QAAA,EAEzC,CAAEjB,MAAM,GAAGR,EAAE,CAAE,QAAS,CAAC,GAAGA,EAAE,CAAE,SAAU;UAAC,CACtC;QACN,CACH,CAAC,eACFI,IAAA;UAAGiC,EAAE,EAAGxB,sBAAwB;UAACyB,MAAM;UAAAb,QAAA,EACpCjB,MAAM,GACLP,OAAO,CACP;UACAD,EAAE,CAAE,oCAAqC,CAAC,EAC1CQ,MACA,CAAC,GACDR,EAAE,CACF,6CACA;QAAC,CACF,CAAC,EACF,CAAC,CAAEQ,MAAM,iBACVJ,IAAA,CAACR,MAAM;UACNqC,qBAAqB;UACrBE,OAAO,EAAGlB,cAAgB;UAC1BiB,OAAO,EAAC,UAAU;UAAAT,QAAA,EAEhBzB,EAAE,CAAE,QAAS;QAAC,CACT,CACR;MAAA,CACG;IAAC,CACW;EAAC,CACJ,CAAC;AAEnB;AAEA,eAAeO,WAAW","ignoreList":[]}

package/src/video/poster-image.js

@@ -1,86 +0,0 @@
-/**
- * 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;