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). 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>

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). 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>

• javascript
• html
• wordpress
• wordpress-gutenberg

• So to confirm, !== null&&section.offsetTop part is not affected ? – GBWDev Commented Mar 2, 2020 at 15:09

3 Answers 3

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 ment tags after the script tag:

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

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.

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");
     } 
  }
}