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';
 
@@ -59,26 +58,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 <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

@@ -142,12 +142,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;
@@ -163,8 +169,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>
 		);

lib/class-wp-rest-shortcodes-controller.php

@@ -0,0 +1,186 @@
+<?php
+/**
+ * Shortcode Blocks REST API: WP_REST_Shortcodes_Controller class
+ *
+ * @package gutenberg
+ * @since 2.0.0
+ */
+
+/**
+ * Controller which provides a REST endpoint for Gutenberg to preview shortcode blocks.
+ *
+ * @since 2.0.0
+ *
+ * @see WP_REST_Controller
+ */
+class WP_REST_Shortcodes_Controller extends WP_REST_Controller {
+	/**
+	 * Constructs the controller.
+	 *
+	 * @since 2.0.0
+	 * @access public
+	 */
+	public function __construct() {
+		// @codingStandardsIgnoreLine - PHPCS mistakes $this->namespace for the namespace keyword
+		$this->namespace = 'gutenberg/v1';
+		$this->rest_base = 'shortcodes';
+	}
+
+	/**
+	 * Registers the necessary REST API routes.
+	 *
+	 * @since 0.10.0
+	 * @access public
+	 */
+	public function register_routes() {
+		// @codingStandardsIgnoreLine - PHPCS mistakes $this->namespace for the namespace keyword
+		$namespace = $this->namespace;
+
+		register_rest_route( $namespace, '/' . $this->rest_base, array(
+			array(
+				'methods'             => WP_REST_Server::READABLE,
+				'callback'            => array( $this, 'get_shortcode_output' ),
+				'permission_callback' => array( $this, 'get_shortcode_output_permissions_check' ),
+			),
+			'schema' => array( $this, 'get_public_item_schema' ),
+		) );
+	}
+
+	/**
+	 * Checks if a given request has access to read shortcode blocks.
+	 *
+	 * @since 2.0.0
+	 * @access public
+	 *
+	 * @param  WP_REST_Request $request Full details about the request.
+	 * @return true|WP_Error True if the request has read access, WP_Error object otherwise.
+	 */
+	public function get_shortcode_output_permissions_check( $request ) {
+		if ( ! current_user_can( 'edit_posts' ) ) {
+			return new WP_Error( 'gutenberg_shortcode_block_cannot_read', __( 'Sorry, you are not allowed to read shortcode blocks as this user.', 'gutenberg' ), array(
+				'status' => rest_authorization_required_code(),
+			) );
+		}
+
+		return true;
+	}
+
+	/**
+	 * Filters shortcode content through their hooks.
+	 *
+	 * @since 2.0.0
+	 * @access public
+	 *
+	 * @param WP_REST_Request $request Full details about the request.
+	 * @return WP_REST_Response|WP_Error Response object on success, or WP_Error object on failure.
+	 */
+	public function get_shortcode_output( $request ) {
+		global $post;
+		global $wp_embed;
+		$head_scripts_styles   = '';
+		$footer_scripts_styles = '';
+		$type                  = 'html';
+		$output                = '';
+		$args                  = $request->get_params();
+		$post                  = isset( $args['postId'] ) ? get_post( $args['postId'] ) : null;
+		$shortcode             = isset( $args['shortcode'] ) ? trim( $args['shortcode'] ) : '';
+
+		// Initialize $data.
+		$data = array(
+			'html' => $output,
+			'type' => $type,
+		);
+
+		if ( empty( $shortcode ) ) {
+			$data['html'] = __( 'Enter something to preview', 'gutenberg' );
+			return rest_ensure_response( $data );
+		}
+
+		if ( ! empty( $post ) ) {
+			setup_postdata( $post );
+		}
+
+		$output = trim( apply_filters( 'the_content', $shortcode ) );
+
+		if ( empty( $output ) ) {
+			$data['html'] = __( 'Sorry, couldn\'t render a preview', 'gutenberg' );
+			return rest_ensure_response( $data );
+		}
+
+		ob_start();
+		wp_head();
+		$head_scripts_styles = ob_get_clean();
+
+		ob_start();
+		wp_footer();
+		$footer_scripts_styles = ob_get_clean();
+
+		// Check if shortcode is returning a video. The video type will be used by the frontend to maintain 16:9 aspect ratio.
+		if ( has_shortcode( $shortcode, 'video' ) ) {
+			$type = 'video';
+		} elseif ( has_shortcode( $shortcode, 'embed' ) ) {
+			$embed_request = new WP_REST_Request( 'GET', '/oembed/1.0/proxy' );
+			$pattern       = get_shortcode_regex();
+			if ( preg_match_all( '/' . $pattern . '/s', $shortcode, $matches ) ) {
+				$embed_request['url'] = $matches[5][0];
+				$embed_response       = rest_do_request( $embed_request );
+				if ( $embed_response->is_error() ) {
+					// Convert to a WP_Error object.
+					$error      = $embed_response->as_error();
+					$message    = $embed_response->get_error_message();
+					$error_data = $embed_response->get_error_data();
+					$status     = isset( $error_data['status'] ) ? $error_data['status'] : 500;
+					wp_die( printf( '<p>An error occurred: %s (%d)</p>', $message, $error_data ) );
+				}
+				$embed_data = $embed_response->get_data();
+			}
+			$type = $embed_data->type;
+		}
+		$data = array(
+			'html'                  => $output,
+			'head_scripts_styles'   => $head_scripts_styles,
+			'footer_scripts_styles' => $footer_scripts_styles,
+			'type'                  => $type,
+		);
+
+		return rest_ensure_response( $data );
+	}
+
+	/**
+	 * Retrieves a shortcode block's schema, conforming to JSON Schema.
+	 *
+	 * @since 0.10.0
+	 * @access public
+	 *
+	 * @return array Item schema data.
+	 */
+	public function get_item_schema() {
+		return array(
+			'$schema'    => 'http://json-schema.org/schema#',
+			'title'      => 'shortcode-block',
+			'type'       => 'object',
+			'properties' => array(
+				'html'                  => array(
+					'description' => __( 'The block\'s content with shortcodes filtered through hooks.', 'gutenberg' ),
+					'type'        => 'string',
+					'required'    => true,
+				),
+				'type'                  => array(
+					'description' => __( 'The filtered content type - video or otherwise', 'gutenberg' ),
+					'type'        => 'string',
+					'required'    => true,
+				),
+				'head_scripts_styles'   => array(
+					'description' => __( 'Links to  style sheets and scripts to render the shortcode', 'gutenberg' ),
+					'type'        => 'string',
+					'required'    => true,
+				),
+				'footer_scripts_styles' => array(
+					'description' => __( 'Links to  style sheets and scripts to render the shortcode', 'gutenberg' ),
+					'type'        => 'string',
+					'required'    => true,
+				),
+			),
+		);
+	}
+}