@wordpress/block-library 7.17.0 → 7.18.0

package/src/table/state.js

@@ -281,7 +281,7 @@ export function deleteColumn( state, { columnIndex } ) {
 }
 
 /**
- * Toggles the existance of a section.
+ * Toggles the existence of a section.
  *
  * @param {Object} state       Current table state.
  * @param {string} sectionName Name of the section to toggle.

package/src/utils/clean-empty-object.js

@@ -1,9 +1,7 @@
 /**
  * External dependencies
  */
-import { isEmpty, mapValues, pickBy } from 'lodash';
-
-const identity = ( x ) => x;
+import { isEmpty, mapValues } from 'lodash';
 
 /**
  * Removed empty nodes from nested objects.
@@ -19,9 +17,10 @@ const cleanEmptyObject = ( object ) => {
 	) {
 		return object;
 	}
-	const cleanedNestedObjects = pickBy(
-		mapValues( object, cleanEmptyObject ),
-		identity
+	const cleanedNestedObjects = Object.fromEntries(
+		Object.entries( mapValues( object, cleanEmptyObject ) ).filter(
+			( [ , value ] ) => Boolean( value )
+		)
 	);
 	return isEmpty( cleanedNestedObjects ) ? undefined : cleanedNestedObjects;
 };

package/src/video/deprecated.js

@@ -0,0 +1,57 @@
+/**
+ * WordPress dependencies
+ */
+import { RichText, useBlockProps } from '@wordpress/block-editor';
+
+/**
+ * Internal dependencies
+ */
+import metadata from './block.json';
+import Tracks from './tracks';
+
+const { attributes: blockAttributes } = metadata;
+
+// In #41140 support was added to global styles for caption elements which added a `wp-element-caption` classname
+// to the video figcaption element.
+const v1 = {
+	attributes: blockAttributes,
+	save( { attributes } ) {
+		const {
+			autoplay,
+			caption,
+			controls,
+			loop,
+			muted,
+			poster,
+			preload,
+			src,
+			playsInline,
+			tracks,
+		} = attributes;
+		return (
+			<figure { ...useBlockProps.save() }>
+				{ src && (
+					<video
+						autoPlay={ autoplay }
+						controls={ controls }
+						loop={ loop }
+						muted={ muted }
+						poster={ poster }
+						preload={ preload !== 'metadata' ? preload : undefined }
+						src={ src }
+						playsInline={ playsInline }
+					>
+						<Tracks tracks={ tracks } />
+					</video>
+				) }
+				{ ! RichText.isEmpty( caption ) && (
+					<RichText.Content tagName="figcaption" value={ caption } />
+				) }
+			</figure>
+		);
+	},
+};
+
+const deprecated = [ v1 ];
+
+export default deprecated;

package/src/video/edit.js

