@wordpress/block-library 10.3.0 → 10.4.0

package/src/playlist/test/transforms.js

@@ -0,0 +1,189 @@
+import {
+	createBlock,
+	getPossibleBlockTransformations,
+	registerBlockType,
+	switchToBlockType,
+	unregisterBlockType,
+} from '@wordpress/blocks';
+import {
+	metadata as playlistMetadata,
+	settings as playlistSettings,
+} from '../index';
+import playlistTrackMetadata from '../../playlist-track/block.json';
+import audioMetadata from '../../audio/block.json';
+
+describe( 'Playlist transforms', () => {
+	beforeAll( () => {
+		registerBlockType( playlistMetadata, playlistSettings );
+		registerBlockType( playlistTrackMetadata, { edit: () => null } );
+		registerBlockType( audioMetadata, { edit: () => null } );
+	} );
+
+	afterAll( () => {
+		unregisterBlockType( playlistMetadata.name );
+		unregisterBlockType( playlistTrackMetadata.name );
+		unregisterBlockType( audioMetadata.name );
+	} );
+
+	it( 'converts an Audio block into a Playlist with its audio as a track', () => {
+		const audio = createBlock( 'core/audio', {
+			blob: 'blob:https://example.com/track',
+			caption: 'A playlist caption',
+			id: 123,
+			src: 'https://example.com/track.mp3',
+		} );
+
+		const [ playlist ] = switchToBlockType( audio, 'core/playlist' );
+
+		expect( playlist ).toMatchObject( {
+			name: 'core/playlist',
+			attributes: {
+				caption: 'A playlist caption',
+			},
+		} );
+		expect( playlist.innerBlocks ).toEqual( [
+			expect.objectContaining( {
+				name: 'core/playlist-track',
+				attributes: expect.objectContaining( {
+					blob: 'blob:https://example.com/track',
+					id: 123,
+					src: 'https://example.com/track.mp3',
+					title: 'track.mp3',
+				} ),
+			} ),
+		] );
+	} );
+
+	it( 'converts multiple selected Audio blocks into one Playlist', () => {
+		const audioBlocks = [
+			createBlock( 'core/audio', {
+				blob: 'blob:https://example.com/first-track',
+				id: 123,
+				src: 'https://example.com/first-track.mp3',
+			} ),
+			createBlock( 'core/audio', {
+				blob: 'blob:https://example.com/second-track',
+				src: 'https://example.com/second-track.mp3',
+			} ),
+		];
+
+		const [ playlist ] = switchToBlockType( audioBlocks, 'core/playlist' );
+
+		expect( playlist.innerBlocks ).toEqual( [
+			expect.objectContaining( {
+				name: 'core/playlist-track',
+				attributes: expect.objectContaining( {
+					blob: 'blob:https://example.com/first-track',
+					id: 123,
+					src: 'https://example.com/first-track.mp3',
+					title: 'first-track.mp3',
+				} ),
+			} ),
+			expect.objectContaining( {
+				name: 'core/playlist-track',
+				attributes: expect.objectContaining( {
+					blob: 'blob:https://example.com/second-track',
+					src: 'https://example.com/second-track.mp3',
+					title: 'second-track.mp3',
+				} ),
+			} ),
+		] );
+	} );
+
+	it( 'preserves shared layout attributes when converting Audio to Playlist', () => {
+		const audio = createBlock( 'core/audio', {
+			align: 'wide',
+			anchor: 'my-audio',
+			style: {
+				spacing: {
+					margin: { top: '1rem' },
+					padding: { bottom: '2rem' },
+				},
+			},
+		} );
+
+		const [ playlist ] = switchToBlockType( audio, 'core/playlist' );
+
+		expect( playlist.attributes ).toMatchObject( {
+			align: 'wide',
+			anchor: 'my-audio',
+			style: {
+				spacing: {
+					margin: { top: '1rem' },
+					padding: { bottom: '2rem' },
+				},
+			},
+		} );
+	} );
+
+	it( 'converts Audio without an attachment ID', () => {
+		const audio = createBlock( 'core/audio', {
+			src: 'https://example.com/track.mp3',
+		} );
+
+		const [ playlist ] = switchToBlockType( audio, 'core/playlist' );
+
+		expect( playlist.innerBlocks[ 0 ].attributes ).not.toHaveProperty(
+			'id'
+		);
+	} );
+
+	it( 'converts a one-track Playlist into Audio', () => {
+		const playlist = createBlock(
+			'core/playlist',
+			{
+				align: 'wide',
+				anchor: 'my-playlist',
+				caption: 'A playlist caption',
+				style: { spacing: { margin: { top: '1rem' } } },
+			},
+			[
+				createBlock( 'core/playlist-track', {
+					blob: 'blob:https://example.com/track',
+					id: 123,
+					src: 'https://example.com/track.mp3',
+				} ),
+			]
+		);
+
+		expect( getPossibleBlockTransformations( [ playlist ] ) ).toEqual(
+			expect.arrayContaining( [
+				expect.objectContaining( { name: 'core/audio' } ),
+			] )
+		);
+
+		const [ audio ] = switchToBlockType( playlist, 'core/audio' );
+
+		expect( audio ).toMatchObject( {
+			name: 'core/audio',
+			attributes: {
+				align: 'wide',
+				anchor: 'my-playlist',
+				blob: 'blob:https://example.com/track',
+				id: 123,
+				src: 'https://example.com/track.mp3',
+				style: { spacing: { margin: { top: '1rem' } } },
+			},
+		} );
+		expect( audio.attributes.caption.toString() ).toBe(
+			'A playlist caption'
+		);
+	} );
+
+	it( 'does not offer Playlist to Audio for multiple tracks', () => {
+		const playlist = createBlock( 'core/playlist', {}, [
+			createBlock( 'core/playlist-track', {
+				src: 'https://example.com/first-track.mp3',
+			} ),
+			createBlock( 'core/playlist-track', {
+				src: 'https://example.com/second-track.mp3',
+			} ),
+		] );
+
+		expect( getPossibleBlockTransformations( [ playlist ] ) ).not.toEqual(
+			expect.arrayContaining( [
+				expect.objectContaining( { name: 'core/audio' } ),
+			] )
+		);
+	} );
+} );

