Prevent an error for a block with a large attributes object

.travis.yml

@@ -20,14 +20,20 @@ matrix:
       env: WP_VERSION=latest
     - php: 7.2
       env: WP_VERSION=latest
+    - php: 7.2
+      env: WP_VERSION=5.3
     - php: 7.1
       env: WP_VERSION=latest
+    - php: 7.1
+      env: WP_VERSION=5.2
     - php: 7.0
       env: WP_VERSION=latest
-    - php: 5.6
-      env: WP_VERSION=latest
+    - php: 7.0
+      env: WP_VERSION=5.1
     - php: 5.6
       env: WP_VERSION=trunk
+    - php: 5.6
+      env: WP_VERSION=5.0
     - php: 5.6
       env: WP_TRAVISCI=lint
     - php: 7.3

js/blocks/components/edit.js

@@ -1,12 +1,7 @@
-/**
- * WordPress dependencies
- */
-import ServerSideRender from '@wordpress/server-side-render';
-
 /**
  * Internal dependencies
  */
-import { BlockLabInspector, FormControls } from './';
+import { BlockLabInspector, FormControls, ServerSideRender } from './';
 import icons from '../../../assets/icons.json';
 
 /**
@@ -38,6 +33,7 @@ const Edit = ( { blockProps, block } ) => {
 						block={ `block-lab/${ block.name }` }
 						attributes={ attributes }
 						className="block-lab-editor__ssr"
+						requestBody={ true }
 					/>
 				) }
 			</div>

js/blocks/components/index.js

@@ -6,4 +6,5 @@ export { default as Fields } from './fields';
 export { default as FormControls } from './form-controls';
 export { default as Image } from './image';
 export { default as RepeaterRows } from './repeater-rows';
+export { default as ServerSideRender } from './server-side-render';
 export { default as TinyMCE } from './tiny-mce';

js/blocks/components/server-side-render.js

@@ -0,0 +1,204 @@
+/**
+ * Forked from Gutenberg, with a minor edit to allow using POST requests instead of GET requests.
+ * Todo: delete if this is merged: https://github.com/WordPress/gutenberg/pull/21068/
+ *
+ * @see https://github.com/WordPress/gutenberg/blob/c72030189017c8aac44453c1386f4251e45e80df/packages/server-side-render/src/index.js
+ */
+
+/**
+ * External dependencies
+ */
+import { isEqual, debounce } from 'lodash';
+
+/**
+ * WordPress dependencies
+ */
+import apiFetch from '@wordpress/api-fetch';
+import { Placeholder, Spinner } from '@wordpress/components';
+import { withSelect } from '@wordpress/data';
+import { Component, RawHTML, useMemo } from '@wordpress/element';
+import { __, sprintf } from '@wordpress/i18n';
+import { addQueryArgs } from '@wordpress/url';
+
+/**
+ * Constants
+ */
+const EMPTY_OBJECT = {};
+
+export function rendererPath( block, attributes = null, urlQueryArgs = {} ) {
+	return addQueryArgs( `/wp/v2/block-renderer/${ block }`, {
+		context: 'edit',
+		...( null !== attributes ? { attributes } : {} ),
+		...urlQueryArgs,
+	} );
+}
+
+export class ServerSideRender extends Component {
+	constructor( props ) {
+		super( props );
+		this.state = {
+			response: null,
+		};
+	}
+
+	componentDidMount() {
+		this.isStillMounted = true;
+		this.fetch( this.props );
+		// Only debounce once the initial fetch occurs to ensure that the first
+		// renders show data as soon as possible.
+		this.fetch = debounce( this.fetch, 500 );
+	}
+
+	componentWillUnmount() {
+		this.isStillMounted = false;
+	}
+
+	componentDidUpdate( prevProps ) {
+		if ( ! isEqual( prevProps, this.props ) ) {
+			this.fetch( this.props );
+		}
+	}
+
+	fetch( props ) {
+		if ( ! this.isStillMounted ) {
+			return;
+		}
+		if ( null !== this.state.response ) {
+			this.setState( { response: null } );
+		}
+
+		const {
+			block,
+			attributes = null,
+			requestBody,
+			urlQueryArgs = {},
+		} = props;
+
+		// If requestBody, make a POST request, with the attributes in the request body instead of the URL.
+		// This allows sending a larger attributes object than in a GET request, where the attributes are in the URL.
+		const urlAttributes = requestBody ? null : attributes;
+		const path = rendererPath( block, urlAttributes, urlQueryArgs );
+		const method = requestBody ? 'POST' : 'GET';
+		const data = requestBody ? attributes : null;
+
+		// Store the latest fetch request so that when we process it, we can
+		// check if it is the current request, to avoid race conditions on slow networks.
+		const fetchRequest = ( this.currentFetchRequest = apiFetch( {
+			path,
+			method,
+			data,
+		} )
+			.then( ( response ) => {
+				if (
+					this.isStillMounted &&
+					fetchRequest === this.currentFetchRequest &&
+					response
+				) {
+					this.setState( { response: response.rendered } );
+				}
+			} )
+			.catch( ( error ) => {
+				if (
+					this.isStillMounted &&
+					fetchRequest === this.currentFetchRequest
+				) {
+					this.setState( {
+						response: {
+							error: true,
+							errorMsg: error.message,
+						},
+					} );
+				}
+			} ) );
+		return fetchRequest;
+	}
+
+	render() {
+		const response = this.state.response;
+		const {
+			className,
+			EmptyResponsePlaceholder,
+			ErrorResponsePlaceholder,
+			LoadingResponsePlaceholder,
+		} = this.props;
+
+		if ( response === '' ) {
+			return (
+				<EmptyResponsePlaceholder
+					response={ response }
+					{ ...this.props }
+				/>
+			);
+		} else if ( ! response ) {
+			return (
+				<LoadingResponsePlaceholder
+					response={ response }
+					{ ...this.props }
+				/>
+			);
+		} else if ( response.error ) {
+			return (
+				<ErrorResponsePlaceholder
+					response={ response }
+					{ ...this.props }
+				/>
+			);
+		}
+
+		return (
+			<RawHTML key="html" className={ className }>
+				{ response }
+			</RawHTML>
+		);
+	}
+}
+
+ServerSideRender.defaultProps = {
+	EmptyResponsePlaceholder: ( { className } ) => (
+		<Placeholder className={ className }>
+			{ __( 'Block rendered as empty.', 'block-lab' ) }
+		</Placeholder>
+	),
+	ErrorResponsePlaceholder: ( { response, className } ) => {
+		const errorMessage = sprintf(
+			// translators: %s: error message describing the problem
+			__( 'Error loading block: %s', 'block-lab' ),
+			response.errorMsg
+		);
+		return (
+			<Placeholder className={ className }>{ errorMessage }</Placeholder>
+		);
+	},
+	LoadingResponsePlaceholder: ( { className } ) => {
+		return (
+			<Placeholder className={ className }>
+				<Spinner />
+			</Placeholder>
+		);
+	},
+};
+
+export default withSelect( ( select ) => {
+	const coreEditorSelect = select( 'core/editor' );
+	if ( coreEditorSelect ) {
+		const currentPostId = coreEditorSelect.getCurrentPostId();
+		if ( currentPostId ) {
+			return {
+				currentPostId,
+			};
+		}
+	}
+	return EMPTY_OBJECT;
+} )( ( { urlQueryArgs = EMPTY_OBJECT, currentPostId, ...props } ) => {
+	const newUrlQueryArgs = useMemo( () => {
+		if ( ! currentPostId ) {
+			return urlQueryArgs;
+		}
+		return {
+			post_id: currentPostId,
+			...urlQueryArgs,
+		};
+	}, [ currentPostId, urlQueryArgs ] );
+
+	return <ServerSideRender urlQueryArgs={ newUrlQueryArgs } { ...props } />;
+} );

