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

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

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

WordPress 提供了register_block_type函數(shù)來(lái)註冊(cè)一個(gè)區(qū)塊類(lèi)型，並允許你通過(guò)參數(shù)指定對(duì)應(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 ：僅在編輯器中加載的樣式，不影響前臺(tái)
• style ：前後臺(tái)都會(huì)加載的樣式，通常用於區(qū)塊的基本外觀(guān)統(tǒng)一

2. 在functions.php或插件中註冊(cè)腳本和樣式表

你需要先用wp_register_script和wp_register_style註冊(cè)這些資源，這樣WordPress 才能識(shí)別你在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' );

注意幾個(gè)關(guān)鍵點(diǎn)：

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

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

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

• 輸出的JS 文件應(yīng)該是一個(gè)UMD 模塊，或者被正確打包為適合WordPress 環(huán)境的格式
• 不要把React、ReactDOM 單獨(dú)打包進(jìn)你的腳本，而是通過(guò)WordPress 提供的全局變量引用（如window.React , window.ReactDOM ）
• 確保輸出路徑與PHP 中註冊(cè)的路徑一致

常見(jiàn)做法：

• 把編輯器腳本放在/src/blocks/your-block/index.js
• 用Webpack 編譯到/build/your-block/index.js
• 同時(shí)生成.asset.php文件來(lái)自動(dòng)獲取依賴(lài)項(xiàng)和版本號(hào)（WordPress 默認(rèn)支持）

4. 加載前端樣式的小技巧

默認(rèn)情況下，Gutenberg 區(qū)塊的style參數(shù)會(huì)在前臺(tái)自動(dòng)加載樣式。但有時(shí)候你會(huì)發(fā)現(xiàn)樣式?jīng)]生效，原因可能是：

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

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

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