如何仅在需要时才在前端入队块Java脚本

时间:2020-02-17 作者:thespacecamel

我正在使用register_block_type (参见https://developer.wordpress.org/block-editor/tutorials/block-tutorial/writing-your-first-block-type/) 注册依赖于前端某些Javascript的Gutenberg块。然而,我不希望Javascript在每个前端页面加载上都排队,因为通常不使用该块,我也不想不必要地让每个人都下载该文件。最好的方法是什么?

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

要有条件地注册脚本/样式,如果页面有某个块,您可以按照@将在来自similar question. 复制/粘贴,并对该问题进行一些修改:

add_action( \'enqueue_block_assets\', \'myplugin_enqueue_if_block_is_present\' ); // Can only be loaded in the footer
// add_action( \'wp_enqueue_scripts\', \'myplugin_enqueue_if_block_is_present\' ); // Can be loaded in the both in head and footer
function myplugin_enqueue_if_block_is_present(){

    if ( has_block( \'my-plugin/my-block\' ) ) {
        wp_enqueue_script(
            \'myplugin_script\',
            PATH_TO_ASSETS_FOLDER . \'frontend-script.js\',
            array(),
            \'1.0.0\',
            true
        );
    }
}

如果需要从块中获取信息以便将某个样式或脚本排队,一种方法是将脚本/样式排队到块的渲染功能中。

Beware 尽管这样做有效,但我们将enqueue函数与render回调混合使用。另一个缺点是,当回调运行时,我们已经在帖子的内容中了。这意味着我们只能在页脚排队,而不能在头部排队。

add_action( \'init\', \'myplugin_register_block\' );
function myplugin_register_block() {

    register_block_type(
        \'my-plugin/my-block\',
        array(
            \'editor_script\'   => PATH_TO_ASSETS_FOLDER . \'editor-script.js\',
            \'render_callback\' => \'myplugin_render_callback\'
        )
    );
}

function myplugin_render_callback( $attributes, $content ) {

    // Do not enqueue if we are in the editor.
    // This will depend on your use case.
    if ( is_admin() ) {
        return $content;
    }

    wp_enqueue_style(
        \'myplugin_style\',
        PATH_TO_ASSETS_FOLDER . $attributes[\'some_attribute\'] . \'-style.css\',
        array(),
        \'1.0.0\'
    );

    return $content;
}

相关推荐

是否有仅在插件激活时执行javascript文件的选项

我正在为WordPress创建一个自定义插件,并尝试执行javascript 插件激活后,只需提交一次文件。我正在使用register_activation_hook() 和wp_enqueue_script() 在插件激活时只执行一次文件。自javascript 如果在register_activation_hook().这就是我迄今为止所尝试的:register_activation_hook( __FILE__, \'full_install\' ); function full_insta