如果使用块，则有条件地在前端加载CSS/Java脚本

时间：2019-02-13 作者：user127091

假设我的主题中没有无限滚动或任何其他内容：是否有办法将我的自定义古腾堡块样式和脚本排队，以便它们仅在真正使用块时（延迟）加载到前端？类似于is_active_widget, 就为了街区？

如果我把他们排在enqueue_block_assets 功能它们被添加到任何站点。

在github上，我找到了这个https://github.com/WordPress/gutenberg/issues/5445 , 但这听起来更像是捆绑而非条件加载，所以我仍然希望他们不要错过这个优化机会——否则任何其他网站都会很快被20个来自众多Gutenberg block插件的脚本所淘汰，这些插件是人们安装的，并且一页只使用一次（比如大型图片库块脚本）。

感谢（&A）；当做

3 个回复

最合适的回答,由SO网友:user127091 整理而成

感谢@Kuchenundkaao为我指明了正确的方向。我仍然在回答我自己的问题，因为我想为可能偶然发现这一点的其他人提供更多的背景。

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

add_action(\'enqueue_block_assets\',\'xy_function\') / add_action(\'enqueue_block_editor_assets\',\'xy_function\'), 在使用“create\\u guten\\u 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 variant可以加载多个块，而无需将块拆分为单独的文件并在PHP中再次定义它们。例如，“create\\u guten\\u block”默认情况下会将任意数量的块合并到三个文件中（blocks.build.js、blocks.editor.build.css和block.style.build.css）。

两种方式都可以not 有条件加载样式（尚未）。

使用create\\u guten\\u 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\\u block\\u资产加载相应的fontend文件。

未来验证方法将使用register_block_type, 作为script 和style 如果本机实现了条件加载，则最有可能使用它的字段（参见注释）here).

SO网友:HU ist Sebastian

嗯，如果我没有记错的话，只有在使用块时，才应该加载在php register\\u block\\u类型调用中注册的样式和脚本。

如果仅当存在类型为“my awesome/block type”的块时，才想加载要排队的其他脚本或样式，可以在wp\\U enqueue\\U脚本函数中使用has\\U block函数，如下所示：

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);
     }
  }
}

如果还希望在多个视图（如类别存档或博客页面）上加载脚本，可以挂接到\\u内容过滤器并将脚本排队：

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;
}

快乐的编码！

SO网友:Ian Dunn

另一种方法是enqueue them inside the block\'s render_callback() function.

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;
    }
) );

在过去，将样式表排在<head>, 但现在规范支持这一点。

x参考号：https://github.com/WordPress/gutenberg/issues/21838

小码农CODE

如果使用块，则有条件地在前端加载CSS/Java脚本

相关推荐