diff --git a/packages/server-side-render/CHANGELOG.md b/packages/server-side-render/CHANGELOG.md index e7104e27200e7..9355b0478ca3d 100644 --- 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 index b9baee0f813b0..bfe883037b815 100644 --- 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 index f428adf8f4495..b70f6736720b3 100644 --- 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 &&