Add Server Side Render component.

components/index.js

@@ -39,6 +39,7 @@ export { default as ResponsiveWrapper } from './responsive-wrapper';
 export { default as SandBox } from './sandbox';
 export { default as SelectControl } from './select-control';
 export { default as Spinner } from './spinner';
+export { default as ServerSideRender } from './server-side-render';
 export { default as TabPanel } from './tab-panel';
 export { default as TextControl } from './text-control';
 export { default as TextareaControl } from './textarea-control';

components/server-side-render/README.md

@@ -0,0 +1,24 @@
+ServerSideRender
+=======
+
+ServerSideRender component is used for server-side-rendering preview in Gutenberg editor, specifically for dynamic blocks.
+
+
+## Usage
+
+Render core/latest-posts preview.
+```jsx
+	<ServerSideRender
+		block="core/latest-posts"
+		{ this.props.attributes }
+	/>
+```
+
+## Output
+
+Output is using the `render_callback` set when defining the block. For example if `block="core/latest-posts"` as in the example then the output will match `render_callback` output of that block.
+
+## API Endpoint
+API endpoint for getting the output for ServerSideRender is `/gutenberg/v1/blocks-renderer/:block`. It accepts any params which are used as `attributes` for the block's `render_callback` method. 
+
+

components/server-side-render/index.js

@@ -0,0 +1,70 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	Component,
+	RawHTML,
+} from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+import { addQueryArgs } from '@wordpress/url';
+
+export class ServerSideRender extends Component {
+	constructor( props ) {
+		super( props );
+		this.state = {
+			response: {},
+			attributes: props,
+		};
+	}
+
+	componentDidMount() {
+		this.getOutput();
+	}
+
+	componentWillReceiveProps( nextProps ) {
+		if ( JSON.stringify( nextProps ) !== JSON.stringify( this.props ) ) {
+			this.setState( { attributes: nextProps }, this.getOutput );
+		}
+	}
+
+	getOutput() {
+		this.setState( { response: {} } );
+		const { block } = this.props;
+		const attributes = this.state.attributes;
+		const apiURL = addQueryArgs( wpApiSettings.root + 'gutenberg/v1/blocks-renderer/' + block, {
+			...attributes,
+			_wpnonce: wpApiSettings.nonce,
+		} );
+		return window.fetch( apiURL, {
+			credentials: 'include',
+		} ).then( response => {
+			response.json().then( data => ( {
+				data: data,
+				status: response.status,
+			} ) ).then( res => {
+				if ( res.status === 200 ) {
+					this.setState( { response: res } );
+				}
+			} );
+		} );
+	}
+
+	render() {
+		const response = this.state.response;
+		if ( response.isLoading || ! response.data ) {
+			return (
+				<div key="loading" className="wp-block-embed is-loading">
+
+					<p>{ __( 'Loading...' ) }</p>
+				</div>
+			);
+		}
+
+		const html = response.data.output;
+		return (
+			<RawHTML key="html">{ html }</RawHTML>
+		);
+	}
+}
+
+export default ServerSideRender;

lib/class-wp-rest-blocks-renderer-controller.php

