Enhance the shortcode block to support previewing of shortcodes

blocks/library/shortcode/block.js

@@ -0,0 +1,102 @@
+/**
+ * External dependencies
+ */
+import { connect } from 'react-redux';
+
+/**
+ * WordPress dependencies
+ */
+import { withInstanceId, Dashicon } from '@wordpress/components';
+import { Component, compose } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import ShortcodePreview from './preview';
+import BlockControls from '../../block-controls';
+import { getCurrentPostId } from '../../../editor/store/selectors';
+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, focus, setFocus } = this.props;
+		const inputId = `blocks-shortcode-input-${ instanceId }`;
+
+		const controls = focus && (
+			<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={ () => this.setState( { preview: true } ) }>
+						<span>{ __( 'Preview' ) }</span>
+					</button>
+				</div>
+			</BlockControls>
+		);
+
+		if ( ! preview ) {
+			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>,
+			];
+		}
+
+		const shortcodeContent = ( !! attributes.text ) ? attributes.text.trim() : '';
+
+		if ( ! shortcodeContent.length ) {
+			return [
+				controls,
+				<div key="empty" className="wp-block-embed is-loading">
+					{ __( 'Enter something to preview' ) }
+				</div>,
+			];
+		}
+
+		return [
+			controls,
+			<ShortcodePreview key="preview"
+				shortcode={ shortcodeContent }
+				postId={ postId }
+				setFocus={ setFocus }
+			/>,
+		];
+	}
+}
+
+const applyConnect = connect(
+	( state ) => {
+		return {
+			postId: getCurrentPostId( state ),
+		};
+	},
+);
+
+export default compose( [
+	applyConnect,
+	withInstanceId,
+] )( Shortcode );

blocks/library/shortcode/index.js

@@ -2,13 +2,12 @@
  * WordPress dependencies
  */
 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';
 
@@ -58,26 +57,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="editor-code" />
-						{ __( 'Shortcode' ) }
-					</label>
-					<PlainText
-						id={ inputId }
-						value={ attributes.text }
-						placeholder={ __( 'Write shortcode here…' ) }
-						onChange={ ( text ) => setAttributes( { text } ) }
-					/>
-				</div>
-			);
-		}
-	),
+	edit: Shortcode,
 
 	save( { attributes } ) {
 		return attributes.text;

blocks/library/shortcode/preview.js

@@ -0,0 +1,37 @@
+/**
+ * WordPress dependencies
+ */
+import { withAPIData, Spinner, SandBox } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+
+function ShortcodePreview( { response, setFocus } ) {
+	if ( response.isLoading || ! response.data ) {
+		return (
+			<div key="loading" className="wp-block-embed is-loading">
+				<Spinner />
+				<p>{ __( 'Loading...' ) }</p>
+			</div>
+		);
+	}
+
+	const html = response.data.html + ' ' + response.data.js + ' ' + response.data.style;
+	return (
+		<figure className="wp-block-embed" key="embed">
+			<SandBox
+				html={ html }
+				title="Preview"
+				type={ response.data.type }
+				onFocus={ setFocus }
+			/>
+		</figure>
+	);
+}
+
+const applyWithAPIData = withAPIData( ( props ) => {
+	const { shortcode, postId } = props;
+	return {
+		response: `/gutenberg/v1/shortcodes?shortcode=${ encodeURIComponent( shortcode ) }&postId=${ postId }`,
+	};
+} );
+
+export default applyWithAPIData( ShortcodePreview );

blocks/library/shortcode/test/__snapshots__/index.js.snap

@@ -5,7 +5,7 @@ exports[`core/shortcode block edit matches snapshot 1`] = `
   class="wp-block-shortcode"
 >
   <label
-    for="blocks-shortcode-input-0"
+    for="blocks-shortcode-input-undefined"
   >
     <svg
       aria-hidden="true"
@@ -25,7 +25,7 @@ exports[`core/shortcode block edit matches snapshot 1`] = `
   </label>
   <textarea
     class="blocks-plain-text"
-    id="blocks-shortcode-input-0"
+    id="blocks-shortcode-input-undefined"
     placeholder="Write shortcode here…"
     rows="1"
   />

blocks/library/shortcode/test/index.js

@@ -2,12 +2,13 @@
  * Internal dependencies
  */
 import { name, settings } from '../';
+import { Shortcode } from '../block';
 import { blockEditRender } from 'blocks/test/helpers';
 
+settings.edit = Shortcode;
 describe( 'core/shortcode', () => {
 	test( 'block edit matches snapshot', () => {
 		const wrapper = blockEditRender( name, settings );
-
 		expect( wrapper ).toMatchSnapshot();
 	} );
 } );

components/sandbox/index.js

@@ -96,6 +96,12 @@ export default class Sandbox extends Component {
 
 				function sendResize() {
 					var clientBoundingRect = document.body.getBoundingClientRect();
+					if ( 0 === clientBoundingRect.height ) {
+						clientBoundingRect.height = document.getElementById( 'content' ).clientHeight;
+					}
+					if ( 0 === clientBoundingRect.width ) {
+						clientBoundingRect.width = document.getElementById( 'content' ).clientWidth;
+					}
 					window.parent.postMessage( {
 						action: 'resize',
 						width: clientBoundingRect.width,
@@ -141,12 +147,18 @@ export default 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;
@@ -162,8 +174,9 @@ export default 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>
 		);