@wordpress/block-library 7.8.0 → 7.11.0

package/src/gallery/test/helpers.native.js

@@ -2,28 +2,14 @@
  * External dependencies
  */
 import {
-	act,
-	initializeEditor,
+	addBlock,
 	fireEvent,
-	waitFor,
-	within,
-	waitForStoreResolvers,
+	getBlock,
+	getInnerBlock,
+	initializeEditor,
+	triggerBlockListLayout,
 } from 'test/helpers';
 
-/**
- * WordPress dependencies
- */
-import {
-	requestMediaPicker,
-	subscribeMediaUpload,
-} from '@wordpress/react-native-bridge';
-import {
-	MEDIA_UPLOAD_STATE_UPLOADING,
-	MEDIA_UPLOAD_STATE_SUCCEEDED,
-	MEDIA_UPLOAD_STATE_FAILED,
-	MEDIA_UPLOAD_STATE_RESET,
-} from '@wordpress/block-editor';
-
 /**
  * Adds a Gallery block via the block picker.
  *
@@ -31,54 +17,10 @@ import {
  */
 export const addGalleryBlock = async () => {
 	const screen = await initializeEditor();
-	const { getByA11yLabel, getByTestId, getByText } = screen;
-
-	fireEvent.press( getByA11yLabel( 'Add block' ) );
-
-	const blockList = getByTestId( 'InserterUI-Blocks' );
-	// onScroll event used to force the FlatList to render all items
-	fireEvent.scroll( blockList, {
-		nativeEvent: {
-			contentOffset: { y: 0, x: 0 },
-			contentSize: { width: 100, height: 100 },
-			layoutMeasurement: { width: 100, height: 100 },
-		},
-	} );
-
-	fireEvent.press( await waitFor( () => getByText( 'Gallery' ) ) );
-
+	await addBlock( screen, 'Gallery' );
 	return screen;
 };
 
-/**
- * The gallery items are rendered via the FlatList of the inner block list.
- * In order to render the items of a FlatList, it's required to trigger the
- * "onLayout" event. Additionally, the call is wrapped over "waitForStoreResolvers"
- * because the gallery items request the media data associated with the image to
- * be rendered via the "getMedia" selector.
- *
- * @param {import('react-test-renderer').ReactTestInstance} galleryBlock    Gallery block instance to trigger layout event.
- * @param {Object}                                          [options]       Configuration options for the event.
- * @param {number}                                          [options.width] Width value to be passed to the event.
- */
-export const triggerGalleryLayout = async (
-	galleryBlock,
-	{ width = 320 } = {}
-) =>
-	waitForStoreResolvers( () =>
-		fireEvent(
-			within( galleryBlock ).getByTestId( 'block-list-wrapper' ),
-			'layout',
-			{
-				nativeEvent: {
-					layout: {
-						width,
-					},
-				},
-			}
-		)
-	);
-
 /**
  * Initialize the editor with HTML generated of Gallery block.
  *
@@ -106,12 +48,11 @@ export const initializeWithGalleryBlock = async ( {
 			useLocalUrl,
 		} );
 	const screen = await initializeEditor( { initialHtml } );
-	const { getByA11yLabel } = screen;
 
-	const galleryBlock = getByA11yLabel( /Gallery Block\. Row 1/ );
+	const galleryBlock = getBlock( screen, 'Gallery' );
 
 	if ( numberOfItems > 0 ) {
-		await triggerGalleryLayout( galleryBlock, { width } );
+		await triggerBlockListLayout( galleryBlock, { width } );
 	}
 
 	if ( selected ) {
@@ -125,109 +66,11 @@ export const initializeWithGalleryBlock = async ( {
  * Gets a gallery item within a Gallery block.
  *
  * @param {import('react-test-renderer').ReactTestInstance} galleryBlock Gallery block instance.
- * @param {number}                                          rowPosition  Row position within the Gallery block.
+ * @param {number}                                          rowIndex     Row position within the Gallery block.
  * @return {import('react-test-renderer').ReactTestInstance} Gallery item.
  */
