如何将JavaScript添加到Wordpress Gutenberg自定义块

Question

使用Wordpress自定义块，我目前正在尝试创建一个包含按钮和隐藏内容的popover组件。当用户点击或悬停在按钮上时(在网站的前端上，而不是块编辑器中的(，隐藏内容应该出现。

但是，当我向按钮添加onClick或onHover时，不会执行事件处理程序。

此外，尝试使用useState挂钩来存储popover的显示状态会使我的块编辑器崩溃。

这就是我的save方法代码当前的样子：

export default function save() {
const [shouldDisplay, setShouldDisplay] = useState(false);
const handleClick = () => {
console.log('Click confirmed.');
setShouldDisplay(!shouldDisplay);
}
return (
<div {...useBlockProps.save()}>
{/* Button with onClick handler */}
<button onClick={() => handleClick()}>Show hidden content!</button>
{/* Hidden content */}
{ shouldDisplay && <div class="popover-content">...</div> }
</div>
)
}

这个类似(？(问题的答案似乎表明这是不可能的，因为前端只是渲染"；静态html"；并去掉javascript。如果是这样的话，在Wordpress自定义块的前端创建用户交互(悬停/单击事件，甚至可能的http请求(的好方法是什么？

Answer 1

由于WordPress 5.9.0，您必须使用viewScript在block.json:中定义前端JS文件

{ "viewScript": "file:./view.js" }

请参阅参考资料：https://developer.wordpress.org/block-editor/reference-guides/block-api/block-metadata/#script

Answer 2

在blocks.json文件中，您可以定义一个要在前端执行的js文件。

{
"$schema": "https://schemas.wp.org/trunk/block.json",
"apiVersion": 2,
"name": "create-block/xxxxx",
"version": "x.x.x",
"title": "xxxx",
"category": "xxxx",
"description": "xxxx",
"attributes": {
"example":{
"type":"string"
},
"supports": {
"html:": true
},
"textdomain": "xxxxx",
"editorScript": "file:./xxxx.js",
"editorStyle": "file:./xxxx.css",
"script": "file:./index.js", <--
"style": "file:./xxxx-xxxx.css"
}

参考https://developer.wordpress.org/block-editor/reference-guides/block-api/block-metadata/#script

Answer 3

目前，我已经能够通过在我为自定义块创建的Wordpress插件中排队来解决这个问题：

但如果有人找到更好的解决方案，我会非常感兴趣地知道！

index.php：(主插件文件(

function my_blocks_popover_enqueue_script()
{   
wp_enqueue_script( 'my_blocks_popover_script', plugin_dir_url( __FILE__ ) . 'popover/scripts/index.js' );
}
add_action('wp_enqueue_scripts', 'my_blocks_popover_enqueue_script');

index.js(入队脚本(

document.addEventListener("DOMContentLoaded", function () {
document
.querySelectorAll(".my-blocks-popover__trigger")
.forEach(function (el) {
const dropdown = el.querySelector(".my-blocks-popover__dropdown");
el.addEventListener("mouseover", (_e) => {
dropdown.classList.add("my-blocks-popover__dropdown--show");
});
el.addEventListener("mouseout", (_e) => {
dropdown.classList.remove("my-blocks-popover__dropdown--show");
});
});
});

save.js(自定义块的保存功能(

export default function save() {
return (
<div class="my-blocks-popover__trigger" {...useBlockProps.save()}>
<button class="my-blocks-popover__button">Show hidden content!</button>
<div class="my-blocks-popover__dropdown">...</div>
</div>
)
}