如果使用块，则在前端加载CSS/Javascript

Question

假设我的主题中没有无限滚动或任何其他内容:是否有一种方法可以将我的自定义Gutenberg块样式和脚本排入队列，以便在真正使用该块时，它们只在前端加载(懒惰)？像is_active_widget这样的东西，只为街区？

如果我在enqueue_block_assets函数中对它们进行排队，就会将它们添加到任何站点。

在github上，我找到了这个https://github.com/WordPress/gutenberg/issues/5445，但听起来它更多的是捆绑而不是条件加载，所以我仍然希望他们没有放弃这个优化机会--否则任何其他站点很快就会被来自众多Gutenberg块插件的另外20个脚本废弃，人们在一个页面上只安装一次(比如大型图片库块脚本)。

谢谢和问候！

Answer 1

谢谢你把我引向正确的方向。我仍然在回答我自己的问题，因为我想给其他人提供更多的可能会遇到这个问题的背景。

因此，有几种加载自定义块的方法，主要是：

• add_action('enqueue_block_assets','xy_function') / add_action('enqueue_block_editor_assets','xy_function')，这在创建带有"create_guten_block“的块时是默认的。这就是我用的东西。它可能会改变，请参阅https://github.com/ahmadawais/create-guten-block/issues/21
• register_block_type如手册所示，见https://wordpress.org/gutenberg/handbook/designers-developers/developers/tutorials/block-tutorial/writing-your-first-block-type/#enqueuing-block-scripts

虽然在PHP中注册块(如手册中所描述的)是默认方法和未来的证明，但enqueue_block_assets变体可以加载多个块，而无需将块拆分为单独的文件并在PHP中再次定义它们。例如，"create_guten_block“默认将任意数量的块合并到三个文件中(blocks.build.js、blocks.editor.build.css和block.style.build.css)。

这两种方法都执行而不是条件加载样式(尚未)。

当使用create_guten_block方法enqueue_block_assets，并且只定义单个块(或设置为拆分每个块的文件)时，可以使用has_block添加条件加载：

    function my_awesome_blocks_cgb_block_assets() {
      if (is_singular()) {
        $id = get_the_ID();
        if (has_block('my-awesome/block-type', $id)) {
            wp_enqueue_style(
              'my-awesome_blocks-cgb-style-css',
              plugins_url( 'blocks/dist/blocks.style.build.css', __FILE__ ),
            );
        }
      }
    }
    add_action( 'enqueue_block_assets', 'my_awesome_blocks_cgb_block_assets' );

您可以将寄存器和条件加载结合起来，方法是去掉寄存器中的样式/脚本部分，并使用enqueue_block_assets加载相应的字体文件，如上面的代码所示。

未来的验证方法将使用register_block_type，因为如果条件加载是本地实现的，则很可能会使用它的script和style字段(参见注释这里)。

Answer 2

好吧，如果我正确地回忆起，在php register_block_type调用中注册的样式和脚本只应该在使用该块时加载。

如果您想要加载要排队的附加脚本或样式，只有当有一个类型为“my-超棒/块类型”的块时，可以在您的wp_enqueue_scripts函数中使用wp_enqueue_scripts函数，如下所示：

add_action('wp_enqueue_scripts','enqueue_if_block_is_present');

function enqueue_if_block_is_present(){
  if(is_singular()){
     //We only want the script if it's a singular page
     $id = get_the_ID();
     if(has_block('my-awesome/block-type',$id)){
        wp_enqueue_script('my-awesome-script',$path_of_script,$needed_scripts,$version_of_script,$load_in_footer);
     }
  }
}

如果您还希望脚本也加载到多个视图(比如类别存档或博客页面)，您可以连接到the_content过滤器，并在那里排队：

add_filter('the_content','enqueue_my_awesome_script_if_there_is_block');

function enqueue_my_awesome_script_if_there_is_block($content = ""){
  if(has_block('my-awesome/block-type')){
        wp_enqueue_script('my-awesome-script',$path_of_script,$needed_scripts,$version_of_script,true);
   //Be aware that for this to work, the load_in_footer MUST be set to true, as 
   //the scripts for the header are already echoed out at this point
     }
   return $content;
}

编码愉快！

Answer 3

另一种方法是将它们排在块内render_callback()函数。

register_block_type( 'mkaz/test-block', array(
    'editor_script'   => 'mkaz-test-block-script',
    'render_callback' => function( $attribs, $content ) {
        wp_enqueue_script( 'mkaz-test-block-client-asset' );
        return $content;
    }
) );

在过去，在之外登记样式表是无效的，但是现在规范支持它。

X-参：https://github.com/WordPress/gutenberg/issues/21838