在编辑器中加载自定义块后,如何使脚本加载?

时间:2019-09-08 作者:J. Stockland

我试图创建一个定制的Gutenberg块,但在加载与此块配套的javascript时遇到了问题。

在前端,它工作得很好,但在编辑器中,脚本似乎在Gutenberg块本身完全加载之前启动(即使使用DOMcontentloaded或window.onload)。

由于我的脚本以块中的一个元素为目标(由于该元素尚未加载,因此找不到该元素),因此无法正常工作。

在编辑器中完全加载自定义块后,如何加载脚本,有什么建议吗?

(我正在使用ACF方法创建自定义块)

1 个回复
SO网友:jla

我找不到一种内置的ACF方法来实现这一点。

相反,在我的块的PHP渲染函数中,我添加了

printf( "<script>window.jQuery(window).trigger(\'acf/loaded/block-name\');</script>" );
这使用jQuery作为事件总线,在渲染块时触发事件。您可能需要检查您是否在管理员中,以便事件不会在前端触发。我的WordPress是无头的,所以这对我来说不是问题。

然后,在JavaScript中,您可以执行以下操作:

$( window ).on( \'acf/loaded/block-name\', function() {
    // rest of your code here
} )
通过在事件中包含块名称,可以检查各个块的不同事件。

相关推荐

带有高级自定义域的JavaScript选项卡库

我在我的网站上使用高级自定义字段,我想以一种体面、优雅的方式显示我的图库字段的图片。所以我在考虑做这样的事情:https://www.w3schools.com/howto/howto_js_tab_img_gallery.asp我的主要问题是,我不知道如何将php变量放到javascript代码中。你能帮忙吗?w3schools示例中的相同css和相同脚本,这是我的代码:<?php $images = get_field(\'extra_photos\');