These are step by step examples for converting a WordPress shortcode to a Gutenberg block. Read the tutorial here: https://calderaforms.com/2019/01/convert-shortcode-gutenberg-block/ Completed example here: https://github.com/caldera-learn/basic-blocks/tree/master/blocks/post-title

1.php

<?php
/**
 * Handler for [cl_post_title] shortcode
 *
 * @param $atts
 *
 * @return string
 */
function caldera_learn_basic_blocks_post_title_shortcode_handler($atts)
{
	$atts = shortcode_atts([
		'id' => 0,
		'heading' => 'h3',
	], $atts, 'cl_post_title');

	return caldera_learn_basic_blocks_post_title($atts[ 'id' ], $atts[ 'heading' ]);
}

/**
 * Output the post title wrapped in a heading
 *
 * @param int $post_id The post ID
 * @param string $heading Allows : h2,h3,h4 only
 *
 * @return string
 */
function caldera_learn_basic_blocks_post_title($post_id, $heading)
{
	if (!in_array($heading, ['h2', 'h3', 'h4'])) {
		$heading = 'h2';
	}
	$title = get_the_title(absint($post_id));
	return "<$heading>$title</$heading>";
}

/**
 * Register Shortcode
 */
add_shortcode('cl_post_title', 'caldera_learn_basic_blocks_post_title_shortcode_handler');

10.js

const {ServerSideRender} = wp.components; //WordPress Server-Side Renderer

11.js

const {ServerSideRender} = wp.components; //WordPress Server-Side Renderer

//Preview a block with a PHP render callback
createElement( ServerSideRender, {
    block: 'caldera-learn-basic-blocks/post-title',
    attributes: attributes
} ),

12.js

const {registerBlockType} = wp.blocks; //Blocks API
const {createElement} = wp.element; //React.createElement
const {__} = wp.i18n; //translation functions
const {InspectorControls} = wp.editor; //Block inspector wrapper
const {TextControl,SelectControl,ServerSideRender} = wp.components; //WordPress form inputs and server-side renderer

registerBlockType( 'caldera-learn-basic-blocks/post-title', {
	title: __( 'Show a post title' ), // Block title.
	category:  __( 'common' ), //category
	attributes:  {
		id : {
			default: 1,
		},
		heading: {
			default: 'h2'
		}
	},
	//display the post title
	edit(props){
		const attributes =  props.attributes;
		const setAttributes =  props.setAttributes;

		//Function to update id attribute
		function changeId(id){
			setAttributes({id});
		}

		//Function to update heading level
		function changeHeading(heading){
			setAttributes({heading});
		}

		//Display block preview and UI
		return createElement('div', {}, [
			//Preview a block with a PHP render callback
			createElement( ServerSideRender, {
				block: 'caldera-learn-basic-blocks/post-title',
				attributes: attributes
			} ),
			//Block inspector
			createElement( InspectorControls, {},
				[
					//A simple text control for post id
					createElement(TextControl, {
						value: attributes.id,
						label: __( 'Post Title' ),
						onChange: changeId,
						type: 'number',
						min: 1,
						step: 1
					}),
					//Select heading level
					createElement(SelectControl, {
						value: attributes.heading,
						label: __( 'Heading' ),
						onChange: changeHeading,
						options: [
							{value: 'h2', label: 'H2'},
							{value: 'h3', label: 'H3'},
							{value: 'h4', label: 'H4'},
						]
					})
				]
			)
		] )
	},
	save(){
		return null;//save has to exist. This all we need
	}
});

13.php

<?php
/**
 * Handler for post title block
 * @param $atts
 *
 * @return string
 */
function caldera_learn_basic_blocks_post_title_block_handler($atts)
{
	return caldera_learn_basic_blocks_post_title($atts[ 'id' ], $atts[ 'heading' ]);
}

14.php

<?php
/**
 * Handler for [cl_post_title] shortcode
 *
 * @param $atts
 *
 * @return string
 */
function caldera_learn_basic_blocks_post_title_shortcode_handler($atts)
{
	$atts = shortcode_atts([
		'id' => 0,
		'heading' => 'h3',
	], $atts, 'cl_post_title');

	return caldera_learn_basic_blocks_post_title($atts[ 'id' ], $atts[ 'heading' ]);
}

/**
 * Register Shortcode
 */
add_shortcode('cl_post_title', 'caldera_learn_basic_blocks_post_title_shortcode_handler');

/**
 * Handler for post title block
 * @param $atts
 *
 * @return string
 */
function caldera_learn_basic_blocks_post_title_block_handler($atts)
{
	return caldera_learn_basic_blocks_post_title($atts[ 'id' ], $atts[ 'heading' ]);
}

/**
 * Output the post title wrapped in a heading
 *
 * @param int $post_id The post ID
 * @param string $heading Allows : h2,h3,h4 only
 *
 * @return string
 */
function caldera_learn_basic_blocks_post_title($post_id, $heading)
{
	if (!in_array($heading, ['h2', 'h3', 'h4'])) {
		$heading = 'h2';
	}
	$title = get_the_title(absint($post_id));
	return "<$heading>$title</$heading>";
}

/**
 * Register block
 */
add_action('init', function () {
	// Skip block registration if Gutenberg is not enabled/merged.
	if (!function_exists('register_block_type')) {
		return;
	}
	$dir = dirname(__FILE__);

	$index_js = 'index.js';
	wp_register_script(
		'caldera-learn-basic-blocks-post-title',
		plugins_url($index_js, __FILE__),
		array(
			'wp-blocks',
			'wp-i18n',
			'wp-element',
			'wp-components'
		),
		filemtime("$dir/$index_js")
	);

	register_block_type('caldera-learn-basic-blocks/post-title', array(
		'editor_script' => 'caldera-learn-basic-blocks-post-title',
		'render_callback' => 'caldera_learn_basic_blocks_post_title_block_handler',
		'attributes' => [
			'id' => [
				'default' => 1
			],
			'heading' => [
				'default' => 'h2'
			]

		]
	));
});

