WordPress 後台編輯體驗：側邊欄 vs 就地編輯的取捨

2026 iThome 鐵人賽

DAY 24

Vibe Coding

從一句話到一個網站：用 Vibe Coding 開發 WordPress Block Theme 的 30 天系列第 24 篇

18th鐵人賽

Oberon Lai

2026-08-27 11:41:22

129 瀏覽

分享至

修改區塊有兩種方式，一種是右側欄改屬性，另一種是直接在區塊內就地打字，兩種不同的使用模式會決定了同事或客戶接手這個網站時，是覺得順手還是想罵人。今天專門聊這個取捨。

右邊欄模式

之前完成的 service-card 區塊，它的 edit.js 是這樣的結構：畫面中央用 ServerSideRender 顯示卡片的實際樣子，所有可改的欄位（number、title、text、linkText、url）都放在右側的 InspectorControls 面板裡，用 TextControl 一格一格填。

<InspectorControls>
  <PanelBody title={ __( 'Content', 'block-theme' ) }>
    <TextControl label="title" value={ attributes.title }
      onChange={ ( v ) => setAttributes( { title: v } ) } />
    <TextareaControl label="text" value={ attributes.text }
      onChange={ ( v ) => setAttributes( { text: v } ) } />
  </PanelBody>
</InspectorControls>
<div { ...blockProps }>
  <ServerSideRender block={ metadata.name } attributes={ attributes } />
</div>

這是「右側欄」路線。另一條是前面提過的 RichText，讓使用者直接點在標題上就能改字，所見即所得，同樣一張卡片，兩種做法給使用者的感覺完全不同。

右側欄（InspectorControls）的好處是結構清楚。每個欄位有明確的標籤，使用者照著填，不太可能把版面弄壞，因為他碰不到 markup，只能改值。這對「欄位固定、不希望被亂動」的區塊很合適，像 service-card 這種設計系統的一部分。

代價是距離感。使用者改右側欄的 title，眼睛要在「右邊輸入框」和「中間預覽」之間來回跳，尤其用 ServerSideRender 時，每改一次還要等伺服器回傳重會有輕微延遲。內容多的時候這個來回會讓人累。

就地編輯：直覺，但容易失控

RichText 的就地編輯剛好相反。使用者點在標題上直接改，游標在哪字就進哪，零距離、零延遲，這是最接近 Word 那種直覺的體驗。做「內容為主、排版單純」的區塊，像一段標語、一個引言，就地編輯明顯更舒服。

它的代價是可控性變低。當你允許就地編輯，使用者可能連你不希望他碰的地方也一起改了，例如把整段標題刪光、貼進一段帶格式的文字。而且就地編輯多半走靜態區塊的儲存方式，又要面對改了 save 的輸出結構（多包一層 div、換個 class），編輯器會跳「此區塊包含非預期或無效的內容」的問題。

一張表幫你選

面向	右側欄（InspectorControls）	就地編輯（RichText）
體驗	填表格，有距離	所見即所得，直覺
可控性	高，使用者碰不到結構	低，容易被改壞
適合	欄位固定的設計系統區塊	內容為主、排版單純的區塊
延遲	ServerSideRender 有輕微延遲	即時

要採取哪種方式的判斷準則為這個區塊是「設計系統的零件」還是「內容的容器」？零件（service-card、badge）用右側欄，把結構鎖好；內容容器（標題、內文）用就地編輯，讓維護的人舒服，或是也可以混用，標題就地編輯、進階設定收進右側欄，很多核心區塊就是這樣做的。

這個決策，AI 幫不了你

編輯體驗這件事是少數 AI 幫不上太多忙的地方，因為 AI 不知道你的客戶需求，你可以叫 AI 「把 title 改成就地編輯」，它會照做，但「該不該就地編輯」這個判斷你要自己下，這也提醒我們 AI 開發不是把腦袋外包，真正的設計決策還是握在你手上。

編輯體驗定案後，區塊的內容和互動都齊了，但我們的區塊到現在都只有 PHP 和 CSS，還沒真正加過前台的 JavaScript，下一篇用 @wordpress/scripts 建置，並用傳統主題 enqueue 的角度，理解區塊的資源到底是怎麼註冊進來的。

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

Hi, 我是 Oberon Lai，十多年前我從一個不懂程式的平面設計師，一頭栽進 WordPress 的世界。從佈景主題到外掛開發，從接案到自研產品，這段旅程讓我深刻理解：好的技術不只是寫出能跑的程式碼，而是真正解決人的問題。

我積極投入參與社群，公開演講紀錄如下：

我專精 WordPress 開發，從企業形象網站的設計與開發、佈景主題客製化，到既有網站的改版升級，提供完整的 WordPress 建置服務。開發面涵蓋外掛開發與維護、區塊編輯器（Gutenberg）客製區塊、ACF 與 Custom Post Type 的資料架構設計，以及 REST API 整合與 Multisite 多站架構建置。同時也協助網站效能改善與 SEO 調校、安全性檢測與強化，並導入自動化部署與版本控制流程，搭配長期的技術顧問與維運支援，讓網站上線後也能穩定運作。

亦提供 WooCommerce 商店的建置與設定，並串接綠界、LINE Pay、藍新等台灣主流金流。可依需求進行結帳頁面客製化、訂單狀態自動化流程設計，以及商品管理與庫存系統的客製開發；也支援 WooCommerce Subscription 定期定額、REST API 應用開發、報表與數據匯出等進階需求。此外，透過購物流程 UX 改善、電商網站效能調校與 HPOS 高效能訂單儲存相容開發，全面提升營運效率，並提供電商營運技術顧問服務。

AI 浪潮席捲而來，我選擇擁抱而非恐懼，我把 AI 融入開發工作流以及客戶的產品中，也持續累積「AI 看不見的部分」：真實踩坑經驗、最新漏洞情報那些只有第一線工程師才看得見的細節，如果你有任何 WordPress 的客製化需求或是 AI 開發相關的問題非常歡迎加入 LINE 官方帳號與我聯繫：

https://page.line.me/vrf7844t?oat_content=url&openQrModal=true

如果想要獲取 AI 開發實戰經驗也能訂閱我的電子報，每週五上午準時出刊：

https://oberonlai.blog/wordpress-newsletter/