@wordpress/block-library 10.1.1-next.v.202607070741.0 → 10.2.0

package/src/image/test/animated-gif-convert-control.js

@@ -1,276 +0,0 @@
-/**
- * External dependencies
- */
-import { render, screen } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-
-/**
- * WordPress dependencies
- */
-import { useSelect, useDispatch } from '@wordpress/data';
-
-/**
- * Internal dependencies
- */
-import AnimatedGifConvertControl from '../animated-gif-convert-control';
-
-jest.mock( '@wordpress/block-editor', () => ( {
-	store: 'core/block-editor',
-	BlockControls: ( { children } ) => <div>{ children }</div>,
-} ) );
-
-jest.mock( '@wordpress/core-data', () => ( {
-	store: 'core',
-} ) );
-
-jest.mock( '@wordpress/data', () => ( {
-	useSelect: jest.fn(),
-	useDispatch: jest.fn(),
-	/*
-	 * Passthroughs needed because @wordpress/components transitively pulls in
-	 * the rich-text store, which registers via these helpers at import time.
-	 */
-	combineReducers: jest.fn( ( reducers ) => ( state = {}, action ) => {
-		const newState = {};
-		Object.keys( reducers ).forEach( ( key ) => {
-			newState[ key ] = reducers[ key ]( state[ key ], action );
-		} );
-		return newState;
-	} ),
-	createSelector: jest.fn( ( fn ) => fn ),
-	createRegistrySelector: jest.fn( ( fn ) => fn ),
-	createReduxStore: jest.fn( () => ( {} ) ),
-	register: jest.fn(),
-} ) );
-
-/*
- * core/video is not registered in this unit test, so stub createBlock with a
- * lightweight factory that preserves the name and attributes for assertion.
- */
-jest.mock( '@wordpress/blocks', () => ( {
-	createBlock: jest.fn( ( name, attributes ) => ( {
-		name,
-		attributes,
-		clientId: 'new-video-block',
-	} ) ),
-} ) );
-
-/**
- * Builds a `select` function that returns the given store mocks and records
- * whether the attachment record was requested.
- *
- * @param {Object}   options                 Options.
- * @param {string}   [options.rootBlockName] Block name of the block's root (e.g. 'core/gallery').
- * @param {Function} options.getEntityRecord Spy used for getEntityRecord.
- * @return {Function} A select() implementation.
- */
-function makeSelect( { rootBlockName = undefined, getEntityRecord } ) {
-	return ( storeName ) => {
-		if ( storeName === 'core/block-editor' ) {
-			return {
-				getBlockRootClientId: () =>
-					rootBlockName ? 'root-client-id' : undefined,
-				getBlockName: () => rootBlockName,
-			};
-		}
-		// core-data store.
-		return {
-			getEntityRecord: ( ...args ) => getEntityRecord( ...args ),
-		};
-	};
-}
-
-describe( 'AnimatedGifConvertControl', () => {
-	let replaceBlocks;
-	let getEntityRecord;
-
-	const companionRecord = {
-		source_url: 'https://example.com/wp-content/uploads/cat.gif',
-		media_details: {
-			animated_video: 'cat.mp4',
-			animated_video_poster: 'cat.jpg',
-			width: 320,
-			height: 240,
-		},
-	};
-
-	beforeEach( () => {
-		jest.clearAllMocks();
-		replaceBlocks = jest.fn();
-		getEntityRecord = jest.fn( () => companionRecord );
-		useDispatch.mockReturnValue( { replaceBlocks } );
-	} );
-
-	/*
-	 * Renders the control, running the real selector against a controlled
-	 * `select` so the gating logic (and any attachment fetch) is exercised.
-	 */
-	function renderControl( { attributes, select } ) {
-		useSelect.mockImplementation( ( mapSelect ) => mapSelect( select ) );
-		return render(
-			<AnimatedGifConvertControl
-				attributes={ attributes }
-				clientId="block-1"
-			/>
-		);
-	}
-
-	it( 'renders the "Display as video" button when a video companion exists', () => {
-		renderControl( {
-			attributes: {
-				id: 7,
-				url: 'https://example.com/wp-content/uploads/cat.gif',
-			},
-			select: makeSelect( { getEntityRecord } ),
-		} );
-
-		expect(
-			screen.getByRole( 'button', { name: 'Display as video' } )
-		).toBeVisible();
-		expect( getEntityRecord ).toHaveBeenCalledWith(
-			'postType',
-			'attachment',
-			7,
-			{ context: 'view' }
-		);
-	} );
-
-	it( 'still recognizes a GIF URL that carries a query string', () => {
-		renderControl( {
-			attributes: {
-				id: 7,
-				url: 'https://example.com/wp-content/uploads/cat.gif?ver=2',
-			},
-			select: makeSelect( { getEntityRecord } ),
-		} );
-
-		expect( getEntityRecord ).toHaveBeenCalledWith(
-			'postType',
-			'attachment',
-			7,
-			{ context: 'view' }
-		);
-		expect(
-			screen.getByRole( 'button', { name: 'Display as video' } )
-		).toBeVisible();
-	} );
-
-	it( 'does not fetch the attachment for a non-GIF image', () => {
-		const { container } = renderControl( {
-			attributes: {
-				id: 7,
-				url: 'https://example.com/wp-content/uploads/cat.jpg',
-			},
-			select: makeSelect( { getEntityRecord } ),
-		} );
-
-		expect( getEntityRecord ).not.toHaveBeenCalled();
-		expect( container ).toBeEmptyDOMElement();
-	} );
-
-	it( 'does not fetch the attachment when the block has no id', () => {
-		const { container } = renderControl( {
-			attributes: {
-				url: 'https://example.com/wp-content/uploads/cat.gif',
-			},
-			select: makeSelect( { getEntityRecord } ),
-		} );
-
-		expect( getEntityRecord ).not.toHaveBeenCalled();
-		expect( container ).toBeEmptyDOMElement();
-	} );
-
-	it( 'hides the control inside a gallery without fetching', () => {
-		const { container } = renderControl( {
-			attributes: {
-				id: 7,
-				url: 'https://example.com/wp-content/uploads/cat.gif',
-			},
-			select: makeSelect( {
-				rootBlockName: 'core/gallery',
-				getEntityRecord,
-			} ),
-		} );
-
-		expect( getEntityRecord ).not.toHaveBeenCalled();
-		expect( container ).toBeEmptyDOMElement();
-	} );
-
-	it( 'renders nothing when the attachment has no animated_video companion', () => {
-		const { container } = renderControl( {
-			attributes: {
-				id: 7,
-				url: 'https://example.com/wp-content/uploads/cat.gif',
-			},
-			select: makeSelect( {
-				getEntityRecord: jest.fn( () => ( {
-					source_url: 'https://example.com/x/cat.gif',
-					media_details: {},
-				} ) ),
-			} ),
-		} );
-
-		expect( container ).toBeEmptyDOMElement();
-	} );
-
-	it( 'replaces the image with a GIF-style video block built from the companion', async () => {
-		const user = userEvent.setup();
-		renderControl( {
-			attributes: {
-				id: 7,
-				url: 'https://example.com/wp-content/uploads/cat.gif',
-				caption: 'A cat',
-			},
-			select: makeSelect( { getEntityRecord } ),
-		} );
-
-		await user.click(
-			screen.getByRole( 'button', { name: 'Display as video' } )
-		);
-
-		expect( replaceBlocks ).toHaveBeenCalledTimes( 1 );
-		const [ replacedClientId, newBlock ] = replaceBlocks.mock.calls[ 0 ];
-		expect( replacedClientId ).toBe( 'block-1' );
-		expect( newBlock.name ).toBe( 'core/video' );
-		expect( newBlock.attributes ).toMatchObject( {
-			id: 7,
-			src: 'https://example.com/wp-content/uploads/cat.mp4',
-			poster: 'https://example.com/wp-content/uploads/cat.jpg',
-			caption: 'A cat',
-			controls: false,
-			loop: true,
-			autoplay: true,
-			muted: true,
-			playsInline: true,
-			width: 320,
-			height: 240,
-		} );
-	} );
-
-	it( 'carries align, anchor, className and margin onto the video block', async () => {
-		const user = userEvent.setup();
-		renderControl( {
-			attributes: {
-				id: 7,
-				url: 'https://example.com/wp-content/uploads/cat.gif',
-				align: 'wide',
-				anchor: 'cat-gif',
-				className: 'is-style-rounded',
-				style: { spacing: { margin: { top: '20px' } } },
-			},
-			select: makeSelect( { getEntityRecord } ),
-		} );
-
-		await user.click(
-			screen.getByRole( 'button', { name: 'Display as video' } )
-		);
-
-		const [ , newBlock ] = replaceBlocks.mock.calls[ 0 ];
-		expect( newBlock.attributes ).toMatchObject( {
-			align: 'wide',
-			anchor: 'cat-gif',
-			className: 'is-style-rounded',
-			style: { spacing: { margin: { top: '20px' } } },
-		} );
-	} );
-} );

