Allow media library in gallery mode to be reset

[talldan]

Description

Fixes #20627

#20627 describes a situation where passing a falsey value or empty array into the MediaUpload component still results in the media library showing the Edit Gallery view with the previous selection of gallery images still selected.

The expected behaviour is for the library to be reset to its original Create Gallery mode. This PR upates the MediaUpload component to have that behaviour.

This core problem was that this.buildAndSetGalleryFrame(); wasn't being called when the value was falsey or an empty array, so the previous edit view was still being recycled:

gutenberg/packages/media-utils/src/components/media-upload/index.js

Lines 420 to 426 in 8a94254

	if (
	this.props.gallery &&
	this.props.value &&
	this.props.value.length > 0
	) {
	this.buildAndSetGalleryFrame();
	}

In addition to that, buildAndSetGalleryFrame had some checks for the value being falsey to determine whether the edit or create view should be displayed. Given a media library is most likely to be used with a gallery, and galleries supply an array of images, it seemed prudent to primarily check for an empty array. The function now does this, but also supports undefined as a value.

How has this been tested?

A custom block with the following code needs to be registered as none of our core blocks have the ability to reset a gallery.:

import { registerBlockType } from '@wordpress/blocks';
import { MediaUpload } from '@wordpress/block-editor';
import { Button } from '@wordpress/components';

registerBlockType( 'test/block', {
	title: 'Test Block',
	icon: 'test gallery',
	category: 'common',
	attributes: {
		imageIds: {
			type: 'Array',
			default: [],
		},
	},
	edit( { attributes, setAttributes } ) {
		const { imageIds } = attributes;
		return (
			<>
				<MediaUpload
					onSelect={ ( selection ) =>
						setAttributes( {
							imageIds: selection.map(
								( selectedImage ) => `${ selectedImage.id }`
							),
						} )
					}
					allowedTypes={ [ 'image' ] }
					value={ imageIds.length ? imageIds : undefined }
					gallery={ true }
					multiple={ true }
					render={ ( { open } ) => (
						<Button isDefault onClick={ open }>
							{ imageIds.length
								? 'Manage images'
								: 'Select images' }
						</Button>
					) }
				/>
				<Button
					isDefault
					isDestructive
					onClick={ () => setAttributes( { imageIds: [] } ) }
				>
					Reset
				</Button>
				{ imageIds && (
					<div>
						{ imageIds.map( ( id ) => {
							return !! id ? ` ${ id } ` : ` (??)`;
						} ) }
					</div>
				) }
			</>
		);
	},
	save() {},
} );

1. Add the custom 'Test Block' block
2. Select some initial images for the block using the 'Select Images' option
3. Click 'Manage Images' and click Update gallery
4. Click 'Reset'
5. Click 'Select Images'
6. Observe that the media library displays the 'Create Gallery' view.

Previous Behaviour: The media library displayed the 'Edit Gallery' view even though the gallery is now supposed to contain no images.

Types of changes

Bug fix (non-breaking change which fixes an issue)

Checklist:

• My code is tested.
• My code follows the WordPress code style.
• My code follows the accessibility standards.
• My code has proper inline documentation.
• I've included developer documentation if appropriate.
• I've updated all React Native files affected by any refactorings/renamings in this PR.

[github-actions]

Size Change: +5 B (0%)

Total Size: 863 kB

Filename	Size	Change
build/media-utils/index.js	4.85 kB	+5 B (0%)

ℹ️ View Unchanged

