@wordpress/block-library 7.8.0 → 7.9.0

package/src/embed/embed-preview.js

@@ -13,7 +13,11 @@ import classnames from 'classnames/dedupe';
  */
 import { __, sprintf } from '@wordpress/i18n';
 import { Placeholder, SandBox } from '@wordpress/components';
-import { RichText, BlockIcon } from '@wordpress/block-editor';
+import {
+	RichText,
+	BlockIcon,
+	__experimentalGetElementClassName,
+} from '@wordpress/block-editor';
 import { Component } from '@wordpress/element';
 import { createBlock, getDefaultBlockName } from '@wordpress/blocks';
 
@@ -140,6 +144,9 @@ class EmbedPreview extends Component {
 				{ ( ! RichText.isEmpty( caption ) || isSelected ) && (
 					<RichText
 						tagName="figcaption"
+						className={ __experimentalGetElementClassName(
+							'caption'
+						) }
 						placeholder={ __( 'Add caption' ) }
 						value={ caption }
 						onChange={ onCaptionChange }

package/src/embed/icons.js

@@ -153,3 +153,28 @@ export const embedWolframIcon = (
 		<Path d="M32.59521,22.001l4.31885-4.84473-6.34131-1.38379.646-6.459-5.94336,2.61035L22,6.31934l-3.27344,5.60351L12.78418,9.3125l.645,6.458L7.08643,17.15234,11.40479,21.999,7.08594,26.84375l6.34131,1.38379-.64551,6.458,5.94287-2.60938L22,37.68066l3.27344-5.60351,5.94287,2.61035-.64551-6.458,6.34277-1.38183Zm.44385,2.75244L30.772,23.97827l-1.59558-2.07391,1.97888.735Zm-8.82147,6.1579L22.75,33.424V30.88977l1.52228-2.22168ZM18.56226,13.48816,19.819,15.09534l-2.49219-.88642L15.94037,12.337Zm6.87719.00116,2.62043-1.15027-1.38654,1.86981L24.183,15.0946Zm3.59357,2.6029-1.22546,1.7381.07525-2.73486,1.44507-1.94867ZM22,29.33008l-2.16406-3.15686L22,23.23688l2.16406,2.93634Zm-4.25458-9.582-.10528-3.836,3.60986,1.284v3.73242Zm5.00458-2.552,3.60986-1.284-.10528,3.836L22.75,20.92853Zm-7.78174-1.10559-.29352-2.94263,1.44245,1.94739.07519,2.73321Zm2.30982,5.08319,3.50817,1.18164-2.16247,2.9342-3.678-1.08447Zm2.4486,7.49285L21.25,30.88977v2.53485L19.78052,30.91Zm3.48707-6.31121,3.50817-1.18164,2.33228,3.03137-3.678,1.08447Zm10.87219-4.28113-2.714,3.04529L28.16418,19.928l1.92176-2.72565ZM24.06036,12.81769l-2.06012,2.6322-2.059-2.63318L22,9.292ZM9.91455,18.07227l4.00079-.87195,1.921,2.72735-3.20794,1.19019Zm2.93024,4.565,1.9801-.73462L13.228,23.97827l-2.26838.77429Zm-1.55591,3.58819L13.701,25.4021l2.64935.78058-2.14447.67853Zm3.64868,1.977L18.19,27.17334l.08313,3.46332L14.52979,32.2793Zm10.7876,2.43549.08447-3.464,3.25165,1.03052.407,4.07684Zm4.06824-3.77478-2.14545-.68,2.65063-.781,2.41266.825Z" />
 	</SVG>
 );
+
+export const embedPocketCastsIcon = {
+	foreground: '#f43e37',
+	src: (
+		<SVG
+			width="24"
+			height="24"
+			viewBox="0 0 24 24"
+			fill="none"
+			xmlns="http://www.w3.org/2000/svg"
+		>
+			<Path
+				fillRule="evenodd"
+				clipRule="evenodd"
+				d="M24,12A12,12,0,1,1,12,0,12,12,0,0,1,24,12Z"
+			/>
+			<Path
+				fillRule="evenodd"
+				clipRule="evenodd"
+				d="M2.67,12a9.33,9.33,0,0,1,18.66,0H19a7,7,0,1,0-7,7v2.33A9.33,9.33,0,0,1,2.67,12ZM12,17.6A5.6,5.6,0,1,1,17.6,12h-2A3.56,3.56,0,1,0,12,15.56Z"
+				fill="#fff"
+			/>
+		</SVG>
+	),
+};

package/src/embed/save.js

@@ -6,7 +6,11 @@ import classnames from 'classnames/dedupe';
 /**
  * WordPress dependencies
  */
-import { RichText, useBlockProps } from '@wordpress/block-editor';
+import {
+	RichText,
+	useBlockProps,
+	__experimentalGetElementClassName,
+} from '@wordpress/block-editor';
 
 export default function save( { attributes } ) {
 	const { url, caption, type, providerNameSlug } = attributes;
@@ -27,7 +31,11 @@ export default function save( { attributes } ) {
 				{ `\n${ url }\n` /* URL needs to be on its own line. */ }
 			</div>
 			{ ! RichText.isEmpty( caption ) && (
-				<RichText.Content tagName="figcaption" value={ caption } />
+				<RichText.Content
+					className={ __experimentalGetElementClassName( 'caption' ) }
+					tagName="figcaption"
+					value={ caption }
+				/>
 			) }
 		</figure>
 	);

package/src/embed/test/__snapshots__/index.native.js.snap

@@ -186,6 +186,6 @@ exports[`Embed block sets block caption 1`] = `
 "<!-- wp:embed {\\"url\\":\\"https://twitter.com/notnownikki\\",\\"type\\":\\"rich\\",\\"providerNameSlug\\":\\"twitter\\",\\"responsive\\":true} -->
 <figure class=\\"wp-block-embed is-type-rich is-provider-twitter wp-block-embed-twitter\\"><div class=\\"wp-block-embed__wrapper\\">
 https://twitter.com/notnownikki
-</div><figcaption>Caption</figcaption></figure>
+</div><figcaption class=\\"wp-element-caption\\">Caption</figcaption></figure>
 <!-- /wp:embed -->"
 `;

package/src/embed/variations.js

@@ -26,6 +26,7 @@ import {
 	embedDailymotionIcon,
 	embedPinterestIcon,
 	embedWolframIcon,
+	embedPocketCastsIcon,
 } from './icons';
 
 /** @typedef {import('@wordpress/blocks').WPBlockVariation} WPBlockVariation */
@@ -216,6 +217,15 @@ const variations = [
 		patterns: [ /^https?:\/\/(www\.)?mixcloud\.com\/.+/i ],
 		attributes: { providerNameSlug: 'mixcloud', responsive: true },
 	},
+	{
+		name: 'pocketcasts',
+		title: 'Pocket Casts',
+		icon: embedPocketCastsIcon,
+		keywords: [ __( 'podcast' ), __( 'audio' ) ],
+		description: __( 'Embed a podcast player from Pocket Casts.' ),
+		patterns: [ /^https:\/\/pca.st\/\w+/i ],
+		attributes: { providerNameSlug: 'pocketcasts', responsive: true },
+	},
 	{
 		name: 'reddit',
 		title: 'Reddit',

package/src/file/edit.js

@@ -22,7 +22,7 @@ import {
 	RichText,
 	useBlockProps,
 	store as blockEditorStore,
-	__experimentalElementButtonClassName,
+	__experimentalGetElementClassName,
 } from '@wordpress/block-editor';
 import { useEffect } from '@wordpress/element';
 import { useCopyToClipboard } from '@wordpress/compose';
@@ -302,7 +302,9 @@ function FileEdit( {
 								aria-label={ __( 'Download button text' ) }
 								className={ classnames(
 									'wp-block-file__button',
-									__experimentalElementButtonClassName
+									__experimentalGetElementClassName(
+										'button'
+									)
 								) }
 								value={ downloadButtonText }
 								withoutInteractiveFormatting

package/src/file/save.js

@@ -9,7 +9,7 @@ import classnames from 'classnames';
 import {
 	RichText,
 	useBlockProps,
-	__experimentalElementButtonClassName,
+	__experimentalGetElementClassName,
 } from '@wordpress/block-editor';
 import { __, sprintf } from '@wordpress/i18n';
 
@@ -74,7 +74,7 @@ export default function save( { attributes } ) {
 						href={ href }
 						className={ classnames(
 							'wp-block-file__button',
-							__experimentalElementButtonClassName
+							__experimentalGetElementClassName( 'button' )
 						) }
 						download={ true }
 						aria-describedby={ describedById }

package/src/file/style.scss

@@ -1,6 +1,10 @@
 .wp-block-file {
 	margin-bottom: 1.5em;
 
+	&:not(.wp-element-button) {
+		font-size: 0.8em;
+	}
+
 	&.aligncenter {
 		text-align: center;
 	}
@@ -20,15 +24,11 @@
 }
 
 //This needs a low specificity so it won't override the rules from the button element if defined in theme.json.
-.wp-block-file__button {
-	background: #32373c;
+:where(.wp-block-file__button) {
 	border-radius: 2em;
-	color: $white;
-	font-size: 0.8em;
 	padding: 0.5em 1em;
 
 	&:is(a) {
-		text-decoration: none;
 
 		&:hover,
 		&:visited,

package/src/freeform/editor.scss

@@ -211,8 +211,6 @@
 		margin: 0;
 		text-align: center;
 		padding: 6px;
-		-webkit-box-sizing: border-box;
-		-moz-box-sizing: border-box;
 		box-sizing: border-box;
 	}
 

package/src/gallery/gallery.js

@@ -6,7 +6,11 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
-import { RichText, useInnerBlocksProps } from '@wordpress/block-editor';
+import {
+	RichText,
+	useInnerBlocksProps,
+	__experimentalGetElementClassName,
+} from '@wordpress/block-editor';
 import { VisuallyHidden } from '@wordpress/components';
 import { useState, useEffect } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
@@ -82,7 +86,10 @@ export const Gallery = ( props ) => {
 				captionFocused={ captionFocused }
 				onFocusCaption={ onFocusCaption }
 				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/index.php

@@ -50,9 +50,13 @@ function block_core_gallery_render( $attributes, $content ) {
 	// because we only want to match against the value, not the CSS attribute.
 	if ( is_array( $gap ) ) {
 		foreach ( $gap as $key => $value ) {
+			// Make sure $value is a string to avoid PHP 8.1 deprecation error in preg_match() when the value is null.
+			$value       = is_string( $value ) ? $value : '';
 			$gap[ $key ] = $value && preg_match( '%[\\\(&=}]|/\*%', $value ) ? null : $value;
 		}
 	} else {
+		// Make sure $gap is a string to avoid PHP 8.1 deprecation error in preg_match() when the value is null.
+		$gap = is_string( $gap ) ? $gap : '';
 		$gap = $gap && preg_match( '%[\\\(&=}]|/\*%', $gap ) ? null : $gap;
 	}
 

package/src/gallery/save.js

@@ -10,6 +10,7 @@ import {
 	RichText,
 	useBlockProps,
 	useInnerBlocksProps,
+	__experimentalGetElementClassName,
 } from '@wordpress/block-editor';
 
 /**
@@ -39,7 +40,10 @@ export default function saveWithInnerBlocks( { attributes } ) {
 			{ ! RichText.isEmpty( caption ) && (
 				<RichText.Content
 					tagName="figcaption"
-					className="blocks-gallery-caption"
+					className={ classnames(
+						'blocks-gallery-caption',
+						__experimentalGetElementClassName( 'caption' )
+					) }
 					value={ caption }
 				/>
 			) }

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

@@ -114,14 +114,14 @@ exports[`Gallery block sets caption to gallery 1`] = `
 "<!-- wp:gallery {\\"linkTo\\":\\"none\\"} -->
 <figure class=\\"wp-block-gallery has-nested-images columns-default is-cropped\\"><!-- wp:image {\\"id\\":2000} -->
 <figure class=\\"wp-block-image\\"><img src=\\"https://test-site.files.wordpress.com/local-image-1.jpeg\\" alt=\\"\\" class=\\"wp-image-2000\\"/></figure>
-<!-- /wp:image --><figcaption class=\\"blocks-gallery-caption\\"><strong>Bold</strong> <em>italic</em> <s>strikethrough</s> gallery caption</figcaption></figure>
+<!-- /wp:image --><figcaption class=\\"blocks-gallery-caption wp-element-caption\\"><strong>Bold</strong> <em>italic</em> <s>strikethrough</s> gallery caption</figcaption></figure>
 <!-- /wp:gallery -->"
 `;
 
 exports[`Gallery block sets caption to gallery items 1`] = `
 "<!-- wp:gallery {\\"linkTo\\":\\"none\\"} -->
 <figure class=\\"wp-block-gallery has-nested-images columns-default is-cropped\\"><!-- wp:image {\\"id\\":2000} -->
-<figure class=\\"wp-block-image\\"><img src=\\"https://test-site.files.wordpress.com/local-image-1.jpeg\\" alt=\\"\\" class=\\"wp-image-2000\\"/><figcaption><strong>Bold</strong> <em>italic</em> <s>strikethrough</s> image caption</figcaption></figure>
+<figure class=\\"wp-block-image\\"><img src=\\"https://test-site.files.wordpress.com/local-image-1.jpeg\\" alt=\\"\\" class=\\"wp-image-2000\\"/><figcaption class=\\"wp-element-caption\\"><strong>Bold</strong> <em>italic</em> <s>strikethrough</s> image caption</figcaption></figure>
 <!-- /wp:image --></figure>
 <!-- /wp:gallery -->"
 `;

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(),
 							} ) );
 						}
 					},