Gutenberg Shortcode Block with Live Preview

index.php

<?php
/**
 * Plugin Name: JD Gutenberg Shortcode Preview
 * Description: Live shortcode previews in Gutenberg
 * Author: johndyer
 * Version: 1.0.0
 *
 */

// Exit if accessed directly.
if ( ! defined( 'ABSPATH' ) ) {
	exit;
}

// make the script visible to Guteberg
function jd_editor_assets() {
	wp_enqueue_script(
		'jd-shortcode-js', // Handle.
		plugins_url( 'block.js', dirname( __FILE__ ) ), // Block.build.js: We register the block here. Built with Webpack.
		array( 'wp-blocks', 'wp-i18n', 'wp-element' ) // Dependencies, defined above.
	);
}
add_action( 'enqueue_block_editor_assets', 'jd_editor_assets' );


// render callbacks
function jd_do_shortcode( $attributes ) {
	$html = 'No shortcode provided';

	if (!empty($attributes["shortcode"])) {
		$html = do_shortcode( $attributes["shortcode"]);
	}

	return $html;
}

// ServerSideRender callback
function jd_load_blocks() {

	register_block_type( 'jd/shortcode', array(
		'render_callback' => 'jd_do_shortcode',
		'attributes'      => array(
			'shortcode' => array(
				'type'    => 'string',				
			),
		)
	) );	
}
add_action( 'init', 'jd_load_blocks' );

function jd_sample_shortcode($attributes) {
	return 'It works: ' . $attributes['something'];
}

add_shortcode( 'jd_sample_shortcode', 'jd_sample_shortcode' );

script.js

var el = wp.element.createElement,
	registerBlockType = wp.blocks.registerBlockType,
	InspectorControls = wp.blocks.InspectorControls,
	TextControl = wp.components.TextControl,
	ServerSideRender = wp.components.ServerSideRender;

registerBlockType( 'jd/shortcode', {
	title: 'JD Shortcode Preview',
	icon: 'shortcode',
	category: 'common',
  
	attributes: {
		shortcode: {
			type: 'string',
			default: '',
		},
	},  

	edit: function( props ) {
		
		return [
			props.isSelected &&
			el(InspectorControls, { key: "inspector"},
				el('h2', {}, 'Shortcode Settings'),
				el(TextControl, {
					label: __( 'Shortcode' ),
					value: props.attributes.shortcode,
					onChange: function(value) { props.setAttribute( { shortcode: value } ); }
				}),
			),
      
			// ensure the block attributes matches this plugin's name
			el(ServerSideRender, {
				key: "editable",
				block: "jd/shortcode",
				attributes:  props.attributes
			})
		];
	},

	save: function() {
		// Rendering in PHP
		return null;
	},
} );

@johndyer Can you please tell me how this is supposed to work? I guess I have to actually store what you called script.js as blocks.js I did that but I see no block registered. What I noticed is when I use the shortcode block and type in [jd_sample_shortcode test="whatever"] it fails while updating meaning it trys to execute the shortcode while saving in gutenberg [jd_sample_shortcode something="whatever"] works, post gets updated not sure if this is default BG behavior or has to do with this plugin. I see no preview and from the register_block I guess there is supposed to be a block showing up but it does not for me.

Hi, I tried to use serverSideRender for my shortocode but the problem is the scripts of my shortcode is not trigger on editor, any idea what is the approach for this, my scripts are inside document ready function.