InspectorControls not appearing

gistfile1.txt

/* global _, wp */

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

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',
		},
		direction: {
			type: 'string',
			source: 'attribute',
			default: 'left',
		},
	},
	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 toggleDirection = value => {
			props.setAttributes( { description: value ? 'right' : 'left' } );
		};

		return (
			props.focus && (
				<InspectorControls key="inspector">
					<PanelBody title={ __( 'Direction Settings' ) }>
						<ToggleControl
							label={ __( 'Image on right' ) }
							checked={ 'right' === attributes.direction }
							onChange={ toggleDirection }
						/>
					</PanelBody>
				</InspectorControls>
			),
			<div className={ props.className }>
				<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"
						direction={ attributes.direction }>
						<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,
				direction,
			},
		} = props;
		return (
			<div className={ className }>
				<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" direction={ direction }>
						<h4 className="text-image__title">
							{ title }
						</h4>
						<div className="text-image__description">
							{ description }
						</div>
					</div>
				</div>
			</div>
		);
	},
} );