Server side render encodes some attributes incorrectly

[timothyjensen]

I'm running into a situation where my attributes are being returned in an unexpected format. For example, an array of Post IDs is converted to an array that contains one comma separated string.

Expected:

$postIds = [
   1,2,3
];

Observed:

$postIds = [
   '1,2,3'
];

Another example is an array of objects is converted to [object Object],[object Object]. Both cases are problematic because the data are inconsistent between the post editor and front end. Having to account for both formats increases the chances of buggy code.

I have narrowed the problem down to getQueryUrlFromObject, though I can't offer a solution.

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

Lines 68 to 74 in 7066905

	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( '&' );
	}

Additional context

• Gutenberg v2.9.2

[chrisvanpatten]

Additional additional context: this is happening when passing attributes with array values to the <ServerSideRender /> component. Just seems like the process of URL-encoding the attributes for the API request might need to be refined.

[brianpiccione]

Whoa I've been tearing my hair out all day trying to get this to work! Thought it was just me. Would it be possible to change the call to the server change to a POST?

[brianpiccione]

I've been working through this for a while and found that @miina was registering the attributes in the register_block_type php function see here:

register_block_type( 'core/archives', array(
	'attributes'      => array(
		'showPostCounts'    => array(
			'type'    => 'boolean',
			'default' => false,
		),
		'displayAsDropdown' => array(
			'type'    => 'boolean',
			'default' => false,
		),
		'align'             => array(
			'type'    => 'string',
			'default' => 'none',
		),
	),
	'render_callback' => 'render_block_core_archives',
) );

After adding this in my php file (and also making sure the attributes were in the block's js file) booleans worked fine. I haven't tried an array @timothyjensen but hopefully this helps you make some progress!

[chrisvanpatten]

@brianpiccione I think normal types, like boolean and string, are okay. It only becomes an issue when trying to register array or object type attributes; they aren't always urlencoded correctly.

[brianpiccione]

Gotcha, thanks Chris. It'd be good to add this requirement (registering the atts in PHP) to the docs. I went down a number of rabbit holes to find this! Let me know if I can help at all

[chrisvanpatten]

One idea for this would be to use a JS equivalent of PHP's http_build_query, which is capable of transforming complex arrays/objects into a query string.

Such as: https://github.com/vladzadvorny/http-build-query