@wordpress/block-library 9.26.0 → 9.27.0

package/src/separator/edit.js

@@ -7,26 +7,18 @@ import clsx from 'clsx';
  * WordPress dependencies
  */
 import {
-	HorizontalRule,
-	SelectControl,
-	PanelBody,
-	__experimentalToolsPanel as ToolsPanel,
-	__experimentalToolsPanelItem as ToolsPanelItem,
-} from '@wordpress/components';
-import {
-	useBlockProps,
 	getColorClassName,
-	__experimentalUseColorProps as useColorProps,
 	InspectorControls,
+	useBlockProps,
+	__experimentalUseColorProps as useColorProps,
 } from '@wordpress/block-editor';
-import { Platform } from '@wordpress/element';
+import { HorizontalRule, SelectControl } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
  */
 import useDeprecatedOpacity from './use-deprecated-opacity';
-import { useToolsPanelDropdownMenuProps } from '../utils/hooks';
 
 const HtmlElementControl = ( { tagName, setAttributes } ) => {
 	return (
@@ -58,7 +50,6 @@ export default function SeparatorEdit( { attributes, setAttributes } ) {
 	const colorProps = useColorProps( attributes );
 	const currentColor = colorProps?.style?.backgroundColor;
 	const hasCustomColor = !! style?.color?.background;
-	const dropdownMenuProps = useToolsPanelDropdownMenuProps();
 
 	useDeprecatedOpacity( opacity, currentColor, setAttributes );
 
@@ -84,37 +75,11 @@ export default function SeparatorEdit( { attributes, setAttributes } ) {
 
 	return (
 		<>
-			<InspectorControls>
-				{ Platform.isNative ? (
-					<PanelBody title={ __( 'Settings' ) }>
-						<HtmlElementControl
-							tagName={ tagName }
-							setAttributes={ setAttributes }
-						/>
-					</PanelBody>
-				) : (
-					<ToolsPanel
-						label={ __( 'Settings' ) }
-						resetAll={ () => {
-							setAttributes( { tagName: 'hr' } );
-						} }
-						dropdownMenuProps={ dropdownMenuProps }
-					>
-						<ToolsPanelItem
-							hasValue={ () => tagName !== 'hr' }
-							label={ __( 'HTML element' ) }
-							onDeselect={ () =>
-								setAttributes( { tagName: 'hr' } )
-							}
-							isShownByDefault
-						>
-							<HtmlElementControl
-								tagName={ tagName }
-								setAttributes={ setAttributes }
-							/>
-						</ToolsPanelItem>
-					</ToolsPanel>
-				) }
+			<InspectorControls group="advanced">
+				<HtmlElementControl
+					tagName={ tagName }
+					setAttributes={ setAttributes }
+				/>
 			</InspectorControls>
 			<Wrapper
 				{ ...useBlockProps( {

package/src/site-logo/edit.js

@@ -23,7 +23,6 @@ import {
 	Button,
 	DropZone,
 	FlexItem,
-	PanelBody,
 	__experimentalToolsPanel as ToolsPanel,
 	__experimentalToolsPanelItem as ToolsPanelItem,
 	__experimentalItemGroup as ItemGroup,
@@ -476,6 +475,7 @@ export default function LogoEdit( {
 	}, [] );
 	const { getSettings } = useSelect( blockEditorStore );
 	const [ temporaryURL, setTemporaryURL ] = useState();
+	const dropdownMenuProps = useToolsPanelDropdownMenuProps();
 
 	const { editEntityRecord } = useDispatch( coreStore );
 
@@ -633,9 +633,15 @@ export default function LogoEdit( {
 
 	const mediaInspectorPanel = ( canUserEdit || logoUrl ) && (
 		<InspectorControls>
-			<PanelBody title={ __( 'Media' ) }>
-				<div className="block-library-site-logo__inspector-media-replace-container">
-					{ ! canUserEdit ? (
+			<ToolsPanel
+				label={ __( 'Media' ) }
+				dropdownMenuProps={ dropdownMenuProps }
+			>
+				{ ! canUserEdit ? (
+					<div
+						className="block-library-site-logo__inspector-media-replace-container"
+						style={ { gridColumn: '1 / -1' } }
+					>
 						<InspectorLogoPreview
 							media={ mediaItemData }
 							itemGroupProps={ {
@@ -644,8 +650,14 @@ export default function LogoEdit( {
 									'block-library-site-logo__inspector-readonly-logo-preview',
 							} }
 						/>
-					) : (
-						<>
+					</div>
+				) : (
+					<ToolsPanelItem
+						hasValue={ () => !! logoUrl }
+						label={ __( 'Logo' ) }
+						isShownByDefault
+					>
+						<div className="block-library-site-logo__inspector-media-replace-container">
 							<SiteLogoReplaceFlow
 								{ ...mediaReplaceFlowProps }
 								name={
@@ -668,10 +680,10 @@ export default function LogoEdit( {
 								) }
 							/>
 							<DropZone onFilesDrop={ onFilesDrop } />
-						</>
-					) }
-				</div>
-			</PanelBody>
+						</div>
+					</ToolsPanelItem>
+				) }
+			</ToolsPanel>
 		</InspectorControls>
 	);
 

package/src/site-tagline/block.json

@@ -4,7 +4,7 @@
 	"name": "core/site-tagline",
 	"title": "Site Tagline",
 	"category": "theme",
-	"description": "Describe in a few words what the site is about. The tagline can be used in search results or when sharing on social networks even if it’s not displayed in the theme design.",
+	"description": "Describe in a few words what this site is about. This is important for search results, sharing on social media, and gives overall clarity to visitors.",
 	"keywords": [ "description" ],
 	"textdomain": "default",
 	"attributes": {

package/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>

package/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}");
 }

package/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>
 	);
 }
 

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 } />;
 	} );
 }