如何将脚本排入队列，以便在Gutenberg编辑器中运行？

时间：2018-11-09 作者：Kit Johnson

我用古腾堡编辑器代替教室里的白板。通过让学生直接在古腾堡编辑器内工作，我可以使课堂更具互动性。作为Wordpress的长期用户，看到这种情况真是太好了，非技术娴熟的用户能够如此轻松地与编辑器交互。

为了提供一些缺少的功能，我想在编辑器中运行一个自定义脚本。这是一个简单的脚本，如果满足某些条件，它会添加一些样式。我当前在前端运行此脚本，使用wp_register_script 和wp_enqueue_script 加载到wp_enqueue_scripts 行动挂钩。

是否可以将此脚本加载到Gutenberg编辑器中，以便在我的学生编辑帖子时，我们也可以让脚本工作？

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

我用古腾堡编辑器代替教室里的白板。通过让学生直接在古腾堡编辑器内工作，我可以使课堂更具互动性。

你在那里描述的WordPress使用得多酷啊！

是否可以将此脚本加载到Gutenberg编辑器中，以便在我的学生编辑帖子时，我们也可以让脚本工作？

WordPress 5.0+似乎为我们提供了两个挂钩：

/**
 * Fires after block assets have been enqueued for the editing interface.
 *
 * Call `add_action` on any hook before \'admin_enqueue_scripts\'.
 *
 * In the function call you supply, simply use `wp_enqueue_script` and
 * `wp_enqueue_style` to add your functionality to the block editor.
 *
 * @since 5.0.0
 */
do_action( \'enqueue_block_editor_assets\' );
对于编辑器和前端：

/**
 * Fires after enqueuing block assets for both editor and front-end.
 *
 * Call `add_action` on any hook before \'wp_enqueue_scripts\'.
 *
 * In the function call you supply, simply use `wp_enqueue_script` and
 * `wp_enqueue_style` to add your functionality to the Gutenberg editor.
 *
 * @since 5.0.0
 */
 do_action( \'enqueue_block_assets\' );
更新：从Gutenberg Handbook:

这个enqueue_block_editor_assets 只有当编辑器准备好接收其他脚本和样式表时，钩子才会在Gutenberg编辑器上下文中运行。还有一个enqueue_block_assets 在编辑器和前端上下文下运行的钩子。这应该用于将前端和编辑器通用的样式表排队。

因此，您可以根据需要尝试将脚本排入这些挂钩的回调中。还可以添加特定块作为依赖项。

SO网友:Zakaria Binsaifullah

您可以使用此挂钩将任何样式或脚本排队-enqueue_block_assets. 此挂钩中的脚本/样式适用于后端和；前端。因此，示例类似于以下代码-

function sgb_external_scripts() {
wp_enqueue_script(
    \'frontend-js\',
    plugins_url( $sharedBlockPath, __FILE__ ),
    [  \'wp-blocks\', \'wp-element\', \'wp-components\', \'wp-i18n\' ],
    filemtime( plugin_dir_path( __FILE__ ) . $sharedBlockPath )
  );
 }
add_action( \'enqueue_block_assets\', \'sgb_external_scripts\' );
您可以应用一个技巧将任何样式/脚本排队，只用于后端/编辑器。在这种情况下，它将类似于以下代码-

function sgb_external_scripts() {
 if( is_admin() ){
    wp_enqueue_script(
        \'frontend-js\',
        plugins_url( $sharedBlockPath, __FILE__ ),
        [  \'wp-blocks\', \'wp-element\', \'wp-components\', \'wp-i18n\' ],
        filemtime( plugin_dir_path( __FILE__ ) . $sharedBlockPath )
      );
 }
}
add_action( \'enqueue_block_assets\', \'sgb_external_scripts\' );

结束
标签： actions   wp-enqueue-script   block-editor   小码农  

相关推荐

从unctions.php调用的Add_Actions未返回好值

我正试图通过这些功能为我的网站添加一些安全/访问防护。php。然而，每当我尝试通过函数添加时。php（而不是作为插件，我以前做过）失败（总是返回false）。例如：add_action(\"parse_query\", checkaccess()); // in functions.php 以及function checkaccess() { $allowAccess = false; if(is_admin()||is_front_page()||i