Prevent an error in <ServerSideRender> by allowing POST request

packages/server-side-render/README.md

@@ -48,6 +48,12 @@ Examples: "my-custom-server-side-rendered".
 - Type: `String`
 - Required: No
 
+### requestBody
+
+Whether to send the attributes in the request body, not in the URL. False by default. If true, this makes a POST instead of a GET request, which can allow a bigger attributes object. Only works with WP 5.5 and later, or if 'rest_endpoints' is filtered in PHP to allow this.
+- Type: `Boolean`
+- Required: No
+
 ### urlQueryArgs
 
 Query arguments to apply to the request URL.

packages/server-side-render/src/server-side-render.js

@@ -53,12 +53,27 @@ export class ServerSideRender extends Component {
 		if ( null !== this.state.response ) {
 			this.setState( { response: null } );
 		}
-		const { block, attributes = null, urlQueryArgs = {} } = props;
+		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;
 
-		const path = rendererPath( block, attributes, urlQueryArgs );
 		// 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 } )
+		const fetchRequest = ( this.currentFetchRequest = apiFetch( {
+			path,
+			method,
+			data,
+		} )
 			.then( ( response ) => {
 				if (
 					this.isStillMounted &&