Wordpress 在 Gutenberg 块中添加 onclick 事件

Question

我一直在到处寻找如何在 gutenberg 块中添加事件。我正在使用 ACF 和 Foundation 添加手风琴系统。我使用 ACF 创建了一个块和字段以及模板。我希望我的用户能够在可视模式下打开和关闭手风琴。

我确实找到了以下脚本来监视何时更改块。唯一的问题是它在加载所有内容之前触发，我不得不使用超时来让块完全加载。我一直找不到更好的方法来完成这个。有什么建议吗？

const getBlockList = () => wp.data.select( 'core/editor' ).getBlocks();
let blockList = getBlockList();
wp.data.subscribe(() => {
    const newBlockList = getBlockList();
    const blockListChanged = newBlockList !== blockList;
    blockList = newBlockList;
    if ( blockListChanged ) {
        setTimeout(function(){
            jQuery(document).foundation();
            Foundation.reInit($('[data-accordion]'));
        }, 4000);
    }
});

Answer 1

在前端，您会像以前一样获得静态 html。如果您在保存功能中向您的组件添加点击事件，它将在序列化期间被剥离，因此无需费力。一切都像以前一样工作。

但是，在编辑器端，您可以在编辑功能的 return 元素中的任何元素上添加事件：

这是你在 es6 中的做法：

const handleClick = (event) => {
  console.log(event)
}

const element = <div onClick={handleClick}>Click Me</div>;

或在 es2015 中：

var handleClick = function handleClick(event) {
  console.log(event);
};

var element = React.createElement(
  "div",
  { onClick: handleClick },
  "Click Me"
);

顺便说一下，这是一个 gutenber 块，而不是它在 react 中呈现的内存表示。

<!-- wp:paragraph {"key": "value"} -->
<p>Welcome to the world of blocks.</p>
<!-- /wp:paragraph -->

Wordpress 在 Gutenberg 块中添加 onclick 事件

Wordpress Add onclick event inside Gutenberg block

javascript

wordpress

wordpress-gutenberg

gutenberg-blocks