在開發(fā)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 控制前端樣式的加載邏輯，確保樣式生效且避免衝突。

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

1. 使用register_block_type正確指定資產路徑

WordPress 提供了register_block_type函數來註冊一個區(qū)塊類型，並允許你通過參數指定對應的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' );

注意幾個關鍵點：

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

3. 構建工具配置注意事項

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

• 輸出的JS 文件應該是一個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參數會在前臺自動加載樣式。但有時候你會發(fā)現樣式沒生效，原因可能是：

• 主題沒有正確啟用區(qū)塊樣式支持（檢查是否調用了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ī)範走，再注意構建和路徑問題，就能順利把資產加載進區(qū)塊裡了。

以上是如何爭取古騰堡大塊的資產的詳細內容。更多資訊請關注PHP中文網其他相關文章！