在開發(fā) Gutenberg 塊時，正確 enqueue 資產(chǎn)的方法包括：1. 使用 register_block_type 指定 editor_script、editor_style 和 style 的路徑；2. 在 functions.php 或插件中通過 wp_register_script 和 wp_register_style 注冊資源，并設(shè)置正確的依賴和版本；3. 配置構(gòu)建工具輸出合適的模塊格式，并確保路徑一致；4. 通過 add_theme_support 或 enqueue_block_assets 控制前端樣式的加載邏輯，確保樣式生效且避免沖突。

在開發(fā) Gutenberg 塊時，正確地 enqueue 資產(chǎn)（比如 JavaScript 和 CSS 文件）是確保塊正常運行的關(guān)鍵步驟。這不僅僅是把文件加載到后臺編輯器中，還要考慮前端展示和依賴管理的問題。

1. 使用 register_block_type 正確指定資產(chǎn)路徑

WordPress 提供了 register_block_type 函數(shù)來注冊一個區(qū)塊類型，并允許你通過參數(shù)指定對應(yīng)的 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：用于區(qū)塊編輯器中的腳本（通常是編譯后的 .js 或 .jsx 文件）
• editor_style：僅在編輯器中加載的樣式，不影響前臺
• style：前后臺都會加載的樣式，通常用于區(qū)塊的基本外觀統(tǒng)一

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

注意幾個關(guān)鍵點：

• 腳本依賴要寫全，比如 wp-blocks, wp-element, wp-editor
• 使用 filemtime() 可以避免瀏覽器緩存舊版本文件
• 如果你使用的是主題目錄結(jié)構(gòu)，建議用 get_template_directory；如果是插件，則用 plugins_url() 配合 __FILE__

3. 構(gòu)建工具配置注意事項

如果你用 Webpack、Vite 或其他構(gòu)建工具打包區(qū)塊代碼，需要注意以下幾點：

• 輸出的 JS 文件應(yīng)該是一個 UMD 模塊，或者被正確打包為適合 WordPress 環(huán)境的格式
• 不要把 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 區(qū)塊的 style 參數(shù)會在前臺自動加載樣式。但有時候你會發(fā)現(xiàn)樣式?jīng)]生效，原因可能是：

• 主題沒有正確啟用區(qū)塊樣式支持（檢查是否調(diào)用了 add_theme_support( 'wp-block-styles' )）
• 樣式被其他主題樣式覆蓋，建議加一些命名空間類名
• 有些區(qū)塊不會在前端渲染（比如某些動態(tài)區(qū)塊），這時候可以考慮用 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' );

這種方式更靈活，但也需要判斷區(qū)塊是否實際存在頁面上。

基本上就這些。只要按照 WordPress 的區(qū)塊注冊規(guī)范走，再注意構(gòu)建和路徑問題，就能順利把資產(chǎn)加載進區(qū)塊里了。

以上是如何爭取古騰堡大塊的資產(chǎn)的詳細內(nèi)容。更多信息請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！