1.js

( function( blocks, element ) {
	var el = element.createElement;
	blocks.registerBlockType( 'namespace/block-name', {
		title: __( 'Example: Basic', 'gutenberg-examples' ),
		icon: 'universal-access-alt',
		category: 'layout',
		edit: function() {
			return el(
				'p',
				{},
				'Hello World, step 1 (from the editor).'
			);
		},
		save: function() {
			return el(
				'p',
				{},
				'Hello World, step 1 (from the frontend).'
			);
		},
	} );
}(
	window.wp.blocks,
	window.wp.element
) );

2.js

( function( blocks, element ) {
	const el = element.createElement;
	blocks.registerBlockType( 'namespace/block-name', {
		title: __( 'Example: Basic', 'gutenberg-examples' ),
		icon: 'universal-access-alt',
		category: 'layout',
		attributes: {
			message: {
				type: 'string',
				default: 'Hi Roy'
			}
		},
		edit: function(props) {
			return el(
				'p',
				{},
				props.attributes.message
			);
		},
		save: function() {
			return null;
		},
	} );
}(
	window.wp.blocks,
	window.wp.element
) );

3.js

( function( blocks, element ) {
	const el = element.createElement;
	blocks.registerBlockType( 'namespace/block-name', {
		title: __( 'Example: Basic', 'gutenberg-examples' ),
		icon: 'universal-access-alt',
		category: 'layout',
		attributes: {
			message: {
				type: 'string',
				default: 'Hi Roy'
			}
		},
		edit: function(props) {
			return el(
				'input',
				{
					type: 'text',
					onChange: (e) => {
						e.preventDefault();
						props.setAttributes( { message: e.target.value})
					}
				},
				props.attributes.message
			);
		},
		save: function() {
			return null;
		},
	} );
}(
	window.wp.blocks,
	window.wp.element
) );

4.js

( function( blocks, element ) {
	const el = element.createElement;
	const {TextControl} = wp.components;

	blocks.registerBlockType( 'namespace/block-name', {
		title: __( 'Example: Basic', 'gutenberg-examples' ),
		icon: 'universal-access-alt',
		category: 'layout',
		attributes: {
			message: {
				type: 'string',
				default: 'Hi Roy'
			}
		},
		edit: function(props) {
			return el(
				TextControl,
				{
					onChange: (message) => {
						props.setAttributes( { message})
					},
					label: 'Message'
				},
				props.attributes.message
			);
		},
		save: function() {
			return null;
		},
	} );
}(
	window.wp.blocks,
	window.wp.element
) );

5.js

( function( blocks, element ) {
	const el = element.createElement;
	const {TextControl} = wp.components;

	blocks.registerBlockType( 'namespace/block-name', {
		title: __( 'Example: Basic', 'gutenberg-examples' ),
		icon: 'universal-access-alt',
		category: 'layout',
		attributes: {
			message: {
				type: 'string',
				default: 'Hi Roy'
			}
		},
		edit: function(props) {
			//When block is selected, show control
			if(props.isSelected){
				return el(
					TextControl,
					{
						onChange: (e) => {
							e.preventDefault();
							props.setAttributes( { message: e.target.value})
						}
					},
					props.attributes.message
				);
			}

			//When block is not connected, show paragraph
			return el(
				'p',
				{

				},
				props.attributes.message
			);

		},
		save: function() {
			return null;
		},
	} );
}(
	window.wp.blocks,
	window.wp.element
) );