package/src/playlist/transforms.js

@@ -0,0 +1,46 @@
+import { createBlock } from '@wordpress/blocks';
+import { getFilename } from '@wordpress/url';
+
+const transforms = {
+	from: [
+		{
+			type: 'block',
+			isMultiBlock: true,
+			blocks: [ 'core/audio' ],
+			transform: ( attributes ) =>
+				createBlock(
+					'core/playlist',
+					{ ...attributes[ 0 ] },
+					attributes.map( ( { blob, id, src } ) =>
+						createBlock( 'core/playlist-track', {
+							blob,
+							id,
+							src,
+							title: getFilename( src ),
+						} )
+					)
+				),
+		},
+	],
+	to: [
+		{
+			type: 'block',
+			blocks: [ 'core/audio' ],
+			isMatch: ( {}, block ) =>
+				block.innerBlocks.length === 1 &&
+				block.innerBlocks[ 0 ].name === 'core/playlist-track',
+			transform: ( { style, ...attributes }, [ track ] ) =>
+				createBlock( 'core/audio', {
+					...attributes,
+					...( style?.spacing && {
+						style: { spacing: style.spacing },
+					} ),
+					blob: track.attributes.blob,
+					id: track.attributes.id,
+					src: track.attributes.src,
+				} ),
+		},
+	],
+};
+
+export default transforms;

package/src/playlist/utils.js

@@ -1,6 +1,3 @@
-/**
- * WordPress dependencies
- */
 import { __ } from '@wordpress/i18n';
 import { decodeEntities } from '@wordpress/html-entities';
 

package/src/playlist/view.js

@@ -1,11 +1,4 @@
-/**
- * WordPress dependencies
- */
 import { store, getContext, getElement } from '@wordpress/interactivity';
