Wordpress swapping && for Html encoded in JS <script> tag

user_2784359 0
Viewed 596

I want to implement a simple script onto the page using the HTML block with a JS function wrapped in a script tag.

But when it gets rendered, it takes the && operator and converts it to HTML character code for ampersands(&#038;&#038). I have tried minifying it, changing the conditional statement, but I cannot get it to run. I know the code is fine, because I tested it in the console and it works fine. I think there is just some sort of issue when Wordpress handles it.

At the moment, I cannot implement this using the functions.php file. Needs to be implemented onto the page.

Below is the code I am implementing

<script>
const mainNavLinks = document.querySelectorAll(".wp-block-senff-sticky-block ol li a");
      window.addEventListener("scroll", event => {
        let fromTop = window.scrollY - 600;
        mainNavLinks.forEach(link => {
          let section = document.querySelector(link.hash);
          if ( section !== null && section.offsetTop <= fromTop && section.offsetTop + section.offsetHeight > fromTop ) {
            link.classList.add("current");
          } else {
            link.classList.remove("current");
          }
        });
      });
</script>

Here is the output:

<script>
const mainNavLinks = document.querySelectorAll(".wp-block-senff-sticky-block ol li a");
      window.addEventListener("scroll", event => {
        let fromTop = window.scrollY - 600;
        mainNavLinks.forEach(link => {
          let section = document.querySelector(link.hash);
          if ( section !== null&&section.offsetTop <= fromTop&#038;&#038;section.offsetTop + section.offsetHeight > fromTop ) {
            link.classList.add("current");
          } else {
            link.classList.remove("current");
          }
        });
      });</script>
wordpress-gutenberg wordpress html javascript
3 Answers

In case anyone ever runs into this again, like I did today, I found a very quick & easy fix for it here:

You must add HTML comment tags after the script tag:

<script type="text/javascript">
<!--
myfunction();
//--></script>
user_152754480

You could use nested conditions as a workaround:

if ( section !== null } {
  if ( section.offsetTop <= fromTop ) {
     if (section.offsetTop + section.offsetHeight > fromTop ) {
            link.classList.add("current");
     } 
  }
}
user_56416690

I believe you could stop this by adding the following to your functions.php file to stop entities being converted. 

function force_decode_entities( $content ) {
  //Ensure this only runs on a specific page of your choice
  if( is_page('your-page-slug-here') ) {
    return decode_entities( $content );
  }
  return $content;
}

add_filter( 'the_content', 'force_decode_entities', 1 )

I added the if() statement because if you apply this globally, it could stop your using code blocks as normal, since it will render them as literal code that the browser would interpret.

Though, it's worth pointing out that you shouldn't run code from the admin. It's just bad practice.

user_108844420
Related