在WordPress Gutenberg区块中使用Alpine.js的$dispatch时如何修复HTML解析问题

我之前也碰到过一模一样的情况——在Gutenberg区块里直接把带HTML标签的字符串塞到Alpine的内联@click里，要么触发区块编译崩溃，要么最终HTML被转义成纯文本显示。这里有两个核心问题要解决：Gutenberg对内联复杂字符串的编译冲突，以及Alpine默认不解析插值HTML。下面是具体的解决方案：

1. 把HTML内容从内联@click中抽离（避免Gutenberg崩溃） #

Gutenberg的模板编译逻辑对混合了HTML标签、PHP变量的内联字符串非常敏感，很容易触发语法错误。推荐把动态内容放到元素的data-*属性里，再在@click中读取这些属性值：

<button 
  @click="$dispatch('modal', { title: $el.dataset.modalTitle, message: $el.dataset.modalMessage })"
  data-modal-title="Tilmeld åbent <i>hus</i>"
  data-modal-message="Udfyld formularen herunder og tilmeld dig åbent hus for <strong><?= wp_kses_post($address); ?></strong>"
>
  打开模态框
</button>

这里用wp_kses_post()过滤PHP变量$address是关键操作——它会保留安全的HTML标签，同时过滤掉恶意代码，避免XSS风险。

2. 在模态框中用x-html渲染HTML内容（让格式生效） #

Alpine默认的双大括号{{ }}会把HTML标签转义成纯文本，所以模态框组件必须用x-html指令来解析HTML内容：

<!-- 模态框组件示例 -->
<div 
  x-data="{ modalTitle: '', modalMessage: '' }"
  @modal.window="modalTitle = $event.detail.title; modalMessage = $event.detail.message"
  x-show="modalTitle"
  class="modal"
>
  <h2 x-html="modalTitle"></h2>
  <div class="modal-content" x-html="modalMessage"></div>
</div>

备选方案：把逻辑抽离到Alpine组件中 #

如果觉得data属性不够灵活，也可以把触发逻辑放到Alpine的全局组件里，彻底规避内联字符串的问题：

<button x-data="modalTrigger" @click="openModal">打开模态框</button>

<script>
document.addEventListener('alpine:init', () => {
  Alpine.data('modalTrigger', () => ({
    openModal() {
      // 直接定义带HTML的内容，PHP变量也能正常插入
      const title = 'Tilmeld åbent <i>hus</i>';
      const message = `Udfyld formularen herunder og tilmeld dig åbent hus for <strong><?= wp_kses_post($address); ?></strong>`;
      
      this.$dispatch('modal', { title, message });
    }
  }));
});
</script>

这样做的好处是逻辑更清晰，Gutenberg也不会因为复杂的内联字符串出现编译异常。

最后提醒一句：使用x-html时一定要确保内容是可信的，不要直接渲染用户提交的未过滤内容，否则会有XSS安全风险。

内容的提问来源于stack exchange，提问作者Rvervuurt