-export const getGalleryItem = ( galleryBlock, rowPosition ) => {
-	return within( galleryBlock ).getByA11yLabel(
-		new RegExp( `Image Block\\. Row ${ rowPosition }` )
-	);
-};
-
-/**
- * Sets up the media upload mock functions for testing.
- *
- * @typedef {Object} MediaUploadMockFunctions
- * @property {Function} notifyUploadingState Notify uploading state for a media item.
- * @property {Function} notifySucceedState   Notify succeed state for a media item.
- * @property {Function} notifyFailedState    Notify failed state for a media item.
- * @property {Function} notifyResetState     Notify reset state for a media item.
- *
- * @return {MediaUploadMockFunctions} Notify state functions.
- */
-export const setupMediaUpload = () => {
-	const mediaUploadListeners = [];
-	subscribeMediaUpload.mockImplementation( ( callback ) => {
-		mediaUploadListeners.push( callback );
-		return { remove: jest.fn() };
-	} );
-	const notifyMediaUpload = ( payload ) =>
-		mediaUploadListeners.forEach( ( listener ) => listener( payload ) );
-
-	return {
-		notifyUploadingState: async ( mediaItem ) =>
-			act( async () => {
-				notifyMediaUpload( {
-					state: MEDIA_UPLOAD_STATE_UPLOADING,
-					mediaId: mediaItem.localId,
-					progress: 0.25,
-				} );
-			} ),
-		notifySucceedState: async ( mediaItem ) =>
-			act( async () => {
-				notifyMediaUpload( {
-					state: MEDIA_UPLOAD_STATE_SUCCEEDED,
-					mediaId: mediaItem.localId,
-					mediaUrl: mediaItem.serverUrl,
-					mediaServerId: mediaItem.serverId,
-				} );
-			} ),
-		notifyFailedState: async ( mediaItem ) =>
-			act( async () => {
-				notifyMediaUpload( {
-					state: MEDIA_UPLOAD_STATE_FAILED,
-					mediaId: mediaItem.localId,
-					progress: 0.5,
-				} );
-			} ),
-		notifyResetState: async ( mediaItem ) =>
-			act( async () => {
-				notifyMediaUpload( {
-					state: MEDIA_UPLOAD_STATE_RESET,
-					mediaId: mediaItem.localId,
-					progress: 0,
-				} );
-			} ),
-	};
-};
-
-/**
- *
- * Sets up Media Picker mock functions.
- *
- * @typedef {Object} MediaPickerMockFunctions
- * @property {Function} expectMediaPickerCall Checks if the request media picker function has been called with specific arguments.
- * @property {Function} mediaPickerCallback   Callback function to notify the media items picked from the media picker.
- *
- * @return {MediaPickerMockFunctions} Media picker mock functions.
- */
-export const setupMediaPicker = () => {
-	let mediaPickerCallback;
-	requestMediaPicker.mockImplementation(
-		( source, filter, multiple, callback ) => {
-			mediaPickerCallback = callback;
-		}
-	);
-	return {
-		expectMediaPickerCall: ( source, filter, multiple ) =>
-			expect( requestMediaPicker ).toHaveBeenCalledWith(
-				source,
-				filter,
-				multiple,
-				mediaPickerCallback
-			),
-		mediaPickerCallback: async ( ...mediaItems ) =>
-			act( async () =>
-				mediaPickerCallback(
-					mediaItems.map( ( { localId, localUrl } ) => ( {
-						type: 'image',
-						url: localUrl,
-						id: localId,
-					} ) )
-				)
-			),
-	};
-};
+export const getGalleryItem = ( galleryBlock, rowIndex ) =>
+	getInnerBlock( galleryBlock, 'Image', { rowIndex } );
 
 /**
  * Generates the HTML of a Gallery block.
@@ -261,33 +104,3 @@ export const generateGalleryBlock = (
     <figure class="wp-block-gallery has-nested-images columns-default is-cropped">${ galleryItems }</figure>
     <!-- /wp:gallery -->`;
 };
-
-/**
- * Sets the text of a caption.
- *
- * @param {import('react-test-renderer').ReactTestInstance} element Caption test instance.
- * @param {string}                                          text    Text to be set.
- */
-export const setCaption = ( element, text ) => {
-	fireEvent( element, 'focus' );
-	fireEvent( element, 'onChange', {
-		nativeEvent: {
-			eventCount: 1,
-			target: undefined,
-			text,
-		},
-	} );
-};
-
-/**
- * Opens the block settings of the current selected block.
- *
- * @param {import('@testing-library/react-native').RenderAPI} screen The Testing Library screen.
- */
-export const openBlockSettings = async ( screen ) => {
-	const { getByA11yLabel, getByTestId } = screen;
-	fireEvent.press( getByA11yLabel( 'Open Settings' ) );
-	await waitFor(
-		() => getByTestId( 'block-settings-modal' ).props.isVisible
-	);
-};

