# Alpine.js x-on shorthand breaks WordPress blocks

**URL:** https://forum.pinegrow.com/t/alpine-js-x-on-shorthand-breaks-wordpress-blocks/7647
**Category:** WordPress
**Tags:** wordpress
**Created:** [January 18, 2023, 4:03pm UTC](https://forum.pinegrow.com/t/alpine-js-x-on-shorthand-breaks-wordpress-blocks/7647 "2023-01-18T16:03:42Z")
**Posts on this page:** 3
**Page:** 1

<div class="post-metadata">

### Author: ![adamslowe](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/adamslowe/32/4590_2.png) [@adamslowe](https://forum.pinegrow.com/u/adamslowe)
#### Post date: [January 18, 2023, 4:03pm UTC](https://forum.pinegrow.com/t/alpine-js-x-on-shorthand-breaks-wordpress-blocks/7647/1 "2023-01-18T16:03:42Z")

</div>

When I try to create a WordPress block using the [@ syntax for x-on:](https://alpinejs.dev/directives/on) in Alpine.js I notice that the block’s JavaScript file gets angry.

![image](https://canada1.discourse-cdn.com/flex036/uploads/pinegrow/original/2X/8/8d986bf69ab4006b168fd6fcffffcd58ea7145c1.png)

 ![image](https://canada1.discourse-cdn.com/flex036/uploads/pinegrow/original/2X/a/a5b318ca8064ec2ea6350422740f0e49deed436b.png)

Replacing the shorthand with the longer x-on: directive works fine, though.  
 ![image](https://canada1.discourse-cdn.com/flex036/uploads/pinegrow/original/2X/1/1ffd106e6900ccd17f19ef64436826f273e1e939.png)

 ![image](https://canada1.discourse-cdn.com/flex036/uploads/pinegrow/original/2X/1/1ce5b368f439e27230d209e5e017eb7b17bbcd6a.png)

I’m just throwing this out there in case @matjaz decides to change the way Pinegrow parses our HTML or in case other people run into the same issues and don’t feel like banging their heads against the wall.

---

<div class="post-metadata">

### Author: ![matjaz](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/matjaz/32/5_2.png) [@matjaz](https://forum.pinegrow.com/u/matjaz)
#### Post date: [January 18, 2023, 4:30pm UTC](https://forum.pinegrow.com/t/alpine-js-x-on-shorthand-breaks-wordpress-blocks/7647/2 "2023-01-18T16:30:55Z")

</div>

@adamslowe I think that React doesn’t like the @. Use x-on instead.

> <https://github.com/alpinejs/alpine/issues/201>
>
> Alpine looks great but is it possible for me to use AlpineJS template \_inside\_ o…f React, rather than replacing React? It would be really helpful if I can use Alpine for simple toggle, etc. states and React for everything else.
> 
> Is this possible? Thanks!

---

<div class="post-metadata">

### Author: ![adamslowe](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/adamslowe/32/4590_2.png) [@adamslowe](https://forum.pinegrow.com/u/adamslowe)
#### Post date: [January 18, 2023, 4:43pm UTC](https://forum.pinegrow.com/t/alpine-js-x-on-shorthand-breaks-wordpress-blocks/7647/3 "2023-01-18T16:43:35Z")

</div>

Makes sense. And yes, it works fine with x-on.