-
-/**
- * Internal dependencies
- */
 import {
 	initWaveformPlayer,
 	logPlayError,

package/src/playlist-track/edit.js

@@ -1,6 +1,3 @@
-/**
- * WordPress dependencies
- */
 import { isBlobURL } from '@wordpress/blob';
 import { useContext, useEffect, useRef, useState } from '@wordpress/element';
 import {
@@ -28,10 +25,6 @@ import { store as noticesStore } from '@wordpress/notices';
 import { __ } from '@wordpress/i18n';
 import { audio as icon } from '@wordpress/icons';
 import { __unstableStripHTML as stripHTML } from '@wordpress/dom';
-
-/**
- * Internal dependencies
- */
 import { PlaylistContext } from '../playlist/context';
 import { getTrackAttributes, getTrackImageAttributes } from '../playlist/utils';
 import { useUploadMediaFromBlobURL } from '../utils/hooks';
@@ -53,7 +46,7 @@ const PlaylistTrackEdit = ( {
 	const showImages = context?.showImages ?? true;
 	const imageButton = useRef();
 	const blockProps = useBlockProps();
-	const { currentTrackClientId, setCurrentTrackClientId, addTracks } =
+	const { currentTrackClientId, setCurrentTrackClientId } =
 		useContext( PlaylistContext );
 	const { createErrorNotice } = useDispatch( noticesStore );
 	function onUploadError( message ) {
@@ -163,20 +156,6 @@ const PlaylistTrackEdit = ( {
 					variant="toolbar"
 				/>
 			</BlockControls>
-			{ !! addTracks && (
-				<BlockControls group="block">
-					<MediaReplaceFlow
-						name={ __( 'Add' ) }
-						onSelect={ addTracks }
-						accept="audio/*"
-						multiple
-						handleUpload={ false }
-						allowedTypes={ ALLOWED_MEDIA_TYPES }
-						onError={ onUploadError }
-						variant="toolbar"
-					/>
-				</BlockControls>
-			) }
 			<InspectorControls>
 				<PanelBody title={ __( 'Settings' ) }>
 					<TextControl

package/src/playlist-track/index.js

@@ -1,11 +1,4 @@
-/**
- * WordPress dependencies
- */
-import { audio as icon } from '@wordpress/icons';
-
-/**
- * Internal dependencies
- */
+import { playlistTrack as icon } from '@wordpress/icons';
 import initBlock from '../utils/init-block';
 import metadata from './block.json';
 import edit from './edit';

package/src/playlist-track/init.js

@@ -1,6 +1,3 @@
-/**
- * Internal dependencies
- */
 import { init } from './';
 
 export default init();

package/src/playlist-track/test/edit.js

@@ -1,16 +1,5 @@
-/**
- * External dependencies
- */
-import { fireEvent, render, screen, within } from '@testing-library/react';
-
-/**
- * WordPress dependencies
- */
+import { fireEvent, render, screen } from '@testing-library/react';
 import { useDispatch } from '@wordpress/data';
-
-/**
- * Internal dependencies
- */
 import PlaylistTrackEdit from '../edit';
 import { PlaylistContext } from '../../playlist/context';
 import { useUploadMediaFromBlobURL } from '../../utils/hooks';
@@ -18,9 +7,7 @@ import { useUploadMediaFromBlobURL } from '../../utils/hooks';
 let mockMediaReplaceFlowProps;
 
 jest.mock( '@wordpress/block-editor', () => ( {
-	BlockControls: ( { children, group = 'default' } ) => (
-		<div data-testid={ `block-controls-${ group }` }>{ children }</div>
-	),
+	BlockControls: ( { children } ) => <div>{ children }</div>,
 	BlockIcon: () => <span />,
 	InspectorControls: ( { children } ) => <div>{ children }</div>,
 	MediaPlaceholder: () => <div />,
@@ -80,14 +67,12 @@ const defaultAttributes = {
 function renderEdit( props = {} ) {
 	const setAttributes = jest.fn();
 	const setCurrentTrackClientId = props.setCurrentTrackClientId || jest.fn();
-	const addTracks = props.addTracks;
 
 	render(
 		<PlaylistContext.Provider
 			value={ {
 				currentTrackClientId: props.currentTrackClientId ?? null,
 				setCurrentTrackClientId,
-				addTracks,
 			} }
 		>
 			<PlaylistTrackEdit
@@ -195,32 +180,6 @@ describe( 'PlaylistTrackEdit', () => {
 		);
 	} );
 
-	it( 'allows tracks to be added from the track toolbar', () => {
-		const addTracks = jest.fn();
-		renderEdit( { addTracks } );
-
-		fireEvent.click( screen.getByRole( 'button', { name: 'Add' } ) );
-
-		expect( addTracks ).toHaveBeenCalledWith( {} );
-	} );
-
-	it( 'renders the add track control in a different toolbar group from replace', () => {
-		renderEdit( { addTracks: jest.fn() } );
-
-		expect(
-			within( screen.getByTestId( 'block-controls-other' ) ).getByRole(
-				'button',
-				{ name: 'Replace' }
-			)
-		).toBeInTheDocument();
-		expect(
-			within( screen.getByTestId( 'block-controls-block' ) ).getByRole(
-				'button',
-				{ name: 'Add' }
-			)
-		).toBeInTheDocument();
-	} );
-
 	it( 'preserves the current track source when a replacement upload fails', () => {
 		const { setAttributes } = renderEdit();
 

package/src/post-author/edit.js

@@ -1,11 +1,4 @@
-/**
- * External dependencies
- */
 import clsx from 'clsx';
-
-/**
- * WordPress dependencies
- */
 import {
 	AlignmentControl,
 	BlockControls,
@@ -32,10 +25,6 @@ import { useMemo, useState } from '@wordpress/element';
 import { decodeEntities } from '@wordpress/html-entities';
 import { __, sprintf } from '@wordpress/i18n';
 import { store as blocksStore } from '@wordpress/blocks';
-
-/**
- * Internal dependencies
- */
 import { recreateWithRecommendedBlocks } from './utils';
 import {
 	useDefaultAvatar,

package/src/post-author/index.js

@@ -1,12 +1,5 @@
-/**
- * WordPress dependencies
- */
 import { __ } from '@wordpress/i18n';
 import { postAuthor as icon } from '@wordpress/icons';
-
-/**
- * Internal dependencies
- */
 import initBlock from '../utils/init-block';
 import metadata from './block.json';
 import edit from './edit';

package/src/post-author/init.js

@@ -1,6 +1,3 @@
-/**
- * Internal dependencies
- */
 import { init } from './';
 
 export default init();

package/src/post-author/utils.js

@@ -1,13 +1,6 @@
-/**
- * WordPress dependencies
- */
 import { createBlock } from '@wordpress/blocks';
 import { __ } from '@wordpress/i18n';
 import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
-
-/**
- * Internal dependencies
- */
 import { unlock } from '../lock-unlock';
 
 const { cleanEmptyObject } = unlock( blockEditorPrivateApis );

package/src/post-author-biography/deprecated.js

@@ -1,6 +1,3 @@
-/**
- * Internal dependencies
- */
 import migrateTextAlign from '../utils/migrate-text-align';
 
 const v1 = {

package/src/post-author-biography/edit.js

@@ -1,14 +1,7 @@
-/**
- * WordPress dependencies
- */
 import { useBlockProps } from '@wordpress/block-editor';
 import { useSelect } from '@wordpress/data';
 import { __ } from '@wordpress/i18n';
 import { store as coreStore } from '@wordpress/core-data';
-
-/**
- * Internal dependencies
- */
 import useDeprecatedTextAlign from '../utils/deprecated-text-align-attributes';
 
 function PostAuthorBiographyEdit( props ) {

package/src/post-author-biography/index.js

@@ -1,11 +1,4 @@
-/**
- * WordPress dependencies
- */
 import { postAuthor as icon } from '@wordpress/icons';
-
-/**
- * Internal dependencies
- */
 import initBlock from '../utils/init-block';
 import metadata from './block.json';
 import edit from './edit';

package/src/post-author-biography/init.js

@@ -1,6 +1,3 @@
-/**
- * Internal dependencies
- */
 import { init } from './';
 
 export default init();

package/src/post-author-biography/style.scss

@@ -2,4 +2,5 @@
 	// This block has customizable padding, border-box makes that more predictable.
 	box-sizing: border-box;
 	white-space: pre-wrap;
+	overflow-wrap: break-word; // Break long strings of text without spaces so they don't overflow the block.
 }

package/src/post-author-name/deprecated.js

@@ -1,6 +1,3 @@
-/**
- * Internal dependencies
- */
 import migrateTextAlign from '../utils/migrate-text-align';
 
 const v1 = {

package/src/post-author-name/edit.js

@@ -1,6 +1,3 @@
-/**
- * WordPress dependencies
- */
 import { useBlockProps, InspectorControls } from '@wordpress/block-editor';
 import { useSelect } from '@wordpress/data';
 import { __, sprintf } from '@wordpress/i18n';
@@ -10,15 +7,7 @@ import {
 	__experimentalToolsPanel as ToolsPanel,
 	__experimentalToolsPanelItem as ToolsPanelItem,
 } from '@wordpress/components';
-
-/**
- * Internal dependencies
- */
 import { useToolsPanelDropdownMenuProps } from '../utils/hooks';
-
-/**
- * Internal dependencies
- */
 import useDeprecatedTextAlign from '../utils/deprecated-text-align-attributes';
 
 function PostAuthorNameEdit( props ) {

package/src/post-author-name/index.js

@@ -1,11 +1,4 @@
-/**
- * WordPress dependencies
- */
 import { postAuthor as icon } from '@wordpress/icons';
-
-/**
- * Internal dependencies
- */
 import initBlock from '../utils/init-block';
 import metadata from './block.json';
 import edit from './edit';

package/src/post-author-name/init.js

@@ -1,6 +1,3 @@
-/**
- * Internal dependencies
- */
 import { init } from './';
 
 export default init();

package/src/post-author-name/transforms.js

@@ -1,6 +1,3 @@
-/**
- * WordPress dependencies
- */
 import { createBlock } from '@wordpress/blocks';
 
 const transforms = {

package/src/post-comment/edit.js

@@ -1,27 +1,13 @@
-/**
- * WordPress dependencies
- */
 import { __, _x } from '@wordpress/i18n';
 import { Placeholder, TextControl, Button } from '@wordpress/components';
 import { useState } from '@wordpress/element';
 import { blockDefault } from '@wordpress/icons';
 import { useBlockProps, useInnerBlocksProps } from '@wordpress/block-editor';
 
-const TEMPLATE = [
-	[ 'core/avatar' ],
-	[ 'core/comment-author-name' ],
-	[ 'core/comment-date' ],
-	[ 'core/comment-content' ],
-	[ 'core/comment-reply-link' ],
-	[ 'core/comment-edit-link' ],
-];
-
 export default function Edit( { attributes: { commentId }, setAttributes } ) {
 	const [ commentIdInput, setCommentIdInput ] = useState( commentId );
 	const blockProps = useBlockProps();
-	const innerBlocksProps = useInnerBlocksProps( blockProps, {
-		template: TEMPLATE,
-	} );
+	const innerBlocksProps = useInnerBlocksProps( blockProps );
 
 	if ( ! commentId ) {
 		return (

package/src/post-comment/index.js

@@ -1,11 +1,4 @@
-/**
- * WordPress dependencies
- */
 import { comment as icon } from '@wordpress/icons';
-
-/**
- * Internal dependencies
- */
 import initBlock from '../utils/init-block';
 import metadata from './block.json';
 import edit from './edit';
@@ -14,8 +7,18 @@ import save from './save';
 const { name } = metadata;
 export { metadata, name };
 
+const TEMPLATE = [
+	[ 'core/avatar' ],
+	[ 'core/comment-author-name' ],
+	[ 'core/comment-date' ],
+	[ 'core/comment-content' ],
+	[ 'core/comment-reply-link' ],
+	[ 'core/comment-edit-link' ],
+];
+
 export const settings = {
 	icon,
+	template: TEMPLATE,
 	edit,
 	save,
 };

package/src/post-comment/init.js

@@ -1,6 +1,3 @@
-/**
- * Internal dependencies
- */
 import { init } from './';
 
 export default init();

package/src/post-comment/save.js

@@ -1,6 +1,3 @@
-/**
- * WordPress dependencies
- */
 import { useInnerBlocksProps, useBlockProps } from '@wordpress/block-editor';
 
 export default function save() {

package/src/post-comments-count/deprecated.js

@@ -1,6 +1,3 @@
-/**
- * Internal dependencies
- */
 import migrateTextAlign from '../utils/migrate-text-align';
 
 const v1 = {

package/src/post-comments-count/edit.js

@@ -1,6 +1,3 @@
-/**
- * WordPress dependencies
- */
 import { useBlockProps } from '@wordpress/block-editor';
 import { useState, useEffect } from '@wordpress/element';
 import apiFetch from '@wordpress/api-fetch';

package/src/post-comments-count/index.js

@@ -1,11 +1,4 @@
-/**
- * WordPress dependencies
- */
 import { postCommentsCount as icon } from '@wordpress/icons';
-
-/**
- * Internal dependencies
- */
 import initBlock from '../utils/init-block';
 import metadata from './block.json';
 import edit from './edit';