WordPress 在古腾堡块内添加 onclick 事件

Question

我一直在到处寻找以找出如何在古腾堡块内添加事件。我正在努力使用 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。如果您在保存功能中向组件添加单击事件，它将在序列化过程中被剥离，因此无需在那里费力。一切都像以前的块一样工作。

但是，在编辑器方面，您可以在编辑函数的返回元素中的任何元素上添加事件：

以下是在 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 -->