Prevent an error in <ServerSideRender> by allowing POST request (#…

…21068)
WordPress · Aug 15, 2020 · 068064a · 068064a
1 parent 48c4fb9
commit 068064a
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 3 deletions.
diff --git a/packages/server-side-render/CHANGELOG.md b/packages/server-side-render/CHANGELOG.md
@@ -2,6 +2,9 @@
 
 ## Unreleased
 
+### Feature
+- Add an optional prop `httpMethod`, which can be 'POST' or the default 'GET'. Requires WP 5.5 or later. When 'POST', this sends the attributes in the request body, not in the URL. This can allow a bigger attributes object. [#21068](https://github.com/WordPress/gutenberg/pull/21068)
+
 ## 1.7.0 (2020-02-04)
 
 ### Bug

diff --git a/packages/server-side-render/README.md b/packages/server-side-render/README.md
@@ -48,6 +48,12 @@ Examples: "my-custom-server-side-rendered".
 - Type: `String`
 - Required: No
 
+### httpMethod
+
+The HTTP request method to use, either 'GET' or 'POST'. It's 'GET' by default. The 'POST' value will cause an error on WP earlier than 5.5, unless 'rest_endpoints' is filtered in PHP to allow this. If 'POST', this sends the attributes in the request body, not in the URL. This can allow a bigger attributes object.
+- Type: `String`
+- Required: No
+
 ### urlQueryArgs
 
 Query arguments to apply to the request URL.

diff --git a/packages/server-side-render/src/server-side-render.js b/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,
+			httpMethod = 'GET',
+			urlQueryArgs = {},
+		} = props;
+
+		// If httpMethod is 'POST', send 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 isPostRequest = 'POST' === httpMethod;
+		const urlAttributes = isPostRequest ? null : attributes;
+		const path = rendererPath( block, urlAttributes, urlQueryArgs );
+		const data = isPostRequest ? { 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,
+			data,
+			method: isPostRequest ? 'POST' : 'GET',
+		} )
 			.then( ( response ) => {
 				if (
 					this.isStillMounted &&