When building a shortcode with `wp.shortcode.string()` the `attrs` property is finnicky.

[georgestephanis]

If you pass it in as:

wp.shortcode.string({
	tag   : 'short',
	type  : 'single',
	attrs : {
		named   : { foo : 'bar' },
		numeric : [ 'abc123' ]
	}
});

it works fine -- resulting in [short abc123 foo="bar"], but if you flip the order so that numeric comes before name, like so:

wp.shortcode.string({
	tag   : 'short',
	type  : 'single',
	attrs : {
		numeric : [ 'abc123' ],
		named   : { foo : 'bar' }
	}
});

the output is [short numeric="abc123" named="[object Object]"]

This is because we're doing an overly basic array comparison of the keys in which order matters --

https://core.trac.wordpress.org/browser/trunk/src/wp-includes/js/shortcode.js?rev=34933#L218

// Identify a correctly formatted `attrs` object.
} else if ( _.isEqual( _.keys( attrs ), [ 'named', 'numeric' ] ) ) {
	this.attrs = attrs;

I wonder if we could do something as simple as using _.difference instead --

} else if ( _.difference( _.keys( attrs ), [ 'named', 'numeric' ] ).length === 0 ) {
	this.attrs = _.defaults( attrs, { named : {}, numeric : [] } );

or something?

Open to suggestions.

[zsusag]

@georgestephanis

In theory that seems to work; however, I'm wondering how one would be able to use wp.shortcode.string(). I'm relatively new here to the forums and to WordPress core but if I am correct most users implement shortcode via PHP instead of JavaScript. Am I mistaken in this? I'm trying to replicate your bug.

[georgestephanis]

@zsusag: Here's an example:

​https://github.com/dtbaker/wordpress-mce-view-and-shortcode-editor/blob/cb632f829bf0721b6e84be3b442f8c7ed55ae089/js/boutique-banner-editor-view.js#L38-L49

[georgestephanis]

But perhaps more to your question -- when you're inserting media from the media modal in the editor screen into a post body, yes, it fires an ajax request to get the shortcode generated by php. Because legacy reasons. But if you're using Editor Views and editing them in JS, that all happens client-side, purely in JS.

[zsusag]

@georgestephanis Ahh, I see. Thank you for the examples and explanation.

With the greater insight that does seem to be a better and more "friendly" way of handling things. I haven't found time to formally set up a test for your code but it does look like that would be a more intuitive way of going about things.

[mircoraffinetti]

@georgestephanis: just a short feedback. We tested your suggested code and it works fine.

[DrewAPicture]

@georgestephanis Any follow up here?

[yale01]

improved array keys comparison

[yale01]

patch added, from code provided by @georgestephanis and tested againt the case he provided

[adamsilverstein]

36263.2.diff​ adds a quint test verifying the fix

[DrewAPicture]

Assigning ownership to mark the good-first-bug as "claimed".

[SergeyBiryukov]

In 47003:

Shortcodes: Make sure wp.shortcode.string() accepts the attrs array keys in any order.

Props yale01, georgestephanis, adamsilverstein, zsusag, mircoraffinetti, SergeyBiryukov.
Fixes #36263.