2.php

<?php
/**
 * Register block
 */
add_action('init', function () {
	// Skip block registration if Gutenberg is not enabled/merged.
	if (!function_exists('register_block_type')) {
		return;
	}
	$dir = dirname(__FILE__);

	$index_js = 'index.js';
	wp_register_script(
		'caldera-learn-basic-blocks-post-title',
		plugins_url($index_js, __FILE__),
		array(
			'wp-blocks',
			'wp-i18n',
			'wp-element',
			'wp-components'
		),
		filemtime("$dir/$index_js")
	);

	register_block_type('caldera-learn-basic-blocks/post-title', array(
		'editor_script' => 'caldera-learn-basic-blocks-post-title',
		'render_callback' => 'caldera_learn_basic_blocks_post_title_block_handler',
		'attributes' => [
			'id' => [
				'default' => 1
			],
			'heading' => [
				'default' => 'h2'
			]

		]
	));
});

3.php

<?php
register_block_type('caldera-learn-basic-blocks/post-title', array(
		'editor_script' => 'caldera-learn-basic-blocks-post-title',
		'render_callback' => 'caldera_learn_basic_blocks_post_title_block_handler',
		'attributes' => [
			'id' => [
				'default' => 1
			],
			'heading' => [
				'default' => 'h2'
			]

		]
));

4.js

const attributes = {
	post_id : {
		default: 1,
	},
	heading: {
		default: 'h2'
	}
};

5.js

const {registerBlockType} = wp.blocks; //Blocks API
const {createElement} = wp.element; //React.createElement
const {__} = wp.i18n; //translation functions
registerBlockType( 'caldera-learn-basic-blocks/post-title', {
	title: __( 'Show a post title' ), // Block title.
	category:  __( 'common' ), //category
	//display the edit interface + preview
	edit(attributes,setAttributes){
		return createElement('div', {}, 'Hello from block edit callback' )
	},
	save(){
		return null;//save has to exist. This all we need
	}
});

6.1.js

const {InspectorControls} = wp.editor; //Block inspector wrapper

6.js

const {registerBlockType} = wp.blocks; //Blocks API
const {createElement} = wp.element; //React.createElement
const {__} = wp.i18n; //translation functions
const {InspectorControls} = wp.editor; //Block inspector wrapper

registerBlockType( 'caldera-learn-basic-blocks/post-title', {
	title: __( 'Show a post title' ), // Block title.
	category:  __( 'common' ), //category
	//display the post title
	edit(attributes,setAttributes){
		return createElement('div', {}, [
			createElement( 'div', {}, 'Put Preview here' ),
			createElement( InspectorControls, {}, 'Inspector Controls' )
		] )
	},
	save(){
		return null;//save has to exist. This all we need
	}
});

7.js

const attributes =  props.attributes;
const setAttributes =  props.setAttributes;

//Function to update id attribute
function changeId(id){
  setAttributes({id});
}

//Function to update heading level
function changeHeading(heading){
  setAttributes({heading});
}

8.js

const {registerBlockType} = wp.blocks; //Blocks API
const {createElement} = wp.element; //React.createElement
const {__} = wp.i18n; //translation functions
const {InspectorControls} = wp.editor; //Block inspector wrapper
const {TextControl,SelectControl} = wp.components; //Block inspector wrapper

registerBlockType( 'caldera-learn-basic-blocks/post-title', {
	title: __( 'Show a post title' ), // Block title.
	category:  __( 'common' ), //category
	attributes:  {
		id : {
			default: 1,
		},
		heading: {
			default: 'h2'
		}
	},
	//display the post title
	edit(props){
		const attributes =  props.attributes;
		const setAttributes =  props.setAttributes;

		//Function to update id attribute
		function changeId(id){
			setAttributes({id});
		}

		//Function to update heading level
		function changeHeading(heading){
			setAttributes({heading});
		}

		//Display block preview and UI
		return createElement('div', {}, [
			//preview will go here
			createElement( 'div', {}, 'Put Preview here' ),
			//Block inspector
			createElement( InspectorControls, {},
				[
					//A simple text control for post id
					createElement(TextControl, {
						value: attributes.id,
						label: __( 'Post Title' ),
						onChange: changeId,
						type: 'number',
						min: 1,
						step: 1
					}),
					//Select heading level
					createElement(SelectControl, {
						value: attributes.heading,
						label: __( 'Heading' ),
						onChange: changeHeading,
						options: [
							{value: 'h2', label: 'H2'},
							{value: 'h3', label: 'H3'},
							{value: 'h4', label: 'H4'},
						]
					})
				]
			)
		] )
	},
	save(){
		return null;//save has to exist. This all we need
	}
});

9.php

/**
 * Handler for post title block
 * @param $atts
 *
 * @return string
 */
function caldera_learn_basic_blocks_post_title_block_handler($atts)
{
	return 'Hello From The Server';
}

register_block_type('caldera-learn-basic-blocks/post-title', array(
		'editor_script' => 'caldera-learn-basic-blocks-post-title',
		'render_callback' => 'caldera_learn_basic_blocks_post_title_block_handler',
		'attributes' => [
			'id' => [
				'default' => 1
			],
			'heading' => [
				'default' => 'h2'
			]

		]
));