package/src/utils/gif-conversion-attributes.js

@@ -1,30 +0,0 @@
-/**
- * Returns the subset of block attributes that should be carried over when
- * converting between the animated-GIF Image block and its converted Video
- * block (in either direction).
- *
- * The conversion swaps one block for another via `createBlock`, which would
- * otherwise drop everything the author set on the original block. This carries
- * the attributes both blocks support, so the conversion (and its reverse) keeps
- * them: block alignment, the HTML anchor, custom class names, and margin
- * spacing.
- *
- * Image-only attributes such as links (`href`/`linkDestination`), sizing
- * (`sizeSlug`/`scale`), and `border`/`shadow` styles are intentionally not
- * carried: the Video block has no equivalent, so copying them would leave
- * attributes the target block cannot represent.
- *
- * @param {Object} attributes Source block attributes.
- * @return {Object} Attributes to spread into the converted block.
- */
-export function getCarriedGifConversionAttributes( attributes ) {
-	const { align, anchor, className, style } = attributes;
-	const margin = style?.spacing?.margin;
-
-	return {
-		...( align && { align } ),
-		...( anchor && { anchor } ),
-		...( className && { className } ),
-		...( margin && { style: { spacing: { margin } } } ),
-	};
-}

package/src/utils/test/gif-conversion-attributes.js

