InspectorControlsBlock.js

const { __ } = wp.i18n;
const {
	registerBlockType,
	RichText,
	InspectorControls,
	AlignmentToolbar,
	BlockControls,
} = wp.blocks;
const {
	TextControl
} = wp.components;

registerBlockType( 'gutenberg-examples/example-04-controls-esnext', {
	title: __( 'Example: Controls (esnext)' ),
	icon: 'universal-access-alt',
	category: 'layout',
	attributes: {
		content: {
			type: 'array',
			selector: 'p',
		},
		text: {
			type: 'string',
		},
		alignment: {
			type: 'string',
		},
	},
	edit: props => {
		const {
			attributes: {
				content,
				alignment,
				text
			},
			focus,
			className,
			setFocus
		} = props;

		const onChangeContent = newContent => {
			props.setAttributes( { content: newContent } );
		};

		const onChangeAlignment = newAlignment => {
			props.setAttributes( { alignment: newAlignment } );
		};

		const onChangeText = newText => {
			props.setAttributes( { text: newText } );
		};

		return (
			<div>
				{
					!! focus && (
						<InspectorControls>
							<AlignmentToolbar
								value={ alignment }
								onChange={ onChangeAlignment }
							/>
							<TextControl
								value={ text }
								onChange={ onChangeText }
							/>
						</InspectorControls>
					)
				}
				<RichText
					className={ className }
					style={ { textAlign: alignment } }
					onChange={ onChangeContent }
					value={ content }
					focus={ focus }
					onFocus={ setFocus }
					/>
			</div>
		);
	},
	save: props => {
		// ignore for now
	}
} );