package.json

@@ -40,7 +40,6 @@
     "@wordpress/i18n": "3.7.0",
     "@wordpress/keycodes": "2.7.0",
     "@wordpress/scripts": "6.1.1",
-    "@wordpress/server-side-render": "1.5.0",
     "@wordpress/url": "2.9.0",
     "autoprefixer": "9.7.3",
     "babel-core": "6.26.3",
@@ -58,6 +57,7 @@
     "gulp-string-replace": "^1.1.2",
     "husky": "^4.0.10",
     "jest-silent-reporter": "0.1.2",
+    "lodash": "4.17.15",
     "merge-stream": "^2.0.0",
     "mini-css-extract-plugin": "0.8.2",
     "node-sass": "^4.13.1",

php/blocks/class-rest.php

@@ -0,0 +1,93 @@
+<?php
+/**
+ * REST API handling.
+ *
+ * @package   Block_Lab
+ * @copyright Copyright(c) 2020, Block Lab
+ * @license http://opensource.org/licenses/GPL-2.0 GNU General Public License, version 2 (GPL-2.0)
+ */
+
+namespace Block_Lab\Blocks;
+
+use Block_Lab\Component_Abstract;
+
+/**
+ * Class Block
+ */
+class Rest extends Component_Abstract {
+
+	/**
+	 * Register all the hooks.
+	 */
+	public function register_hooks() {
+		add_filter( 'rest_endpoints', [ $this, 'filter_block_endpoints' ] );
+	}
+
+	/**
+	 * Filters the Block Lab endpoints to allow POST requests.
+	 *
+	 * @param array $endpoints The REST API endpoints, an associative array of $route => $handlers.
+	 * @return array The filtered endpoints, with the Block Lab endpoints allowing POST requests.
+	 */
+	public function filter_block_endpoints( $endpoints ) {
+		foreach ( $endpoints as $route => $handler ) {
+			if ( 0 === strpos( $route, '/wp/v2/block-renderer/(?P<name>block-lab/' ) && isset( $endpoints[ $route ][0] ) ) {
+				$endpoints[ $route ][0]['methods']  = [ \WP_REST_Server::READABLE, \WP_REST_Server::CREATABLE ];
+				$endpoints[ $route ][0]['callback'] = [ $this, 'get_item' ];
+			}
+		}
+
+		return $endpoints;
+	}
+
+	/**
+	 * Returns block output from block's registered render_callback.
+	 *
+	 * Forked from WP_REST_Block_Renderer_Controller::get_item(), with a simple change to process POST requests.
+	 *
+	 * @todo: revert if this has been merged and enough version of Core have passed: https://github.com/WordPress/wordpress-develop/pull/196/
+	 * @see https://github.com/WordPress/wordpress-develop/blob/dfa959bbd58f13b504e269aad45412a85f74e491/src/wp-includes/rest-api/endpoints/class-wp-rest-block-renderer-controller.php#L121
+	 *
+	 * @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 ) {
+		$post_id = isset( $request['post_id'] ) ? intval( $request['post_id'] ) : 0;
+
+		if ( 0 < $post_id ) {
+			$GLOBALS['post'] = get_post( $post_id ); // phpcs:ignore WordPress.WP.GlobalVariablesOverride.Prohibited
+
+			// Set up postdata since this will be needed if post_id was set.
+			setup_postdata( $GLOBALS['post'] );
+		}
+		$registry = \WP_Block_Type_Registry::get_instance();
+
+		if ( null === $registry->get_registered( $request['name'] ) ) {
+			return new WP_Error(
+				'block_invalid',
+				__( 'Invalid block.', 'block-lab' ),
+				[
+					'status' => 404,
+				]
+			);
+		}
+
+		// In a POST request, the attributes appear as JSON in the request body.
+		$attributes = \WP_REST_Server::CREATABLE === $request->get_method() ? json_decode( $request->get_body(), true ) : $request->get_param( 'attributes' );
+
+		// Create an array representation simulating the output of parse_blocks.
+		$block = [
+			'blockName'    => $request['name'],
+			'attrs'        => $attributes,
+			'innerHTML'    => '',
+			'innerContent' => [],
+		];
+
+		// Render using render_block to ensure all relevant filters are used.
+		$data = [
+			'rendered' => render_block( $block ),
+		];
+
+		return rest_ensure_response( $data );
+	}
+}

php/class-plugin.php

@@ -50,6 +50,7 @@ public function init() {
 		$this->util = new Util();
 		$this->register_component( $this->util );
 		$this->register_component( new Post_Types\Block_Post() );
+		$this->register_component( new Blocks\Rest() );
 
 		$this->loader = new Blocks\Loader();
 		$this->register_component( $this->loader );