Random Image Block - ES2015+, JSX

block.jsx

const { registerBlock, query } = wp.blocks;
const { attr } = query;

function RandomImage( { category } ) {
	const src = 'http://lorempixel.com/400/200/' + category;

	return <img src={ src } alt={ category } />;
}

registerBlock( 'myplugin/random-image', {
	attributes: {
		category: attr( 'img', 'alt' )
	},

	edit( { category }, setAttributes ) {
		function setCategory( event ) {
			const selected = event.target.querySelector( 'option:checked' );
			setAttributes( { category: selected.value } );
			event.preventDefault();
		}

		return (
			<form onSubmit={ setCategory }>
				{ category ? <RandomImage category={ category } /> : null }
				<select value={ category } onChange={ setCategory }>
					<option value="sports">Sports</option>
					<option value="animals">Animals</option>
					<option value="nature">Nature</option>
				</select>
			</form>
		);
	},

	save( { category } ) {
		return <RandomImage category={ category } />;
	}
} );

If you've configured a build process such as Webpack with Babel, there are a few conveniences you may be interested in taking advantage of, particularly writing in JSX. This is the same example from Blocks documentation written as ES2015+ and JSX.

is there a minor destructuring error on line 15? i'm getting a setAttributes is not a function error but if i put that part inside the curly brackets, all is well.

@jhacket11: Yeah, it would appear to need to be destructured as part of the first argument object. This entire example is quite outdated. For example, the attrs function (and wp.blocks.query) was part of very early Gutenberg implementations and no longer exists.

A more up-to-date reference is the Gutenberg Handbook:

https://developer.wordpress.org/block-editor/tutorials/block-tutorial/writing-your-first-block-type/