@@ -1,60 +0,0 @@
-/**
- * Internal dependencies
- */
-import { getCarriedGifConversionAttributes } from '../gif-conversion-attributes';
-
-describe( 'getCarriedGifConversionAttributes', () => {
-	it( 'carries align, anchor, className and margin spacing', () => {
-		const result = getCarriedGifConversionAttributes( {
-			align: 'wide',
-			anchor: 'my-gif',
-			className: 'is-style-rounded',
-			style: { spacing: { margin: { top: '10px', bottom: '10px' } } },
-		} );
-
-		expect( result ).toEqual( {
-			align: 'wide',
-			anchor: 'my-gif',
-			className: 'is-style-rounded',
-			style: { spacing: { margin: { top: '10px', bottom: '10px' } } },
-		} );
-	} );
-
-	it( 'omits attributes that are not set', () => {
-		expect( getCarriedGifConversionAttributes( {} ) ).toEqual( {} );
-		expect(
-			getCarriedGifConversionAttributes( { align: 'full' } )
-		).toEqual( { align: 'full' } );
-	} );
-
-	it( 'carries only margin from style, dropping unsupported styles', () => {
-		const result = getCarriedGifConversionAttributes( {
-			style: {
-				spacing: {
-					margin: { top: '5px' },
-					padding: { top: '5px' },
-				},
-				border: { radius: '8px' },
-				shadow: 'var:preset|shadow|natural',
-			},
-		} );
-
-		// Only spacing.margin survives; padding/border/shadow are not carried
-		// because the converted block may not support them.
-		expect( result ).toEqual( {
-			style: { spacing: { margin: { top: '5px' } } },
-		} );
-	} );
-
-	it( 'does not carry image-only attributes such as links or sizing', () => {
-		const result = getCarriedGifConversionAttributes( {
-			align: 'center',
-			href: 'https://example.com',
-			linkDestination: 'custom',
-			sizeSlug: 'large',
-			scale: 'cover',
-		} );
-
-		expect( result ).toEqual( { align: 'center' } );
-	} );
-} );

package/src/video/gif-restore-control.js

@@ -1,92 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { ToolbarButton, ToolbarGroup } from '@wordpress/components';
-import {
-	BlockControls,
-	store as blockEditorStore,
-} from '@wordpress/block-editor';
-import { store as coreStore } from '@wordpress/core-data';
-import { createBlock } from '@wordpress/blocks';
-import { useDispatch, useSelect } from '@wordpress/data';
-import { image as imageIcon } from '@wordpress/icons';
-import { __ } from '@wordpress/i18n';
-
-/**
- * Internal dependencies
- */
-import { getCarriedGifConversionAttributes } from '../utils/gif-conversion-attributes';
-
-/**
- * Toolbar control that turns a converted GIF video block back into the original
- * animated GIF Image block.
- *
- * An animated GIF uploaded through the editor is converted to a muted, looping
- * video and presented as the Video block's "GIF" variation, while the original
- * GIF stays the underlying image attachment. This control switches the block
- * back to a `core/image` pointing at that GIF and opts the image out of being
- * re-converted.
- *
- * It only renders when the block's media is an image attachment (i.e. an
- * editor-converted GIF), so it never appears on regular videos that happen to
- * be muted and looping.
- *
- * @param {Object} props            Component props.
- * @param {Object} props.attributes Video block attributes.
- * @param {string} props.clientId   Block client ID.
- *
- * @return {Component|null} The control, or null when restoring does not apply.
- */
-export default function GifRestoreControl( { attributes, clientId } ) {
-	const { id, caption } = attributes;
-	const { replaceBlocks } = useDispatch( blockEditorStore );
-
-	// The original GIF is the underlying image attachment. Only offer the
-	// restore when the media resolves to an image (an editor-converted GIF),
-	// not when a regular video has simply been set to loop/autoplay/mute.
-	const gif = useSelect(
-		( select ) => {
-			if ( ! id ) {
-				return null;
-			}
-			const record = select( coreStore ).getEntityRecord(
-				'postType',
-				'attachment',
-				id,
-				{ context: 'view' }
-			);
-			if ( ! record?.mime_type?.startsWith( 'image/' ) ) {
-				return null;
-			}
-			return record;
-		},
-		[ id ]
-	);
-
-	if ( ! gif?.source_url ) {
-		return null;
-	}
-
-	function restoreToImage() {
-		replaceBlocks(
-			clientId,
-			createBlock( 'core/image', {
-				...getCarriedGifConversionAttributes( attributes ),
-				id,
-				url: gif.source_url,
-				alt: gif.alt_text || '',
-				caption,
-			} )
-		);
-	}
-
-	return (
-		<BlockControls group="other">
-			<ToolbarGroup>
-				<ToolbarButton icon={ imageIcon } onClick={ restoreToImage }>
-					{ __( 'Display as GIF' ) }
-				</ToolbarButton>
-			</ToolbarGroup>
-		</BlockControls>
-	);
-}