您可以使用getBlocks():
wp.data.select( \'core/block-editor\' ).getBlocks();
就更改更新而言,编辑器将其所有数据保存在一个存储中,因此您希望根据需要响应的更改进行订阅和响应。例如:
( () => {
let blocksState = wp.data.select( \'core/block-editor\' ).getBlocks();
wp.data.subscribe( _.debounce( ()=> {
newBlocksState = wp.data.select( \'core/block-editor\' ).getBlocks();
if ( blocksState.length !== newBlocksState.length ) {
doMyJsFn();
}
// Update reference.
blocksState = newBlocksState;
}, 300 ) );
} )();
您可以进一步筛选以对不同的更改进行操作。我只是使用了一个长度比较来保持示例的简单性。您提到了对块内容的更改,因此可以过滤中返回的对象
blocksState
和
newBlocksState
通过比较对象中的每个块
attributes
键,然后调用您想要的任何函数。
还有其他方法可以做到这一点,这实际上取决于您在说调用自己的函数时具体尝试做什么。只要考虑在应用程序的状态发生变化时采取行动,而不是在DOM发生变化时。上面的链接getBlocks()
方法应该可以让您对其中的一些功能有更多的了解。我还建议the documentation for the wp.data package, 其中详细说明了如何更深入地使用数据包(例如subscribe
提及的方法)。
Edit:寻址注释:
上面的示例仅检查ifblocksState
和newBlocksState
长度相同,即如果添加块或删除块。我在上面提到了这一点,以及您可以参考的资源和检查其他内容的方法。其他检查将根据您的需要进行,只有您知道自己应用程序的逻辑,而不是我。使用上面的文档链接,我看到一个名为getEditedPostContent()
, 因此,这里有一种检查帖子内容的方法:
( () => {
let contentState = wp.data.select( \'core/editor\' ).getEditedPostContent();
wp.data.subscribe( _.debounce( ()=> {
newContentState = wp.data.select( \'core/editor\' ).getEditedPostContent();
if ( contentState !== newContentState ) {
console.log( \'triggered\' );
}
// Update reference.
contentState = newContentState;
}, 1000 ) );
} )();
当编辑器的内容更改时,这将在控制台中记录“触发”。我还提高了去抖动间隔,以帮助覆盖用户键入的时间,因此它不会频繁触发。还有
isTyping()
方法,可用于进一步优化。