Enhance the shortcode block to support previewing of shortcodes

blocks/library/shortcode/block.js

@@ -0,0 +1,74 @@
+/**
+ * WordPress dependencies
+ */
+import { withInstanceId, Dashicon } from '@wordpress/components';
+import { Component } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import ShortcodePreview from './preview';
+import BlockControls from '../../block-controls';
+import PlainText from '../../plain-text';
+
+export class Shortcode extends Component {
+	constructor() {
+		super();
+		this.state = {
+			preview: false,
+		};
+	}
+
+	render() {
+		const { preview } = this.state;
+		const { instanceId, postId, setAttributes, attributes, isSelected } = this.props;
+		const inputId = `blocks-shortcode-input-${ instanceId }`;
+		const shortcodeContent = ( attributes.text || '' ).trim();
+
+		const controls = isSelected && (
+			<BlockControls key="controls">
+				<div className="components-toolbar">
+					<button
+						className={ `components-tab-button ${ ! preview ? 'is-active' : '' }` }
+						onClick={ () => this.setState( { preview: false } ) }>
+						<span>{ __( 'Shortcode' ) }</span>
+					</button>
+					<button
+						className={ `components-tab-button ${ preview ? 'is-active' : '' }` }
+						onClick={ () => shortcodeContent.length && this.setState( { preview: true } ) } >
+						<span>{ __( 'Preview' ) }</span>
+					</button>
+				</div>
+			</BlockControls>
+		);
+
+		if ( preview ) {
+			return [
+				controls,
+				<ShortcodePreview key="preview"
+					shortcode={ shortcodeContent }
+					postId={ postId }
+				/>,
+			];
+		}
+
+		return [
+			controls,
+			<div className="wp-block-shortcode" key="placeholder">
+				<label htmlFor={ inputId }>
+					<Dashicon icon="editor-code" />
+					{ __( 'Shortcode' ) }
+				</label>
+				<PlainText
+					id={ inputId }
+					value={ attributes.text }
+					placeholder={ __( 'Write shortcode here…' ) }
+					onChange={ ( text ) => setAttributes( { text } ) }
+				/>
+			</div>,
+		];
+	}
+}
+
+export default withInstanceId( Shortcode );

blocks/library/shortcode/index.js

@@ -3,13 +3,12 @@
  */
 import { RawHTML } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
-import { withInstanceId, Dashicon } from '@wordpress/components';
 
 /**
  * Internal dependencies
  */
 import './editor.scss';
-import PlainText from '../../plain-text';
+import Shortcode from './block';
 
 export const name = 'core/shortcode';
 
@@ -60,27 +59,7 @@ export const settings = {
 		html: false,
 	},
 
-	edit: withInstanceId(
-		( { attributes, setAttributes, instanceId } ) => {
-			const inputId = `blocks-shortcode-input-${ instanceId }`;
-
-			return (
-				<div className="wp-block-shortcode">
-					<label htmlFor={ inputId }>
-						<Dashicon icon="shortcode" />
-						{ __( 'Shortcode' ) }
-					</label>
-					<PlainText
-						className="input-control"
-						id={ inputId }
-						value={ attributes.text }
-						placeholder={ __( 'Write shortcode here…' ) }
-						onChange={ ( text ) => setAttributes( { text } ) }
-					/>
-				</div>
-			);
-		}
-	),
+	edit: Shortcode,
 
 	save( { attributes } ) {
 		return <RawHTML>{ attributes.text }</RawHTML>;

blocks/library/shortcode/preview.js

@@ -0,0 +1,53 @@
+/**
+ * External dependencies
+ */
+import { connect } from 'react-redux';
+
+/**
+ * WordPress dependencies
+ */
+import { withAPIData, Spinner, SandBox } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+import { compose } from '@wordpress/element';
+
+function ShortcodePreview( { response } ) {
+	if ( response.isLoading || ! response.data ) {
+		return (
+			<div key="loading" className="wp-block-embed is-loading">
+				<Spinner />
+				<p>{ __( 'Loading...' ) }</p>
+			</div>
+		);
+	}
+
+	const html = response.data.head_scripts_styles + ' ' + response.data.html + ' ' + response.data.footer_scripts_styles;
+	return (
+		<figure className="wp-block-embed" key="embed">
+			<SandBox
+				html={ html }
+				title="Preview"
+				type={ response.data.type }
+			/>
+		</figure>
+	);
+}
+
+const applyConnect = connect(
+	( state ) => {
+		return {
+			postId: state.currentPost.id,
+		};
+	},
+);
+
+const applyWithAPIData = withAPIData( ( props ) => {
+	const { shortcode, postId } = props;
+	return {
+		response: `/gutenberg/v1/shortcodes?shortcode=${ encodeURIComponent( shortcode ) }&postId=${ postId }`,
+	};
+} );
+
+export default compose( [
+	applyConnect,
+	applyWithAPIData,
+] )( ShortcodePreview );

blocks/library/shortcode/test/index.js

@@ -7,7 +7,6 @@ import { blockEditRender } from 'blocks/test/helpers';
 describe( 'core/shortcode', () => {
 	test( 'block edit matches snapshot', () => {
 		const wrapper = blockEditRender( name, settings );
-
 		expect( wrapper ).toMatchSnapshot();
 	} );
 } );

components/sandbox/index.js

@@ -136,12 +136,18 @@ class Sandbox extends Component {
 			body {
 				margin: 0;
 			}
+
+			body.html {
+				width: 100%;
+			}
+
 			body.video,
 			body.video > div,
 			body.video > div > iframe {
 				width: 100%;
 				height: 100%;
 			}
+
 			body > div > * {
 				margin-top: 0 !important;	/* has to have !important to override inline styles */
 				margin-bottom: 0 !important;
@@ -157,8 +163,9 @@ class Sandbox extends Component {
 					<style dangerouslySetInnerHTML={ { __html: style } } />
 				</head>
 				<body data-resizable-iframe-connected="data-resizable-iframe-connected" className={ this.props.type }>
-					<div dangerouslySetInnerHTML={ { __html: this.props.html } } />
+					<div id="content" dangerouslySetInnerHTML={ { __html: this.props.html } } />
 					<script type="text/javascript" dangerouslySetInnerHTML={ { __html: observeAndResizeJS } } />
+
 				</body>
 			</html>
 		);