Slideshow block examples have hardcoded IDs resulting in invalid API requests

[johngodley]

The slideshow block uses the following for Gutenberg's example attributes:

const exampleAttributes = {
	align: 'center',
	autoplay: true,
	ids: [ 22, 23 ],
	images: [
		{
			alt: '',
			caption: '',
			id: 22,
			url: slideshowExample1,
		},
		{
			alt: '',
			caption: '',
			id: 23,
			url: slideshowExample2,
		},
		{
			alt: '',
			caption: '',
			id: 23,
			url: slideshowExample3,
		},
	],
	effect: 'slide',
};

That is, it includes hard-coded IDs to media resource 22 and 23 (23 seems to be incorrectly defined twice).

This data is used in the block inserter preview, viewed when hovering over a block in the inserter. The preview creates an actual block, and the following code runs:

		const resizedImages = props.attributes.ids.reduce( ( currentResizedImages, id ) => {
			const image = select( 'core' ).getMedia( id );
			const sizes = get( image, [ 'media_details', 'sizes' ] );
			return [ ...currentResizedImages, { id, sizes } ];
		}, [] );

Specifically the getMedia selector runs on ids 22 and 23, resulting in remote requests to the API for media ID 22 and 23.

On most sites the IDs 22 and 23 don't exist, causing an error (rest_post_invalid_id from the API, and possibly a JS error as the above code tries to process an image of type undefined)

I don't know where 22 and 23 come from, or whether an ID is actually needed for the preview to function, but looking at the core image block it doesn't include an ID in the example data, and that might be a simple solution here.

Steps to reproduce

• Open main block inserter and hover over the slideshow block. Note that two API requests are fired off. Depending on the site these may error or return inappropriate data.