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

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

@@ -0,0 +1,276 @@
+/**
+ * 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/image/test/use-open-image-media-editor-modal.js

@@ -1,7 +1,3 @@
-/**
- * @jest-environment jsdom
- */
-
 /**
  * External dependencies
  */
@@ -109,6 +105,25 @@ describe( 'useOpenImageMediaEditorModal', () => {
 		jest.clearAllMocks();
 	} );
 
+	it( 'returns no opener when the media editor modal setting is unavailable', () => {
+		useRegistry.mockReturnValue( createRegistry() );
+		mockMediaEditorModalSetting( undefined );
+
+		const { result } = renderHook( () =>
+			useOpenImageMediaEditorModal( {
+				attributes: {
+					id: 1,
+					url: 'original.jpg',
+					alt: '',
+					caption: '',
+				},
+				setAttributes: jest.fn(),
+			} )
+		);
+
+		expect( result.current ).toBeUndefined();
+	} );
+
 	it( 'passes an onClose handler for returning focus when the media editor closes', async () => {
 		const cropButton = document.createElement( 'button' );
 		const otherButton = document.createElement( 'button' );

package/src/index.js

@@ -289,8 +289,6 @@ const getAllBlocks = () => {
 		blocks.push( playlistTrack );
 	}
 
-	// Always register the classic block. Inserter availability is controlled
-	// by the block's `supports.inserter` value in `freeform/init`.
 	blocks.push( classic );
 
 	return blocks.filter( Boolean );

package/src/latest-comments/edit.js

@@ -114,7 +114,6 @@ export default function LatestComments( { attributes, setAttributes, name } ) {
 						isShownByDefault
 					>
 						<SelectControl
-							__next40pxDefaultSize
 							label={ __( 'Display content' ) }
 							value={ displayContent }
 							options={ [
@@ -139,7 +138,6 @@ export default function LatestComments( { attributes, setAttributes, name } ) {
 						isShownByDefault
 					>
 						<RangeControl
-							__next40pxDefaultSize
 							label={ __( 'Number of comments' ) }
 							value={ commentsToShow }
 							onChange={ ( value ) =>

package/src/latest-posts/README.md

@@ -23,8 +23,6 @@ _Defined via the [`attributes`](https://developer.wordpress.org/block-editor/ref
 | `excerptLength` | `number` | `55` | — |
 | `displayAuthor` | `boolean` | `false` | — |
 | `displayPostDate` | `boolean` | `false` | — |
-| `postLayout` | `string` | `"list"` | — |
-| `columns` | `number` | `3` | — |
 | `order` | `string` | `"desc"` | — |
 | `orderBy` | `string` | `"date"` | — |
 | `displayFeaturedImage` | `boolean` | `false` | — |
@@ -41,12 +39,14 @@ _Defined via the [`supports`](https://developer.wordpress.org/block-editor/refer
 - [`anchor`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#anchor): `true`
 - [`align`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#align): `true`
 - [`html`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#html): `false`
+- [`layout`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#layout): `true`
 - [`color`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#color):
   - [`gradients`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#color-gradients): `true`
   - [`link`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#color-link): `true`
 - [`spacing`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#spacing):
   - `margin`: `true`
   - `padding`: `true`
+  - `blockGap`: `{"__experimentalDefault":"1.25em"}`
 - [`typography`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#typography):
   - [`fontSize`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#typography-fontsize): `true`
   - [`lineHeight`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#typography-lineheight): `true`

package/src/latest-posts/block.json

@@ -41,14 +41,6 @@
 			"type": "boolean",
 			"default": false
 		},
-		"postLayout": {
-			"type": "string",
-			"default": "list"
-		},
-		"columns": {
-			"type": "number",
-			"default": 3
-		},
 		"order": {
 			"type": "string",
 			"default": "desc"
@@ -86,6 +78,7 @@
 		"anchor": true,
 		"align": true,
 		"html": false,
+		"layout": true,
 		"color": {
 			"gradients": true,
 			"link": true,
@@ -97,7 +90,13 @@
 		},
 		"spacing": {
 			"margin": true,
-			"padding": true
+			"padding": true,
+			"blockGap": {
+				"__experimentalDefault": "1.25em"
+			},
+			"__experimentalDefaultControls": {
+				"blockGap": true
+			}
 		},
 		"typography": {
 			"fontSize": true,

package/src/latest-posts/constants.js

@@ -1,4 +1,3 @@
 export const MIN_EXCERPT_LENGTH = 10;
 export const MAX_EXCERPT_LENGTH = 100;
-export const MAX_POSTS_COLUMNS = 6;
 export const DEFAULT_EXCERPT_LENGTH = 55;

package/src/latest-posts/deprecated.js

@@ -3,12 +3,121 @@
  */
 import metadata from './block.json';
 
-const { attributes } = metadata;
+const currentSupports = {
+	anchor: true,
+	align: true,
+	color: {
+		gradients: true,
+		link: true,
+		__experimentalDefaultControls: {
+			background: true,
+			text: true,
+			link: true,
+		},
+	},
+	html: false,
+	layout: true,
+	spacing: {
+		margin: true,
+		padding: true,
+		blockGap: {
+			__experimentalDefault: '1.25em',
+		},
+		__experimentalDefaultControls: {
+			blockGap: true,
+		},
+	},
+	typography: {
+		fontSize: true,
+		lineHeight: true,
+		__experimentalFontFamily: true,
+		__experimentalFontWeight: true,
+		__experimentalFontStyle: true,
+		__experimentalTextTransform: true,
+		__experimentalTextDecoration: true,
+		__experimentalLetterSpacing: true,
+		__experimentalDefaultControls: {
+			fontSize: true,
+		},
+	},
+	__experimentalBorder: {
+		radius: true,
+		color: true,
+		width: true,
+		style: true,
+		__experimentalDefaultControls: {
+			radius: true,
+			color: true,
+			width: true,
+			style: true,
+		},
+	},
+	interactivity: {
+		clientNavigation: true,
+	},
+};
+
+const legacyLayoutAttributes = {
+	postLayout: {
+		type: 'string',
+		default: 'list',
+	},
+	columns: {
+		type: 'number',
+		default: 3,
+	},
+};
+
+const migrateCategories = ( oldAttributes ) => {
+	if (
+		! oldAttributes.categories ||
+		'string' !== typeof oldAttributes.categories
+	) {
+		return oldAttributes;
+	}
+
+	// This needs the full category object, not just the ID.
+	return {
+		...oldAttributes,
+		categories: [ { id: Number( oldAttributes.categories ) } ],
+	};
+};
+
+const migratePostLayout = ( oldAttributes ) => {
+	const { postLayout, columns, ...attributesWithoutLegacyLayout } =
+		oldAttributes;
+
+	if ( ! postLayout ) {
+		return oldAttributes;
+	}
+
+	return {
+		...attributesWithoutLegacyLayout,
+		layout: {
+			type: postLayout === 'grid' ? 'grid' : 'default',
+			...( postLayout === 'grid' && columns && { columnCount: columns } ),
+		},
+	};
+};
 
 export default [
 	{
 		attributes: {
-			...attributes,
+			...metadata.attributes,
+			...legacyLayoutAttributes,
+			categories: {
+				type: [ 'array', 'string' ],
+			},
+		},
+		supports: currentSupports,
+		migrate: ( oldAttributes ) =>
+			migratePostLayout( migrateCategories( oldAttributes ) ),
+		isEligible: ( { postLayout } ) => postLayout,
+		save: () => null,
+	},
+	{
+		attributes: {
+			...metadata.attributes,
 			categories: {
 				type: 'string',
 			},
@@ -17,13 +126,7 @@ export default [
 			align: true,
 			html: false,
 		},
-		migrate: ( oldAttributes ) => {
-			// This needs the full category object, not just the ID.
-			return {
-				...oldAttributes,
-				categories: [ { id: Number( oldAttributes.categories ) } ],
-			};
-		},
+		migrate: migrateCategories,
 		isEligible: ( { categories } ) =>
 			categories && 'string' === typeof categories,
 		save: () => null,