如何争取古腾堡大块的资产

在开发 Gutenberg 块时，正确 enqueue 资产的方法包括：1. 使用 register_block_type 指定 editor_script、editor_style 和 style 的路径；2. 在 functions.php 或插件中通过 wp_register_script 和 wp_register_style 注册资源，并设置正确的依赖和版本；3. 配置构建工具输出合适的模块格式，并确保路径一致；4. 通过 add_theme_support 或 enqueue_block_assets 控制前端样式的加载逻辑，确保样式生效且避免冲突。

在开发 Gutenberg 块时，正确地 enqueue 资产（比如 JavaScript 和 CSS 文件）是确保块正常运行的关键步骤。这不仅仅是把文件加载到后台编辑器中，还要考虑前端展示和依赖管理的问题。

1. 使用 register_block_type 正确指定资产路径

WordPress 提供了 register_block_type 函数来注册一个区块类型，并允许你通过参数指定对应的 JS 和 CSS 文件路径。

register_block_type( __DIR__, array(
    'editor_script' => 'my-block-editor-script',
    'editor_style'  => 'my-block-editor-styles',
    'style'         => 'my-block-frontend-styles',
) );

• editor_script：用于区块编辑器中的脚本（通常是编译后的 .js 或 .jsx 文件）
• editor_style：仅在编辑器中加载的样式，不影响前台
• style：前后台都会加载的样式，通常用于区块的基本外观统一

2. 在 functions.php 或插件中注册脚本和样式表

你需要先用 wp_register_script 和 wp_register_style 注册这些资源，这样 WordPress 才能识别你在 register_block_type 中提到的 handle。

function my_block_assets() {
    wp_register_script(
        'my-block-editor-script',
        get_template_directory_uri() . '/blocks/my-block/build/index.js',
        array( 'wp-blocks', 'wp-element', 'wp-editor' ),
        filemtime( get_template_directory() . '/blocks/my-block/build/index.js' )
    );

    wp_register_style(
        'my-block-editor-styles',
        get_template_directory_uri() . '/blocks/my-block/editor.css',
        array(),
        filemtime( get_template_directory() . '/blocks/my-block/editor.css' )
    );

    wp_register_style(
        'my-block-frontend-styles',
        get_template_directory_uri() . '/blocks/my-block/style.css',
        array(),
        filemtime( get_template_directory() . '/blocks/my-block/style.css' )
    );
}
add_action( 'init', 'my_block_assets' );

注意几个关键点：

• 脚本依赖要写全，比如 wp-blocks, wp-element, wp-editor
• 使用 filemtime() 可以避免浏览器缓存旧版本文件
• 如果你使用的是主题目录结构，建议用 get_template_directory；如果是插件，则用 plugins_url() 配合 __FILE__

3. 构建工具配置注意事项

如果你用 Webpack、Vite 或其他构建工具打包区块代码，需要注意以下几点：

• 输出的 JS 文件应该是一个 UMD 模块，或者被正确打包为适合 WordPress 环境的格式
• 不要把 React、ReactDOM 单独打包进你的脚本，而是通过 WordPress 提供的全局变量引用（如 window.React, window.ReactDOM）
• 确保输出路径与 PHP 中注册的路径一致

常见做法：

• 把编辑器脚本放在 /src/blocks/your-block/index.js
• 用 Webpack 编译到 /build/your-block/index.js
• 同时生成 .asset.php 文件来自动获取依赖项和版本号（WordPress 默认支持）

4. 加载前端样式的小技巧

默认情况下，Gutenberg 区块的 style 参数会在前台自动加载样式。但有时候你会发现样式没生效，原因可能是：

• 主题没有正确启用区块样式支持（检查是否调用了 add_theme_support( 'wp-block-styles' )）
• 样式被其他主题样式覆盖，建议加一些命名空间类名
• 有些区块不会在前端渲染（比如某些动态区块），这时候可以考虑用 enqueue_block_assets 钩子按需加载

function my_enqueue_frontend_assets() {
    if ( has_block( 'my/block-name' ) ) {
        wp_enqueue_style( 'my-block-frontend-styles' );
    }
}
add_action( 'wp_enqueue_scripts', 'my_enqueue_frontend_assets' );

这种方式更灵活，但也需要判断区块是否实际存在页面上。

基本上就这些。只要按照 WordPress 的区块注册规范走，再注意构建和路径问题，就能顺利把资产加载进区块里了。

以上是如何争取古腾堡大块的资产的详细内容。更多信息请关注PHP中文网其他相关文章！