到目前為止我們的區塊都是 PHP 加 CSS，那段 edit.js 裡的 JSX 其實不能直接跑，瀏覽器看不懂 JSX也看不懂 import，中間會有個編譯的過程把它翻譯成瀏覽器能執行的 JavaScript。今天就講這條建置流水線，還有一個更根本的問題：Block Theme 的 JS 和 CSS，到底是怎麼被載進頁面的？用你熟悉的傳統主題 enqueue 就會很好理解。

先回憶傳統主題怎麼載資源

傳統主題載一支 JS，你會在 functions.php 寫：

wp_enqueue_script( 'my-script', get_template_directory_uri() . '/js/main.js', array(), '1.0', true );

手動指定路徑、相依、版本。CSS 也是 wp_enqueue_style 如法炮製。Block Theme 沒有推翻它，只是把「宣告」的位置從 functions.php 搬到了 block.json，然後把「翻譯 JSX」這件事交給一個建置工具。

@wordpress/scripts：官方的建置工具

@wordpress/scripts（簡稱 wp-scripts）是 WordPress 官方封裝好的建置工具，底層是 webpack 加 Babel，但它把設定都藏起來了，你幾乎不用碰 webpack config。看專案真實的 package.json：

{
  "scripts": {
    "build": "wp-scripts build --webpack-src-dir=blocks --output-path=build/blocks",
    "start": "wp-scripts start --webpack-src-dir=blocks --output-path=build/blocks"
  },
  "devDependencies": {
    "@wordpress/scripts": "^30.0.0"
  }
}

兩個指令。npm run build 是一次性打包，把 blocks/ 底下每個區塊的 index.js（含 JSX）編譯成瀏覽器能跑的 JS，輸出到 build/blocks/；npm run start 是開發模式，存檔就自動重新編譯，改完後立刻看到效果。

跑 npm run build 之後，build/blocks/service-card/ 裡會多出 index.js（編譯後）、index.asset.php（自動算好的相依和版本號），還有處理過的 style-index.css。這個 index.asset.php 很關鍵，它幫你把「這支 JS 依賴哪些 WordPress 套件」算好了，你不用手動維護那串相依陣列。

block.json 就是你的 enqueue

現在回到那個根本問題。編譯好的資源，是怎麼被載進頁面的？答案在 block.json 的這幾行：

{
  "editorScript": "file:./index.js",
  "style": "file:./style-index.css",
  "viewScript": "file:./view.js"
}

這三個欄位，就是 Block Theme 版本的 enqueue：

最後那個 viewScript 的機制很實用，它只在頁面上真的用到這個區塊時才載，傳統主題常見的毛病是不管哪一頁都把全站 JS 完整載入；Block Theme 靠這個機制做到按需加載，頁面沒用到的區塊它的前台 JS 一個位元組都不會下載，再也不用自己寫條件邏輯去判斷何時該載入、何時不用，也能減少 JS 之間的衝突發生。

那 functions.php 還要做什麼

你可能想問既然資源都宣告在 block.json，functions.php 那段註冊還需要嗎？需要，但只剩一行迴圈：

$manifests = glob( get_template_directory() . '/build/blocks/*/block.json' );
foreach ( $manifests as $manifest ) {
  register_block_type( dirname( $manifest ) );
}

register_block_type() 讀進那個資料夾的 block.json，裡面宣告的 editorScript、style、viewScript 就會被 WordPress 自動註冊、按規則 enqueue，你不再需要為每支 JS/CSS 手寫 wp_enqueue_*，宣告一次後就會自動引入。

交給 AI 時的重點

建置這塊很適合交給 AI，但有兩個地方要小心：一是確認它用的是編譯後的路徑，register_block_type 要指向 build/blocks/，不是原始的 blocks/，指錯了前台就載到沒編譯的 JSX。

二是前台互動 JS 該放 viewScript，不要塞進 editorScript，後者只在後台載，前台不會執行。這兩個是新手最常踩的，AI 也偶爾會弄混。

資源載入的機制清楚了。有了 viewScript 這個前台 JS 的入口，我們終於能做「真正會動」的區塊。下一篇我們用它搭配 WordPress 的 Interactivity API，做一個會自動輪播的客戶評價 Carousel。

文章目錄：https://oberonlai.blog/category/2026-ithome/