Filename	Size	Change
build/a11y/index.js	1.01 kB	0 B
build/annotations/index.js	3.43 kB	0 B
build/api-fetch/index.js	3.39 kB	0 B
build/autop/index.js	2.58 kB	0 B
build/blob/index.js	620 B	0 B
build/block-directory/index.js	6.02 kB	0 B
build/block-directory/style-rtl.css	760 B	0 B
build/block-directory/style.css	760 B	0 B
build/block-editor/index.js	104 kB	0 B
build/block-editor/style-rtl.css	10.5 kB	0 B
build/block-editor/style.css	10.5 kB	0 B
build/block-library/editor-rtl.css	7.26 kB	0 B
build/block-library/editor.css	7.26 kB	0 B
build/block-library/index.js	115 kB	0 B
build/block-library/style-rtl.css	7.5 kB	0 B
build/block-library/style.css	7.51 kB	0 B
build/block-library/theme-rtl.css	669 B	0 B
build/block-library/theme.css	671 B	0 B
build/block-serialization-default-parser/index.js	1.65 kB	0 B
build/block-serialization-spec-parser/index.js	3.1 kB	0 B
build/blocks/index.js	57.7 kB	0 B
build/components/index.js	191 kB	0 B
build/components/style-rtl.css	15.5 kB	0 B
build/components/style.css	15.5 kB	0 B
build/compose/index.js	5.75 kB	0 B
build/core-data/index.js	10.6 kB	0 B
build/data-controls/index.js	1.03 kB	0 B
build/data/index.js	8.22 kB	0 B
build/date/index.js	5.36 kB	0 B
build/deprecated/index.js	772 B	0 B
build/dom-ready/index.js	569 B	0 B
build/dom/index.js	3.06 kB	0 B
build/edit-post/index.js	91.3 kB	0 B
build/edit-post/style-rtl.css	8.71 kB	0 B
build/edit-post/style.css	8.71 kB	0 B
build/edit-site/index.js	4.64 kB	0 B
build/edit-site/style-rtl.css	2.48 kB	0 B
build/edit-site/style.css	2.48 kB	0 B
build/edit-widgets/index.js	4.42 kB	0 B
build/edit-widgets/style-rtl.css	2.59 kB	0 B
build/edit-widgets/style.css	2.58 kB	0 B
build/editor/editor-styles-rtl.css	325 B	0 B
build/editor/editor-styles.css	327 B	0 B
build/editor/index.js	43.8 kB	0 B
build/editor/style-rtl.css	3.98 kB	0 B
build/editor/style.css	3.98 kB	0 B
build/element/index.js	4.45 kB	0 B
build/escape-html/index.js	734 B	0 B
build/format-library/index.js	7.11 kB	0 B
build/format-library/style-rtl.css	502 B	0 B
build/format-library/style.css	502 B	0 B
build/hooks/index.js	1.92 kB	0 B
build/html-entities/index.js	622 B	0 B
build/i18n/index.js	3.48 kB	0 B
build/is-shallow-equal/index.js	710 B	0 B
build/keyboard-shortcuts/index.js	2.3 kB	0 B
build/keycodes/index.js	1.68 kB	0 B
build/list-reusable-blocks/index.js	2.99 kB	0 B
build/list-reusable-blocks/style-rtl.css	226 B	0 B
build/list-reusable-blocks/style.css	226 B	0 B
build/notices/index.js	1.57 kB	0 B
build/nux/index.js	3.01 kB	0 B
build/nux/style-rtl.css	616 B	0 B
build/nux/style.css	613 B	0 B
build/plugins/index.js	2.54 kB	0 B
build/primitives/index.js	1.49 kB	0 B
build/priority-queue/index.js	780 B	0 B
build/redux-routine/index.js	2.84 kB	0 B
build/rich-text/index.js	14.3 kB	0 B
build/server-side-render/index.js	2.55 kB	0 B
build/shortcode/index.js	1.7 kB	0 B
build/token-list/index.js	1.27 kB	0 B
build/url/index.js	4 kB	0 B
build/viewport/index.js	1.61 kB	0 B
build/warning/index.js	1.14 kB	0 B
build/wordcount/index.js	1.18 kB	0 B

_{compressed-size-action}

[draganescu]

LGTM, tested as described and works. Plus empty array is a better default than "null" for any thing that should contain a list.