Gutenberg Block Example, with everything working

gistfile1.txt

/* global _, wp */

const { __ } = wp.i18n;
const {
	registerBlockType,
	Editable,
	InspectorControls,
	MediaUploadButton,
	source: {
		attr,
		children,
	},
} = wp.blocks;

const { ToggleControl } = InspectorControls;

registerBlockType( 'wccom-blocks/text-image', {
	title: __( 'Wccom: Text with Image' ),
	icon: 'index-card',
	category: 'layout',
	attributes: {
		title: {
			type: 'array',
			source: 'children',
			selector: '.text-image__title',
		},
		description: {
			type: 'array',
			source: 'children',
			selector: '.text-image__description',
		},
		mediaID: {
			type: 'number',
		},
		mediaURL: {
			type: 'string',
			source: 'attribute',
			selector: 'img',
			attribute: 'src',
		},
		imageRight: {
			type: 'boolean',
			default: false,
		},
	},
	edit: props => {
		const focusedEditable = props.focus ? props.focus.editable || 'title' : null;

		const attributes = props.attributes;
		const onChangeTitle = value => {
			props.setAttributes( { title: value } );
		};
		const onFocusTitle = focus => {
			props.setFocus( _.extend( {}, focus, { editable: 'title' } ) );
		};
		const onSelectImage = media => {
			props.setAttributes( {
				mediaURL: media.url,
				mediaID: media.id,
			} );
		};
		const onChangeDescription = value => {
			props.setAttributes( { description: value } );
		};
		const onFocusDescription = focus => {
			props.setFocus( _.extend( {}, focus, { editable: 'description' } ) );
		};

		const toggleImageRight = () => {
			props.setAttributes( { imageRight: ! attributes.imageRight } );
		};

		return [
			props.focus && (
				<InspectorControls key="inspector">
					<ToggleControl
						label={ __( 'Image on right' ) }
						checked={ !! attributes.imageRight }
						onChange={ toggleImageRight }
					/>
				</InspectorControls>
			),
			(
				<div className={ props.className } data-image-right={ attributes.imageRight }>
					<div className="text-image__container">
						<div className="text-image__image-container">
							<MediaUploadButton
								buttonProps={
									{
										className: attributes.mediaID
											? 'image-button'
											: 'components-button button button-large',
									}
								}
								onSelect={ onSelectImage }
								type="image"
								value={ attributes.mediaID }>
								{
									attributes.mediaID
										? <img src={ attributes.mediaURL } />
										: __( 'Upload Image' )
								}
							</MediaUploadButton>
						</div>
						<div
							className="text-image__content-container">
							<Editable
								tagName="h4"
								className="text-image__title"
								placeholder={ __( 'Write the title…' ) }
								value={ attributes.title }
								onChange={ onChangeTitle }
								focus={ 'title' === focusedEditable }
								onFocus={ onFocusTitle }
							/>
							<Editable
								className="text-image__description"
								placeholder={ __( 'Write the description…' ) }
								value={ attributes.description }
								onChange={ onChangeDescription }
								focus={ 'description' === focusedEditable }
								onFocus={ onFocusDescription }
							/>
						</div>
					</div>
				</div>
			),
		];
	},
	save: props => {
		const {
			className,
			attributes: {
				title,
				description,
				mediaURL,
				imageRight,
			},
		} = props;
		return (
			<div className={ className } data-image-right={ imageRight }>
				<div className="text-image__container">
					<div className="text-image__image-container">
						{
							mediaURL && (
								<img className="text-image__image" src={ mediaURL } />
							)
						}
					</div>
					<div className="text-image__content-container">
						<h4 className="text-image__title">
							{ title }
						</h4>
						<div className="text-image__description">
							{ description }
						</div>
					</div>
				</div>
			</div>
		);
	},
} );