在 WP Gutenberg 块中使用时如何修复 Alpine.js 调度中的 HTML

How to fix HTML in Alpine.js dispatch when using in a WP Gutenberg block

我一直在使用 Alpine 及其 $dispatch-点击功能,根据按下的按钮用标题和文本填充模式。当我将此分派添加到 Wordpress Gutenberg 块中使用的一段代码时,我无法使用 HTML,因为它破坏了它之后的所有内容。

我的@click函数:

@click="$dispatch('modal', { title: 'Tilmeld åbent <i>hus</i>', message: 'Udfyld formularen herunder og tilmeld dig åbent hus for <strong> <?= $address; ?> </strong>'});"

如何解决此问题,使我的块不会损坏,但文本仍显示在我的模态中?

在某些方面,Gutenberg-blocks 不喜欢 titlemessage 中的结尾 HTML-tags。一种使方块不被破坏的方法是将 > 字符替换为其实体名称 &gt;.

最终,dispatch 仍将标签输出为 > 并且可以通过例如 Tailwind 的 prose class.

来设置样式

上面的 click-function 看起来像这样:

@click="$dispatch('modal', { title: 'Tilmeld åbent <i&gt;hus</i&gt;', message: 'Udfyld formularen herunder og tilmeld dig åbent hus for <strong&gt; <?= $address; ?> </strong&gt;'});"

这不是一个很好的解决方案,但它确实有效。