Add Server Side Render component.

components/index.js

@@ -43,6 +43,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,30 @@
+ServerSideRender
+=======
+
+ServerSideRender component is used for server-side rendering preview in Gutenberg editor, specifically for dynamic blocks. Server-side rendering in a block's `edit` function should be mostly limited for blocks which are heavily dependent on (existing) PHP rendering logic that is heavily intertwined with data, such as when there are no endpoints available.
+
+Usage of ServerSideRender component could also be justified in the following two cases:
+* Lack of potential to take some existing widget-like functionality and improve its user-facing editing experience.
+* Unwillingness to create a full JS experience for a block considered legacy.
+
+Note that ServerSideRender should be regarded as a fallback.
+
+New blocks should be built in conjunction with any necessary REST API endpoints so that JavaScript can be used for rendering client-side in the `edit` function for the best user experience, instead of relying on using the PHP `render_callback`. The logic necessary for rendering should be included in the endpoint so that both the client-side JS and server-side PHP logic should require a mininal amount of differences.
+
+## Usage
+
+Render core/archives preview.
+```jsx
+	<ServerSideRender
+		block="core/archives"
+		attributes={ this.props.attributes }
+	/>
+```
+
+## Output
+
+Output is using the `render_callback` set when defining the block. For example if `block="core/archives"` 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/block-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,72 @@
+/**
+ * External dependencies.
+ */
+import { isEqual, isObject, map } from 'lodash';
+
+/**
+ * WordPress dependencies
+ */
+import {
+	Component,
+	RawHTML,
+} from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+
+export class ServerSideRender extends Component {
+	constructor( props ) {
+		super( props );
+		this.state = {
+			response: null,
+		};
+	}
+
+	componentDidMount() {
+		this.fetch( this.props );
+	}
+
+	componentWillReceiveProps( nextProps ) {
+		if ( ! isEqual( nextProps, this.props ) ) {
+			this.fetch( nextProps );
+		}
+	}
+
+	fetch( props ) {
+		this.setState( { response: null } );
+		const { block, attributes } = props;
+
+		const path = '/gutenberg/v1/block-renderer/' + block + '?context=edit&' + this.getQueryUrlFromObject( { attributes } );
+
+		return wp.apiRequest( { path: path } ).then( ( response ) => {
+			if ( response && response.rendered ) {
+				this.setState( { response: response.rendered } );
+			}
+		} );
+	}
+
+	getQueryUrlFromObject( obj, prefix ) {
+		return map( obj, ( paramValue, paramName ) => {
+			const key = prefix ? prefix + '[' + paramName + ']' : paramName,
+				value = obj[ paramName ];
+			return isObject( paramValue ) ? this.getQueryUrlFromObject( value, key ) :
+				encodeURIComponent( key ) + '=' + encodeURIComponent( value );
+		} ).join( '&' );
+	}
+
+	render() {
+		const response = this.state.response;
+		if ( ! response || ! response.length ) {
+			return (
+				<div key="loading" className="wp-block-embed is-loading">
+
+					<p>{ __( 'Loading...' ) }</p>
+				</div>
+			);
+		}
+
+		return (
+			<RawHTML key="html">{ response }</RawHTML>
+		);
+	}
+}
+
+export default ServerSideRender;

lib/class-wp-block-type-registry.php

