在开机自检中获取使用过的块并检测更改

时间:2020-01-27 作者:saeid ezzati

在古腾堡,如何通过javascript获取帖子中使用的块列表?

然后,每当每个块的内容发生更改时,都需要调用一个javascript函数。

我该怎么做?

wordpress gutenberg的文档非常混乱,我无法理解:(

1 个回复
最合适的回答,由SO网友:Tim Elsass 整理而成

您可以使用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 ) );
} )();
您可以进一步筛选以对不同的更改进行操作。我只是使用了一个长度比较来保持示例的简单性。您提到了对块内容的更改,因此可以过滤中返回的对象blocksStatenewBlocksState 通过比较对象中的每个块attributes 键,然后调用您想要的任何函数。

还有其他方法可以做到这一点,这实际上取决于您在说调用自己的函数时具体尝试做什么。只要考虑在应用程序的状态发生变化时采取行动,而不是在DOM发生变化时。上面的链接getBlocks() 方法应该可以让您对其中的一些功能有更多的了解。我还建议the documentation for the wp.data package, 其中详细说明了如何更深入地使用数据包(例如subscribe 提及的方法)。

Edit:寻址注释

上面的示例仅检查ifblocksStatenewBlocksState 长度相同,即如果添加块或删除块。我在上面提到了这一点,以及您可以参考的资源和检查其他内容的方法。其他检查将根据您的需要进行,只有您知道自己应用程序的逻辑,而不是我。使用上面的文档链接,我看到一个名为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() 方法,可用于进一步优化。

相关推荐