Character Encoding Issues Within Blocks

sage
1

Hello,

I am having a weird issue with character encoding with HTML in a livewire block. It also happens in a normal block. It does not happen if the HTML block is just in a rendered view (i.e. footer).

HTML:

  <form
		@submit.prevent="doCaptcha"
    x-data="{
      siteKey: @js(config('services.path.to.google.key')),
      init() {
        // load our recaptcha.
        if (!window.recaptcha) {
          const script = document.createElement('script');
          script.src = 'https://www.google.com/recaptcha/api.js?render=' + this.siteKey;
          document.body.append(script);
        }
      },

      doCaptcha() {
        grecaptcha.execute(this.siteKey, {action: 'submit'}).then(token => {
          Livewire.dispatch('formSubmitted', {token: token});
        });
      },
  }">
  </form>

RENDERED:

  <form
		@submit.prevent="doCaptcha"
    x-data="{
      siteKey: 'SITEKEYHERE',
      init() {
        // load our recaptcha.
        if (!window.recaptcha) {
          const script = document.createElement('script');
          script.src = 'https://www.google.com/recaptcha/api.js?render=' + this.siteKey;
          document.body.append(script);
        }
      },

      doCaptcha() {
        grecaptcha.execute(this.siteKey, {action: 'submit'}).then(token => {
          Livewire.dispatch(&#8216;formSubmitted&#8217;, {token: token});
        });
      },
  }&#8221;>
  </form>

Note the closing quote was encoded to &#8221; and the line Livewire.dispatch(&#8216;formSubmitted&#8217;, {token: token});.

What is odd is &#8221; isn’t the encoded version of " but rather ”. And &#8216; isn’t the encoded version of ' but rather ’. And more odd is that it is only some characters being encoded. The first line @submit.prevent="doCaptcha" is left intact and the lines inside the init() function are fine too.

This doesn’t happen if the HTML block is just in a normal rendered view (footer.blade.php for example). In that case it’s correct. This only happens when it’s in a block or livewire component.

Does anyone have any idea what is going on?

Using:
Sage 11
Bedrock
Acorn

2

Through trial and error, I discovered if you remove => from the doCaptcha() function. It will render correctly without the encoding.

HTML:

  <form
		@submit.prevent="doCaptcha"
    x-data="{
      siteKey: @js(config('services.path.to.google.key')),
      init() {
        // load our recaptcha.
        if (!window.recaptcha) {
          const script = document.createElement('script');
          script.src = 'https://www.google.com/recaptcha/api.js?render=' + this.siteKey;
          document.body.append(script);
        }
      },

      doCaptcha() {
        grecaptcha.execute(this.siteKey, {action: 'submit'}).then(token {
          Livewire.dispatch('formSubmitted', {token: token});
        });
      },
  }">
  </form>

RENDERED:

  <form
		@submit.prevent="doCaptcha"
    x-data="{
      siteKey: 'SITEKEY',
      init() {
        // load our recaptcha.
        if (!window.recaptcha) {
          const script = document.createElement('script');
          script.src = 'https://www.google.com/recaptcha/api.js?render=' + this.siteKey;
          document.body.append(script);
        }
      },

      doCaptcha() {
        grecaptcha.execute(this.siteKey, {action: 'submit'}).then(token {
          Livewire.dispatch('formSubmitted', {token: token});
        });
      },
  }">
  </form>

Obviously though this isn’t correct JavaScript. Why would => trigger this weird encoding for characters that come after it?

3

Related to Great than character in theme template causing issues · Issue #160 · Log1x/acf-composer · GitHub maybe? You didn’t mention ACF though– but wptexturize was the culprit there.

4

Thank you for the reply @Log1x. Indeed this was the issue.

For anyone else coming across this:

Adding remove_filter('the_content', 'wptexturize'); fixes it.

Looks like another possible fix is to wrap it all in an esc_attr() call, i.e.:

<section x-data="{query: ''}" x-init="<?php echo esc_attr('$watch('query', (value) => console.log(this) )'); ?>"></section>

Thanks again.