Quotes on shortcode parameters are being escaped

[dartiss]

I'm using WordPress 4.9.2 and Gutenberg 2.1.0.

I'm finding when I'm trying to add shortcode parameters that need quotes (double, single, or whatever) around them, that they're being escaped.

So, I use a plugin that allows me, via a shortcode, to add updates to a post. If I add the following into a block...

[update title="The latest update"]Some text here[/update]

This is showing correctly visually but when switching to HTML is shows as...

[update title="The latest update"]Some text here[/update]

Obviously, when viewed on the site, it displays incorrectly because of the escaping.

Now, this doesn't happen if the shortcode is added as a shortcode block - only if it's added inline or written out manually into a paragraph, for example.

[alanef]

WP 4.9.4 and 2.2.0

Gutenberg passes escaped quotes to the shortcode atts - the consequence is if the atts are used in JS the JS breaks

Switch to classic = no issue

[bobbingwide]

I'm trying to write a block that will generate a shortcode so that I can re-use an existing solution in a hybrid environment where the content was originally created in the classic-editor using shortcodes.

The HTML for the shortcode is generated correctly by the edit method ... it's displayed correctly in edit.
But on saving, double quotes get converted to " and single quotes get converted to '

I believe that I might be able to use <RawHTML> to achieve this, as this is what's used in the shortcode block, but can't figure out how to do it in my own code.

[mattyrob]

@bobbingwide

I might be able to help with this - I have a block for a shortcode that I'm trying to give a UI to for the parameters. The deprecation of allowing HTML to be passed and forcing RawHTML or createElement is causing me problems. Ping me if you want my code.

[bobbingwide]

@mattyrob Perhaps you'd like to compare your code with mine.
In my Countdown block I did manage to implement a solution using <RawHTML>
See https://github.com/bobbingwide/oik-block/blob/master/blocks/oik-countdown/index.js

[mattyrob]

@bobbingwide

Thanks for that link - my code is in ES5 so I'm trying to call RawHTML as a function and it's not really working at the moment. I don't think <RawHTML> will work in my code.

[rhyswynne]

I'm having the same issue as @mattyrob. My blocks right now are outputting a Title, introduction paragraph then a shortcode. My save function is this:-

return ( el( 'div', { className: props.className }, el( 'h2', { className: 'wpec-title'}, attributes.title ), el( 'p', { className: 'wpec-description' }, attributes.subscriptiondetails ), wp.element.RawHTML( { props , emailcaptureform } ) ) ); }, } );

The problem arises is when output instead of the form, we're getting the following:-

<div props="[object Object]" emailcaptureform="[email_capture_form buttontext=&quot;Test%20Button&quot;]"></div>

I don't think I need props (In fact I'm fairly confident I don't), but it would be good to get an example of how wp.element.RawHTML will work, as most code is ES6.

[mattyrob]

@rhyswynne

I ended up using the following:
return el( element.RawHTML, null, '<p>my unescaped text here</p>' );

I hope that helps you.

[rhyswynne]

Thank you! It did :)

[bobbingwide]

At WordCamp London contributor day @dartiss confirmed that #5897 resolves the issues with quotes in shortcodes being serialized. It resolve the issue for both double and single quotes.
The PR does not resolve issue #4456

[mcsf]

Closed via #5897