Improve serialising JSON to PHP-compatible query strings (#7339)

* Improve serialising JSON to PHP-compatible query strings (fixes #7086)

* Fix an eslint issue (unused `map` method)

* Update http-build-query to 0.7.0

* ServerSideRender: remove an over-scoped function and a default value for attributes

* ServerSideRender: cleanup unused var (oups, linting..)

* ServerSideRender: tests for `http-build-query`

* allow null default for attributes

components/server-side-render/index.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies.
  */
-import { isEqual, isPlainObject, map } from 'lodash';
+import { isEqual } from 'lodash';
 
 /**
  * WordPress dependencies.
@@ -12,6 +12,7 @@ import {
 } from '@wordpress/element';
 import { __, sprintf } from '@wordpress/i18n';
 import apiRequest from '@wordpress/api-request';
+import httpBuildQuery from 'http-build-query';
 
 /**
  * Internal dependencies.
@@ -46,9 +47,10 @@ export class ServerSideRender extends Component {
  if ( null !== this.state.response ) {
  this.setState( { response: null } );
  }
- const { block, attributes = {} } = props;
+ const { block, attributes = null } = props;
 
- const path = '/gutenberg/v1/block-renderer/' + block + '?context=edit&' + this.getQueryUrlFromObject( { attributes } );
+ const path = `/gutenberg/v1/block-renderer/${ block }?context=edit` +
+ ( null !== attributes ? '&' + httpBuildQuery( { attributes } ) : '' );
 
  return apiRequest( { path } ).fail( ( response ) => {
  const failResponse = {
@@ -65,14 +67,6 @@ export class ServerSideRender extends Component {
  } );
  }
 
- getQueryUrlFromObject( obj, prefix ) {
- return map( obj, ( paramValue, paramName ) => {
- const key = prefix ? prefix + '[' + paramName + ']' : paramName;
- return isPlainObject( paramValue ) ? this.getQueryUrlFromObject( paramValue, key ) :
- encodeURIComponent( key ) + '=' + encodeURIComponent( paramValue );
- } ).join( '&' );
- }
-
  render() {
  const response = this.state.response;
  if ( ! response ) {

components/server-side-render/test/index.js

@@ -0,0 +1,64 @@
+import httpBuildQuery from 'http-build-query';
+
+// The following tests are adapted to the behavior of http-build-query v0.7.0,
+// to help mitigating possible regressions in the upstream library.
+describe( 'http-build-query', function() {
+ test( 'should return an empty string for empty input', function() {
+ expect( httpBuildQuery( null ) ).toBe( '' );
+ expect( httpBuildQuery() ).toBe( '' );
+ expect( httpBuildQuery( {} ) ).toBe( '' );
+ } );
+
+ test( 'should format basic url params ', function() {
+ expect(
+ httpBuildQuery( {
+ stringArg: 'test',
+ nullArg: null,
+ emptyArg: '',
+ numberArg: 123,
+ } )
+ ).toBe(
+ encodeURI(
+ 'stringArg=test&nullArg=&emptyArg=&numberArg=123'
+ )
+ );
+ } );
+
+ test( 'should format object params ', function() {
+ expect(
+ httpBuildQuery( {
+ objectArg: {
+ stringProp: 'test',
+ numberProp: 123,
+ },
+ } )
+ ).toBe(
+ encodeURI(
+ 'objectArg[stringProp]=test&objectArg[numberProp]=123'
+ )
+ );
+ } );
+
+ test( 'should format an array of objects', function() {
+ expect(
+ httpBuildQuery( {
+ children: [
+ {
+ name: 'bobby',
+ age: 12,
+ sex: 'M',
+ },
+ {
+ name: 'sally',
+ age: 8,
+ sex: 'F',
+ },
+ ],
+ } )
+ ).toBe(
+ encodeURI(
+ 'children[0][name]=bobby&children[0][age]=12&children[0][sex]=M&children[1][name]=sally&children[1][age]=8&children[1][sex]=F'
+ )
+ );
+ } );
+} );