@@ -14,6 +14,7 @@ import {
 	PanelBody,
 	Spinner,
 	Placeholder,
+	ToolbarButton,
 } from '@wordpress/components';
 import {
 	BlockControls,
@@ -28,11 +29,11 @@ import {
 	store as blockEditorStore,
 	__experimentalGetElementClassName,
 } from '@wordpress/block-editor';
-import { useRef, useEffect } from '@wordpress/element';
+import { useRef, useEffect, useState, useCallback } from '@wordpress/element';
 import { __, sprintf } from '@wordpress/i18n';
-import { useInstanceId } from '@wordpress/compose';
+import { useInstanceId, usePrevious } from '@wordpress/compose';
 import { useDispatch, useSelect } from '@wordpress/data';
-import { video as icon } from '@wordpress/icons';
+import { video as icon, caption as captionIcon } from '@wordpress/icons';
 import { createBlock, getDefaultBlockName } from '@wordpress/blocks';
 import { store as noticesStore } from '@wordpress/notices';
 
@@ -76,6 +77,8 @@ function VideoEdit( {
 	const videoPlayer = useRef();
 	const posterImageButton = useRef();
 	const { id, caption, controls, poster, src, tracks } = attributes;
+	const prevCaption = usePrevious( caption );
+	const [ showCaption, setShowCaption ] = useState( !! caption );
 	const isTemporaryVideo = ! id && isBlobURL( src );
 	const mediaUpload = useSelect(
 		( select ) => select( blockEditorStore ).getSettings().mediaUpload,
@@ -103,6 +106,30 @@ function VideoEdit( {
 		}
 	}, [ poster ] );
 
+	// We need to show the caption when changes come from
+	// history navigation(undo/redo).
+	useEffect( () => {
+		if ( caption && ! prevCaption ) {
+			setShowCaption( true );
+		}
+	}, [ caption, prevCaption ] );
+
+	// Focus the caption when we click to add one.
+	const captionRef = useCallback(
+		( node ) => {
+			if ( node && ! caption ) {
+				node.focus();
+			}
+		},
+		[ caption ]
+	);
+
+	useEffect( () => {
+		if ( ! isSelected && ! caption ) {
+			setShowCaption( false );
+		}
+	}, [ isSelected, caption ] );
+
 	function onSelectVideo( media ) {
 		if ( ! media || ! media.url ) {
 			// In this case there was an error
@@ -112,6 +139,7 @@ function VideoEdit( {
 				src: undefined,
 				id: undefined,
 				poster: undefined,
+				caption: undefined,
 			} );
 			return;
 		}
@@ -123,6 +151,7 @@ function VideoEdit( {
 			id: media.id,
 			poster:
 				media.image?.src !== media.icon ? media.image?.src : undefined,
+			caption: media.caption,
 		} );
 	}
 
@@ -186,6 +215,23 @@ function VideoEdit( {
 	return (
 		<>
 			<BlockControls group="block">
+				<ToolbarButton
+					onClick={ () => {
+						setShowCaption( ! showCaption );
+						if ( showCaption && caption ) {
+							setAttributes( { caption: undefined } );
+						}
+					} }
+					icon={ captionIcon }
+					isPressed={ showCaption }
+					label={
+						showCaption
+							? __( 'Remove caption' )
+							: __( 'Add caption' )
+					}
+				/>
+			</BlockControls>
+			<BlockControls>
 				<TracksEditor
 					tracks={ tracks }
 					onChange={ ( newTracks ) => {
@@ -278,26 +324,28 @@ function VideoEdit( {
 					</video>
 				</Disabled>
 				{ isTemporaryVideo && <Spinner /> }
-				{ ( ! RichText.isEmpty( caption ) || isSelected ) && (
-					<RichText
-						tagName="figcaption"
-						className={ __experimentalGetElementClassName(
-							'caption'
-						) }
-						aria-label={ __( 'Video caption text' ) }
-						placeholder={ __( 'Add caption' ) }
-						value={ caption }
-						onChange={ ( value ) =>
-							setAttributes( { caption: value } )
-						}
-						inlineToolbar
-						__unstableOnSplitAtEnd={ () =>
-							insertBlocksAfter(
-								createBlock( getDefaultBlockName() )
-							)
-						}
-					/>
-				) }
+				{ showCaption &&
+					( ! RichText.isEmpty( caption ) || isSelected ) && (
+						<RichText
+							tagName="figcaption"
+							className={ __experimentalGetElementClassName(
+								'caption'
+							) }
+							aria-label={ __( 'Video caption text' ) }
+							ref={ captionRef }
+							placeholder={ __( 'Add caption' ) }
+							value={ caption }
+							onChange={ ( value ) =>
+								setAttributes( { caption: value } )
+							}
+							inlineToolbar
+							__unstableOnSplitAtEnd={ () =>
+								insertBlocksAfter(
+									createBlock( getDefaultBlockName() )
+								)
+							}
+						/>
+					) }
 			</figure>
 		</>
 	);

package/src/video/index.js

@@ -8,6 +8,7 @@ import { video as icon } from '@wordpress/icons';
  * Internal dependencies
  */
 import initBlock from '../utils/init-block';
+import deprecated from './deprecated';
 import edit from './edit';
 import metadata from './block.json';
 import save from './save';
@@ -27,6 +28,7 @@ export const settings = {
 		},
 	},
 	transforms,
+	deprecated,
 	edit,
 	save,
 };

package/src/video/tracks-editor.js

@@ -7,11 +7,9 @@ import {
 	MenuItem,
 	FormFileUpload,
 	MenuGroup,
+	ToolbarGroup,
 	ToolbarButton,
 	Dropdown,
-	SVG,
-	Rect,
-	Path,
 	Button,
 	TextControl,
 	SelectControl,
@@ -38,23 +36,6 @@ const KIND_OPTIONS = [
 	{ label: __( 'Metadata' ), value: 'metadata' },
 ];
 
-const captionIcon = (
-	<SVG width="18" height="14" viewBox="0 0 18 14" role="img" fill="none">
-		<Rect
-			x="0.75"
-			y="0.75"
-			width="16.5"
-			height="12.5"
-			rx="1.25"
-			stroke="black"
-			strokeWidth="1.5"
-			fill="none"
-		/>
-		<Path d="M3 7H15" stroke="black" strokeWidth="1.5" />
-		<Path d="M3 10L15 10" stroke="black" strokeWidth="1.5" />
-	</SVG>
-);
-
 function TrackList( { tracks, onEditPress } ) {
 	let content;
 	if ( tracks.length === 0 ) {
@@ -200,14 +181,17 @@ export default function TracksEditor( { tracks = [], onChange } ) {
 		<Dropdown
 			contentClassName="block-library-video-tracks-editor"
 			renderToggle={ ( { isOpen, onToggle } ) => (
-				<ToolbarButton
-					label={ __( 'Text tracks' ) }
-					showTooltip
-					aria-expanded={ isOpen }
-					aria-haspopup="true"
-					onClick={ onToggle }
-					icon={ captionIcon }
-				/>
+				<ToolbarGroup>
+					<ToolbarButton
+						label={ __( 'Text tracks' ) }
+						showTooltip
+						aria-expanded={ isOpen }
+						aria-haspopup="true"
+						onClick={ onToggle }
+					>
+						{ __( 'Text tracks' ) }
+					</ToolbarButton>
+				</ToolbarGroup>
 			) }
 			renderContent={ () => {
 				if ( trackBeingEdited !== null ) {