Block preview issue while using Alpine.js in Gutenberg

[fabianwurk]

Brandon do you know if there is an issue with using Alpine.js within blocks? I've just added a simple alpine code block to an acf composer block view file eg:

<div class="{{ $block->classes }}">

  <div x-data="{ count: 1 }">
    <p x-text="count"></p>
    <button @click="count++">Count Up</button>
    <button @click="count--">Count Down</button>
  </div>

  <div>
    <InnerBlocks />
  </div>
</div>

It no longer allows the block to preview in Gutenberg?

[Log1x]

Alpine and React don't play nice together in the backend. If you get it working I'm interested.

[fabianwurk]

Yeah, thought there may be a conflict. I'll have a deeper dig to see if I can find out more, and maybe test with Vue too. Will keep you posted.

[fabianwurk]

I think JSX is the troublemaker - see this article: https://codewithhugo.com/alpine-js-react/

So, can disable it via on block:

    public $supports = [
       ............
        'jsx' => false,
    ];

But not sure what knock on effect that might have 🧐

[Log1x]

It'd prevent the use of <InnerBlocks />

[fabianwurk]

Suppose its a bit of a trade-off, with using Alpine or Inner Blocks - can't imagine using both together, so this method is a viable workaround.

[dsturm]

I would rather use the $block->preview attribute to conditionally include the Alpine directives. Furthermore you should avoid use event shorthand @click and instead use x-on:click to prevent issues coming from blade directives. So in this example:

<div class="{{ $block->classes }}">

  <div @if (!$block->preview) x-data="{ count: 1 }" @endif>
    <p @if (!$block->preview) x-text="count" @endif></p>
    <button x-on:click="count++">Count Up</button>
    <button x-on:click="count--">Count Down</button>
  </div>

  <div>
    <InnerBlocks />
  </div>
</div>