Gallery block - Add default value for innerBlockImages (#51443)

* Gallery block - Add default value for innerBlockImages * Mobile - Gallery block - Test the block renders the placeholder correctly if there are no inner blocks
WordPress · Jun 22, 2023 · fa1e2b0 · fa1e2b0
1 parent 7df5a47
commit fa1e2b0
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 1 deletion.
diff --git a/packages/block-library/src/gallery/edit.js b/packages/block-library/src/gallery/edit.js
@@ -144,7 +144,10 @@ function GalleryEdit( props ) {
 
 	const innerBlockImages = useSelect(
 		( select ) => {
-			return select( blockEditorStore ).getBlock( clientId )?.innerBlocks;
+			const innerBlocks =
+				select( blockEditorStore ).getBlock( clientId )?.innerBlocks ??
+				[];
+			return innerBlocks;
 		},
 		[ clientId ]
 	);

diff --git a/packages/block-library/src/gallery/test/__snapshots__/index.native.js.snap b/packages/block-library/src/gallery/test/__snapshots__/index.native.js.snap
@@ -110,6 +110,12 @@ exports[`Gallery block rearranges gallery items 1`] = `
 <!-- /wp:gallery -->"
 `;
 
+exports[`Gallery block renders gallery block placeholder correctly if the block doesn't have inner blocks 1`] = `
+"<!-- wp:gallery {"linkTo":"none"} -->
+<figure class="wp-block-gallery has-nested-images columns-default is-cropped"></figure>
+<!-- /wp:gallery -->"
+`;
+
 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} -->

diff --git a/packages/block-library/src/gallery/test/index.native.js b/packages/block-library/src/gallery/test/index.native.js
@@ -27,6 +27,8 @@ import {
 	requestImageFailedRetryDialog,
 	requestImageUploadCancelDialog,
 } from '@wordpress/react-native-bridge';
+import { store as blockEditorStore } from '@wordpress/block-editor';
+import { select } from '@wordpress/data';
 
 /**
  * Internal dependencies
@@ -75,6 +77,24 @@ describe( 'Gallery block', () => {
 		expect( getEditorHtml() ).toMatchSnapshot();
 	} );
 
+	it( "renders gallery block placeholder correctly if the block doesn't have inner blocks", async () => {
+		const getBlockSpy = jest
+			.spyOn( select( blockEditorStore ), 'getBlock' )
+			.mockReturnValue( {
+				innerBlocks: undefined,
+				attributes: {
+					content: '',
+				},
+			} );
+
+		const screen = await addGalleryBlock();
+
+		expect( getBlock( screen, 'Gallery' ) ).toBeVisible();
+		expect( getEditorHtml() ).toMatchSnapshot();
+
+		getBlockSpy.mockReset();
+	} );
+
 	it( 'selects a gallery item', async () => {
 		const { galleryBlock } = await initializeWithGalleryBlock( {
 			numberOfItems: 1,