'&' Is always escaped in the JavaScript template.

[tmatsuur]

When I tried the JavaScript template, '&' was always escaped.

Source:

<script type="text/template" id="tmpl-fields">
<p>&</p>
<p>Unscaped: {{{data.value}}}</p>
<p>Escaped: {{data.value}}</p>
</script>
<script type="text/javascript">
( function($) {
	$(document).ready( function () {
		var template = wp.template( 'fields' );
		$( '.widget_search' ).after( template( { value: "W<i>o</i>&r'l\"d" } ) );
	} );
} )( jQuery );
</script>

Rendering:

<p>&amp;</p>
<p>Unscaped: W<i>o</i>&amp;r'l"d</p>
<p>Escaped: W&lt;i&gt;o&lt;/i&gt;&amp;r'l"d</p>

While checking the interpolation of the variable, '&' was always converted to '& amp;'.
Is this a specification or a bug?

[noisysocks]

@tmatsuur: Could you please provide some more detailed steps on how to reproduce this bug? Where are you placing the script tag?

[tmatsuur]

Thanks @noisysocks .

This is something I wondered when using the JavaScript template in my own plugin.

1.Place the attachment in the plugin directory with an appropriate name.

2.Log in to the admin page and activate the plugin.

3.Open the site top page and look under the search widget.

The version of WordPress is 5.5.1 and the theme is Twenty Twenty.

The output source code was as follows.

	<script type="text/template" id="tmpl-fields">
<div id="after_widget_search">
<p>&</p>
<p>Unscaped: {{{data.value}}}</p>
<p>Escaped: {{data.value}}</p>
</div>
</script>
<script type="text/javascript">
( function($) {
	$(document).ready( function () {
		var template = wp.template( 'fields' );
		$( '.widget_search' ).after( template( { value: "W<i>o</i>&r'l\"d" } ) );
	} );
} )( jQuery );
</script>

When I checked the HTML of the relevant part with the developer tool of Chrome, it was as follows.

<div id="after_widget_search">
<p>&amp;</p>
<p>Unscaped: W<i>o</i>&amp;r'l"d</p>
<p>Escaped: W&lt;i&gt;o&lt;/i&gt;&amp;r'l"d</p>
</div>

[tmatsuur]

I'm sorry. I seem to have forgotten to attach the file.

The source code of the plugin is as follows.

<?php
/*
 Plugin Name: Test JavaScript Template
 Description: Test JavaScript Template.
 Author: tmatsuur
 Version: 0.0.1
 */

$test_javascript_template = new test_javascript_template();

class test_javascript_template {
	public function __construct() {
		add_action( 'wp_enqueue_scripts', array( $this, 'scripts' ) );
		add_action( 'wp_footer', array( $this, 'footer' ), 9999 );
	}

	public function scripts() {
		wp_enqueue_script( 'wp-util' );
	}

	public function footer() {
?>
<script type="text/template" id="tmpl-fields">
<div id="after_widget_search">
<p>&</p>
<p>Unscaped: {{{data.value}}}</p>
<p>Escaped: {{data.value}}</p>
</div>
</script>
<script type="text/javascript">
( function($) {
	$(document).ready( function () {
		var template = wp.template( 'fields' );
		$( '.widget_search' ).after( template( { value: "W<i>o</i>&r'l\"d" } ) );
	} );
} )( jQuery );
</script>
<?php
	}
}