@@ -17,7 +17,7 @@ final class WP_Block_Type_Registry {
 	 *
 	 * @since 0.6.0
 	 * @access private
-	 * @var array
+	 * @var WP_Block_Type[]
 	 */
 	private $registered_block_types = array();
 
@@ -142,7 +142,7 @@ public function get_registered( $name ) {
 	 * @since 0.6.0
 	 * @access public
 	 *
-	 * @return array Associative array of `$block_type_name => $block_type` pairs.
+	 * @return WP_Block_Type[] Associative array of `$block_type_name => $block_type` pairs.
 	 */
 	public function get_all_registered() {
 		return $this->registered_block_types;

lib/class-wp-block-type.php

@@ -137,7 +137,7 @@ public function prepare_attributes_for_render( $attributes ) {
 			if ( isset( $attributes[ $attribute_name ] ) ) {
 				$is_valid = rest_validate_value_from_schema( $attributes[ $attribute_name ], $schema );
 				if ( ! is_wp_error( $is_valid ) ) {
-					$value = $attributes[ $attribute_name ];
+					$value = rest_sanitize_value_from_schema( $attributes[ $attribute_name ], $schema );
 				}
 			}
 

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

@@ -0,0 +1,161 @@
+<?php
+/**
+ * Block Renderer REST API: WP_REST_Block_Renderer_Controller class
+ *
+ * @package gutenberg
+ * @since ?
+ */
+
+/**
+ * Controller which provides REST endpoint for rendering a block.
+ *
+ * @since ?
+ *
+ * @see WP_REST_Controller
+ */
+class WP_REST_Block_Renderer_Controller extends WP_REST_Controller {
+
+	/**
+	 * Constructs the controller.
+	 *
+	 * @access public
+	 */
+	public function __construct() {
+		$this->namespace = 'gutenberg/v1';
+		$this->rest_base = 'block-renderer';
+	}
+
+	/**
+	 * Registers the necessary REST API routes, one for each dynamic block.
+	 *
+	 * @access public
+	 */
+	public function register_routes() {
+		$block_types = WP_Block_Type_Registry::get_instance()->get_all_registered();
+		foreach ( $block_types as $block_type ) {
+			if ( ! $block_type->is_dynamic() ) {
+				continue;
+			}
+
+			register_rest_route( $this->namespace, '/' . $this->rest_base . '/(?P<name>' . $block_type->name . ')', 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' ),
+					'permission_callback' => array( $this, 'get_item_permissions_check' ),
+					'args'                => array(
+						'context'    => $this->get_context_param( array( 'default' => 'view' ) ),
+						'attributes' => array(
+							/* translators: %s is the name of the block */
+							'description'          => sprintf( __( 'Attributes for %s block', 'gutenberg' ), $block_type->name ),
+							'type'                 => 'object',
+							'additionalProperties' => false,
+							'properties'           => $block_type->attributes,
+						),
+						'post_id'    => array(
+							'description' => __( 'ID of the post context.', 'gutenberg' ),
+							'type'        => 'integer',
+						),
+					),
+				),
+				'schema' => array( $this, 'get_public_item_schema' ),
+			) );
+		}
+	}
+
+	/**
+	 * Checks if a given request has access to read blocks.
+	 *
+	 * @since ?
+	 * @access public
+	 *
+	 * @param WP_REST_Request $request Request.
+	 * @return true|WP_Error True if the request has read access, WP_Error object otherwise.
+	 */
+	public function get_item_permissions_check( $request ) {
+		global $post;
+
+		$post_id = isset( $request['post_id'] ) ? intval( $request['post_id'] ) : 0;
+
+		if ( 0 < $post_id ) {
+			$post = get_post( $post_id );
+			if ( ! $post || ! current_user_can( 'edit_post', $post->ID ) ) {
+				return new WP_Error( 'gutenberg_block_cannot_read', __( 'Sorry, you are not allowed to read Gutenberg blocks of this post', 'gutenberg' ), array(
+					'status' => rest_authorization_required_code(),
+				) );
+			}
+		} else {
+			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( $request ) {
+		global $post;
+
+		$post_id = isset( $request['post_id'] ) ? intval( $request['post_id'] ) : 0;
+
+		if ( 0 < $post_id ) {
+			$post = get_post( $post_id );
+
+			// Set up postdata since this will be needed if post_id was set.
+			setup_postdata( $post );
+		}
+		$registry = WP_Block_Type_Registry::get_instance();
+		$block    = $registry->get_registered( $request['name'] );
+
+		if ( null === $block ) {
+			return new WP_Error( 'gutenberg_block_invalid', __( 'Invalid block.', 'gutenberg' ), array(
+				'status' => 404,
+			) );
+		}
+
+		$data = array(
+			'rendered' => $block->render( $request->get_param( 'attributes' ) ),
+		);
+		return rest_ensure_response( $data );
+	}
+
+	/**
+	 * 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'      => 'rendered-block',
+			'type'       => 'object',
+			'properties' => array(
+				'rendered' => array(
+					'description' => __( 'The rendered block.', 'gutenberg' ),
+					'type'        => 'string',
+					'required'    => true,
+					'context'     => array( 'edit' ),
+				),
+			),
+		);
+	}
+}

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-block-renderer-controller.php';
 require dirname( __FILE__ ) . '/blocks.php';
 require dirname( __FILE__ ) . '/client-assets.php';
 require dirname( __FILE__ ) . '/compat.php';

lib/register.php

@@ -431,6 +431,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_Block_Renderer_Controller();
+	$controller->register_routes();
+}
+add_action( 'rest_api_init', 'gutenberg_register_rest_routes' );
+
 /**
  * Gets revisions details for the selected post.
  *

phpcs.xml.dist

@@ -20,6 +20,9 @@
 	<file>./phpunit</file>
 	<file>gutenberg.php</file>
 
+	<rule ref="PHPCompatibility.PHP.NewKeywords.t_namespaceFound">
+		<exclude-pattern>lib/class-wp-rest-block-renderer-controller.php</exclude-pattern>
+	</rule>
 	<!-- These special comments are markers for the build process -->
 	<rule ref="Squiz.Commenting.InlineComment.WrongStyle">
 		<exclude-pattern>gutenberg.php</exclude-pattern>