Bugfix – JavaScript showing on frontend after applying wp_kses()

This may be a very specific scenario, but could be fixed with an update to comply with WordPress best practices. My situation is specific to using Elementor PRO’s “Products” widget. But this problem will be encountered by anyone filters Yotpo’s code through a wp_kses() function.

My website outputs the stars widget for each product under the product title. The relevant Yotpo code is the function “generate_v2_star_ratings_widget_code()” in /wp-content/plugins/yotpo-social-reviews-for-woocommerce/lib/widgets/stars-widget.php on line 3. This function returns an HTML string that contains a <script> tag. Usually, the code runs fine. However, Elementor PRO runs everything in its widgets through a wp_kses() function. (Specifically “wp_kses_post()”.) This strips out the <script> tag and leaves the JS code as plain text that is displayed on the front-end. This code displayed as text is my problem.

My quick fix was to wrap the <script> tag with a <div> containing a CSS class that hides the element. This hides the JS text if the <script> tag is removed. However, this is not a permanent solution.

I would like to request an update that enqueues the JS instead of setting it directly inside the HTML. Perhaps setting something like this inside of the generate_v2_star_ratings_widget_code() function.

$js = "
	jQuery(document).ready(function() {
		jQuery('div.bottomLine').click(function() {
			if (jQuery('li.yotpo_widget_tab>a').length) { jQuery('li.yotpo_widget_tab>a').click(); }
		})
	})
";
wp_register_script('yotpo-star-ratings-v2', '', [], '', true);
wp_enqueue_script('yotpo-star-ratings-v2');
wp_add_inline_script('yotpo-star-ratings-v2', $js);