@@ -0,0 +1,144 @@
+<?php
+/**
+ * Blocks Renderer REST API: WP_REST_Blocks_Renderer_Controller class
+ *
+ * @package gutenberg
+ * @since ?
+ */
+
+/**
+ * Controller which provides REST endpoint for rendering blocks.
+ *
+ * @since ?
+ *
+ * @see WP_REST_Controller
+ */
+class WP_REST_Blocks_Renderer_Controller extends WP_REST_Controller {
+
+	/**
+	 * Constructs the controller.
+	 *
+	 * @access public
+	 */
+	public function __construct() {
+
+		// @codingStandardsIgnoreLine - PHPCS mistakes $this->namespace for the namespace keyword.
+		$this->namespace = 'gutenberg/v1';
+		$this->rest_base = 'blocks-renderer';
+	}
+
+	/**
+	 * Registers the necessary REST API routes.
+	 *
+	 * @access public
+	 */
+	public function register_routes() {
+
+		// @codingStandardsIgnoreLine - PHPCS mistakes $this->namespace for the namespace keyword.
+		register_rest_route( $this->namespace, '/' . $this->rest_base . '/(?P<name>[\w-]+\/[\w-]+)', array(
+			'args'   => array(
+				'name' => array(
+					'description' => __( 'Unique registered name for the block.', 'gutenberg' ),
+					'type'        => 'string',
+				),
+			),
+			array(
+				'methods'             => WP_REST_Server::READABLE,
+				'callback'            => array( $this, 'get_item_output' ),
+				'permission_callback' => array( $this, 'get_item_output_permissions_check' ),
+				'args'                => array(
+					'context' => $this->get_context_param( array( 'default' => 'view' ) ),
+				),
+			),
+			'schema' => array( $this, 'get_public_item_schema' ),
+		) );
+	}
+
+	/**
+	 * Checks if a given request has access to read blocks.
+	 *
+	 * @since ?
+	 * @access public
+	 *
+	 * @return true|WP_Error True if the request has read access, WP_Error object otherwise.
+	 */
+	public function get_item_output_permissions_check() {
+		if ( ! current_user_can( 'edit_posts' ) ) {
+			return new WP_Error( 'gutenberg_block_cannot_read', __( 'Sorry, you are not allowed to read Gutenberg blocks as this user.', 'gutenberg' ), array(
+				'status' => rest_authorization_required_code(),
+			) );
+		}
+
+		return true;
+	}
+
+	/**
+	 * Returns block output from block's registered render_callback.
+	 *
+	 * @since ?
+	 * @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_item_output( $request ) {
+		if ( ! isset( $request['name'] ) ) {
+			return new WP_Error( 'rest_block_invalid_name', __( 'Invalid block name.', 'gutenberg' ), array( 'status' => 404 ) );
+		}
+
+		$registry = WP_Block_Type_Registry::get_instance();
+		$block    = $registry->get_registered( $request['name'] );
+
+		if ( ! $block || ! $block instanceof WP_Block_Type ) {
+			return new WP_Error( 'rest_block_invalid_name', __( 'Invalid block name.', 'gutenberg' ), array( 'status' => 404 ) );
+		}
+
+		$atts = $this->prepare_attributes( $request->get_params() );
+
+		$data = array(
+			'output' => $block->render( $atts ),
+		);
+		return rest_ensure_response( $data );
+	}
+
+	/**
+	 * Fix potential boolean value issues. The values come as strings and "false" and "true" might generate issues if left like this.
+	 *
+	 * @param array $attributes Attributes.
+	 * @return mixed Attributes.
+	 */
+	public function prepare_attributes( $attributes ) {
+		foreach ( $attributes as $key => $value ) {
+			if ( 'false' === $value ) {
+				$attributes[ $key ] = false;
+			} elseif ( 'true' === $value ) {
+				$attributes[ $key ] = true;
+			}
+		}
+
+		return $attributes;
+	}
+
+	/**
+	 * Retrieves block's output schema, conforming to JSON Schema.
+	 *
+	 * @since ?
+	 * @access public
+	 *
+	 * @return array Item schema data.
+	 */
+	public function get_item_schema() {
+		return array(
+			'$schema'    => 'http://json-schema.org/schema#',
+			'title'      => 'blocks-renderer',
+			'type'       => 'object',
+			'properties' => array(
+				'output' => array(
+					'description' => __( 'The block\'s output.', 'gutenberg' ),
+					'type'        => 'string',
+					'required'    => true,
+				),
+			),
+		);
+	}
+}

lib/load.php

@@ -13,6 +13,7 @@
 require dirname( __FILE__ ) . '/class-wp-block-type.php';
 require dirname( __FILE__ ) . '/class-wp-block-type-registry.php';
 require dirname( __FILE__ ) . '/class-wp-rest-blocks-controller.php';
+require dirname( __FILE__ ) . '/class-wp-rest-blocks-renderer-controller.php';
 require dirname( __FILE__ ) . '/blocks.php';
 require dirname( __FILE__ ) . '/client-assets.php';
 require dirname( __FILE__ ) . '/compat.php';

lib/register.php

@@ -441,6 +441,17 @@ function gutenberg_register_post_types() {
 }
 add_action( 'init', 'gutenberg_register_post_types' );
 
+/**
+ * Registers the REST API routes needed by the Gutenberg editor.
+ *
+ * @since ?
+ */
+function gutenberg_register_rest_routes() {
+	$controller = new WP_REST_Blocks_Renderer_Controller();
+	$controller->register_routes();
+}
+add_action( 'rest_api_init', 'gutenberg_register_rest_routes' );
+
 /**
  * Gets revisions details for the selected post.
  *