package/src/gallery/test/index.native.js

@@ -3,17 +3,22 @@
  */
 import {
 	act,
+	changeTextOfRichText,
+	fireEvent,
+	getBlock,
 	getEditorHtml,
 	initializeEditor,
-	fireEvent,
+	openBlockSettings,
+	setupCoreBlocks,
+	setupMediaPicker,
+	setupMediaUpload,
+	triggerBlockListLayout,
 	within,
 } from 'test/helpers';
 
 /**
  * WordPress dependencies
  */
-import { getBlockTypes, unregisterBlockType } from '@wordpress/blocks';
-import { registerCoreBlocks } from '@wordpress/block-library';
 import { Platform } from '@wordpress/element';
 import {
 	getOtherMediaOptions,
@@ -28,12 +33,7 @@ import {
 	addGalleryBlock,
 	initializeWithGalleryBlock,
 	getGalleryItem,
-	setupMediaUpload,
 	generateGalleryBlock,
-	setCaption,
-	setupMediaPicker,
-	triggerGalleryLayout,
-	openBlockSettings,
 } from './helpers';
 
 const media = [
@@ -57,23 +57,13 @@ const media = [
 	},
 ];
 
-beforeAll( () => {
-	// Register all core blocks
-	registerCoreBlocks();
-} );
-
-afterAll( () => {
-	// Clean up registered blocks
-	getBlockTypes().forEach( ( block ) => {
-		unregisterBlockType( block.name );
-	} );
-} );
+setupCoreBlocks();
 
 describe( 'Gallery block', () => {
 	it( 'inserts block', async () => {
-		const { getByA11yLabel } = await addGalleryBlock();
+		const screen = await addGalleryBlock();
 
-		expect( getByA11yLabel( /Gallery Block\. Row 1/ ) ).toBeVisible();
+		expect( getBlock( screen, 'Gallery' ) ).toBeVisible();
 		expect( getEditorHtml() ).toMatchSnapshot();
 	} );
 
@@ -183,7 +173,7 @@ describe( 'Gallery block', () => {
 		const captionField = within(
 			getByA11yLabel( /Gallery caption. Empty/ )
 		).getByPlaceholderText( 'Add caption' );
-		setCaption(
+		changeTextOfRichText(
 			captionField,
 			'<strong>Bold</strong> <em>italic</em> <s>strikethrough</s> gallery caption'
 		);
@@ -207,7 +197,7 @@ describe( 'Gallery block', () => {
 		// Set gallery item caption
 		const captionField =
 			within( galleryItem ).getByPlaceholderText( 'Add caption' );
-		setCaption(
+		changeTextOfRichText(
 			captionField,
 			'<strong>Bold</strong> <em>italic</em> <s>strikethrough</s> image caption'
 		);
@@ -234,7 +224,7 @@ describe( 'Gallery block', () => {
 		await mediaPickerCallback( media[ 0 ], media[ 1 ] );
 
 		// Check that gallery items are visible
-		await triggerGalleryLayout( galleryBlock );
+		await triggerBlockListLayout( galleryBlock );
 		const galleryItem1 = getGalleryItem( galleryBlock, 1 );
 		const galleryItem2 = getGalleryItem( galleryBlock, 2 );
 		expect( galleryItem1 ).toBeVisible();
@@ -272,7 +262,7 @@ describe( 'Gallery block', () => {
 		await mediaPickerCallback( media[ 0 ], media[ 1 ] );
 
 		// Check that gallery items are visible
-		await triggerGalleryLayout( galleryBlock );
+		await triggerBlockListLayout( galleryBlock );
 		const galleryItem1 = getGalleryItem( galleryBlock, 1 );
 		const galleryItem2 = getGalleryItem( galleryBlock, 2 );
 		expect( galleryItem1 ).toBeVisible();
@@ -326,7 +316,7 @@ describe( 'Gallery block', () => {
 		await mediaPickerCallback( media[ 0 ] );
 
 		// Check gallery item is visible
-		await triggerGalleryLayout( galleryBlock );
+		await triggerBlockListLayout( galleryBlock );
 		const galleryItem = getGalleryItem( galleryBlock, 1 );
 		expect( galleryItem ).toBeVisible();
 
@@ -382,7 +372,7 @@ describe( 'Gallery block', () => {
 		);
 
 		// Check that gallery items are visible
-		await triggerGalleryLayout( galleryBlock );
+		await triggerBlockListLayout( galleryBlock );
 		const galleryItem1 = getGalleryItem( galleryBlock, 1 );
 		const galleryItem2 = getGalleryItem( galleryBlock, 2 );
 		expect( galleryItem1 ).toBeVisible();
@@ -420,7 +410,7 @@ describe( 'Gallery block', () => {
 		await mediaPickerCallback( media[ 0 ], media[ 1 ] );
 
 		// Check that gallery items are visible
-		await triggerGalleryLayout( galleryBlock );
+		await triggerBlockListLayout( galleryBlock );
 		const galleryItem1 = getGalleryItem( galleryBlock, 1 );
 		const galleryItem2 = getGalleryItem( galleryBlock, 2 );
 		expect( galleryItem1 ).toBeVisible();
@@ -519,7 +509,7 @@ describe( 'Gallery block', () => {
 		await mediaPickerCallback( otherAppsMedia[ 0 ], otherAppsMedia[ 1 ] );
 
 		// Check that gallery items are visible
-		await triggerGalleryLayout( galleryBlock );
+		await triggerBlockListLayout( galleryBlock );
 		const galleryItem1 = getGalleryItem( galleryBlock, 1 );
 		const galleryItem2 = getGalleryItem( galleryBlock, 2 );
 		expect( galleryItem1 ).toBeVisible();

package/src/gallery/transforms.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { filter, every, toString } from 'lodash';
+import { filter, every } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -160,7 +160,7 @@ const transforms = {
 				return createBlock( 'core/gallery', {
 					images: validImages.map(
 						( { id, url, alt, caption } ) => ( {
-							id: toString( id ),
+							id: id.toString(),
 							url,
 							alt,
 							caption,
@@ -182,7 +182,7 @@ const transforms = {
 					shortcode: ( { named: { ids } } ) => {
 						if ( ! isGalleryV2Enabled() ) {
 							return parseShortcodeIds( ids ).map( ( id ) => ( {
-								id: toString( id ),
+								id: id.toString(),
 							} ) );
 						}
 					},
@@ -195,16 +195,6 @@ const transforms = {
 						}
 					},
 				},
-				shortCodeTransforms: {
-					type: 'array',
-					shortcode: ( { named: { ids } } ) => {
-						if ( isGalleryV2Enabled() ) {
-							return parseShortcodeIds( ids ).map( ( id ) => ( {
-								id: parseInt( id ),
-							} ) );
-						}
-					},
-				},
 				columns: {
 					type: 'number',
 					shortcode: ( { named: { columns = '3' } } ) => {
@@ -235,6 +225,31 @@ const transforms = {
 					},
 				},
 			},
+			transform( { named: { ids, columns = 3, link } } ) {
+				const imageIds = parseShortcodeIds( ids ).map( ( id ) =>
+					parseInt( id, 10 )
+				);
+
+				let linkTo = LINK_DESTINATION_NONE;
+				if ( link === 'post' ) {
+					linkTo = LINK_DESTINATION_ATTACHMENT;
+				} else if ( link === 'file' ) {
+					linkTo = LINK_DESTINATION_MEDIA;
+				}
+
+				const galleryBlock = createBlock(
+					'core/gallery',
+					{
+						columns: parseInt( columns, 10 ),
+						linkTo,
+					},
+					imageIds.map( ( imageId ) =>
+						createBlock( 'core/image', { id: imageId } )
+					)
+				);
+
+				return galleryBlock;
+			},
 			isMatch( { named } ) {
 				return undefined !== named.ids;
 			},

package/src/gallery/use-get-media.js

@@ -1,10 +1,11 @@
 /**
  * WordPress dependencies
  */
-import { useState } from '@wordpress/element';
 import { useSelect } from '@wordpress/data';
 import { store as coreStore } from '@wordpress/core-data';
 
+const EMPTY_IMAGE_MEDIA = [];
+
 /**
  * Retrieves the extended media info for each gallery image from the store. This is used to
  * determine which image size options are available for the current gallery.
@@ -14,42 +15,24 @@ import { store as coreStore } from '@wordpress/core-data';
  * @return {Array} An array of media info options for each gallery image.
  */
 export default function useGetMedia( innerBlockImages ) {
-	const [ currentImageMedia, setCurrentImageMedia ] = useState( [] );
-
-	const imageMedia = useSelect(
+	return useSelect(
 		( select ) => {
-			if ( ! innerBlockImages?.length ) {
-				return currentImageMedia;
-			}
-
 			const imageIds = innerBlockImages
 				.map( ( imageBlock ) => imageBlock.attributes.id )
 				.filter( ( id ) => id !== undefined );
 
 			if ( imageIds.length === 0 ) {
-				return currentImageMedia;
+				return EMPTY_IMAGE_MEDIA;
 			}
 
-			return select( coreStore ).getMediaItems( {
-				include: imageIds.join( ',' ),
-				per_page: imageIds.length,
-				orderby: 'include',
-			} );
+			return (
+				select( coreStore ).getMediaItems( {
+					include: imageIds.join( ',' ),
+					per_page: imageIds.length,
+					orderby: 'include',
+				} ) ?? EMPTY_IMAGE_MEDIA
+			);
 		},
 		[ innerBlockImages ]
 	);
-
-	if (
-		imageMedia?.length !== currentImageMedia?.length ||
-		imageMedia?.some(
-			( newImage ) =>
-				! currentImageMedia.find(
-					( currentImage ) => currentImage.id === newImage.id
-				)
-		)
-	) {
-		setCurrentImageMedia( imageMedia );
-		return imageMedia;
-	}
-	return currentImageMedia;
 }

package/src/gallery/use-get-media.native.js

@@ -0,0 +1,44 @@
+/**
+ * WordPress dependencies
+ */
+import { useSelect } from '@wordpress/data';
+import { store as coreStore } from '@wordpress/core-data';
+
+const EMPTY_IMAGE_MEDIA = [];
+
+/**
+ * Retrieves the extended media info for each gallery image from the store. This is used to
+ * determine which image size options are available for the current gallery.
+ *
+ * @param {Array} innerBlockImages An array of the innerBlock images currently in the gallery.
+ *
+ * @return {Array} An array of media info options for each gallery image.
+ */
+export default function useGetMedia( innerBlockImages ) {
+	return useSelect(
+		( select ) => {
+			const imagesUploading = innerBlockImages.some(
+				( { attributes } ) => attributes?.url?.indexOf( 'file:' ) === 0
+			);
+			const imageIds = innerBlockImages
+				.filter( ( { attributes } ) => {
+					const { id, url } = attributes;
+					return id !== undefined && url?.indexOf( 'file:' ) !== 0;
+				} )
+				.map( ( imageBlock ) => imageBlock.attributes.id );
+
+			if ( imageIds.length === 0 || imagesUploading ) {
+				return EMPTY_IMAGE_MEDIA;
+			}
+
+			return (
+				select( coreStore ).getMediaItems( {
+					include: imageIds.join( ',' ),
+					per_page: imageIds.length,
+					orderby: 'include',
+				} ) ?? EMPTY_IMAGE_MEDIA
+			);
+		},
+		[ innerBlockImages ]
+	);
+}

package/src/gallery/v1/edit.js

@@ -11,7 +11,6 @@ import {
 	map,
 	reduce,
 	some,
-	toString,
 } from 'lodash';
 
 /**
@@ -226,7 +225,7 @@ function GalleryEdit( props ) {
 		// The image id in both the images and attachmentCaptions arrays is a
 		// string, so ensure comparison works correctly by converting the
 		// newImage.id to a string.
-		const newImageId = toString( newImage.id );
+		const newImageId = newImage.id.toString();
 		const currentImage = find( images, { id: newImageId } );
 		const currentImageCaption = currentImage
 			? currentImage.caption
@@ -253,7 +252,7 @@ function GalleryEdit( props ) {
 			newImages.map( ( newImage ) => ( {
 				// Store the attachmentCaption id as a string for consistency
 				// with the type of the id in the images attribute.
-				id: toString( newImage.id ),
+				id: newImage.id.toString(),
 				caption: newImage.caption,
 			} ) )
 		);
@@ -264,7 +263,7 @@ function GalleryEdit( props ) {
 				// The id value is stored in a data attribute, so when the
 				// block is parsed it's converted to a string. Converting
 				// to a string here ensures it's type is consistent.
-				id: toString( newImage.id ),
+				id: newImage.id.toString(),
 			} ) ),
 			columns: attributes.columns
 				? Math.min( newImages.length, attributes.columns )

package/src/gallery/v1/gallery-image.js

@@ -16,6 +16,7 @@ import {
 	RichText,
 	MediaPlaceholder,
 	store as blockEditorStore,
+	__experimentalGetElementClassName,
 } from '@wordpress/block-editor';
 import { isBlobURL } from '@wordpress/blob';
 import { compose } from '@wordpress/compose';
@@ -245,6 +246,9 @@ class GalleryImage extends Component {
 				{ ! isEditing && ( isSelected || caption ) && (
 					<RichText
 						tagName="figcaption"
+						className={ __experimentalGetElementClassName(
+							'caption'
+						) }
 						aria-label={ __( 'Image caption text' ) }
 						placeholder={ isSelected ? __( 'Add caption' ) : null }
 						value={ caption }

package/src/gallery/v1/gallery.js

@@ -6,7 +6,10 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
-import { RichText } from '@wordpress/block-editor';
+import {
+	RichText,
+	__experimentalGetElementClassName,
+} from '@wordpress/block-editor';
 import { VisuallyHidden } from '@wordpress/components';
 import { __, sprintf } from '@wordpress/i18n';
 import { createBlock, getDefaultBlockName } from '@wordpress/blocks';
@@ -94,7 +97,10 @@ export const Gallery = ( props ) => {
 			<RichTextVisibilityHelper
 				isHidden={ ! isSelected && RichText.isEmpty( caption ) }
 				tagName="figcaption"
-				className="blocks-gallery-caption"
+				className={ classnames(
+					'blocks-gallery-caption',
+					__experimentalGetElementClassName( 'caption' )
+				) }
 				aria-label={ __( 'Gallery caption text' ) }
 				placeholder={ __( 'Write gallery caption…' ) }
 				value={ caption }

package/src/gallery/v1/save.js

@@ -1,7 +1,16 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
 /**
  * WordPress dependencies
  */
-import { RichText, useBlockProps } from '@wordpress/block-editor';
+import {
+	RichText,
+	useBlockProps,
+	__experimentalGetElementClassName,
+} from '@wordpress/block-editor';
 
 /**
  * Internal dependencies
@@ -60,7 +69,12 @@ export default function saveV1( { attributes } ) {
 								{ ! RichText.isEmpty( image.caption ) && (
 									<RichText.Content
 										tagName="figcaption"
-										className="blocks-gallery-item__caption"
+										className={ classnames(
+											'blocks-gallery-item',
+											__experimentalGetElementClassName(
+												'caption'
+											)
+										) }
 										value={ image.caption }
 									/>
 								) }
@@ -72,7 +86,10 @@ export default function saveV1( { attributes } ) {
 			{ ! RichText.isEmpty( caption ) && (
 				<RichText.Content
 					tagName="figcaption"
-					className="blocks-gallery-caption"
+					className={ classnames(
+						'blocks-gallery-caption',
+						__experimentalGetElementClassName( 'caption' )
+					) }
 					value={ caption }
 				/>
 			) }