Full Site Editing

在 WordPress 5.8 引進了一個新的功能 theme.json，用來設定區塊編輯器以及個別區塊的樣式，而對於即將於 WordPress 5.9 推出的全站編輯 (Full Site Edit) 更是扮演著很重要的角色。

theme.json 是 JSON (JavaScript Object Notation) 格式檔案，如果你對 JSON 格式不熟悉，可以參考這篇文章。

theme.json 結構

基本的 theme.json 結構如下：

{
    "version": 1,
    "settings": {},
    "styles": {},
    "customTemplates": {},
    "templateParts": {}
}

version： theme.json 格式的版本號，目前只有一個唯一的版號 1。WordPress 5.8 會忽略不同於當前版本號的 theme.json

settings： 可以啟用或停用功能。

styles： 設定佈景主題的預設樣式

customTemplates：設定在 templates 目錄中的區塊範本。例如你可以設定某個區塊範本可以在哪個內容類型使用。

templateParts：設定在 parts 目錄中的區塊範本組件。

theme.json JSON Schema

因為 theme.json 的設定繁多，如果你要確認 theme.json 可以使用哪些設定，可以參考 theme.json 的 schema。

JSON schema 是用來描述一個 JSON 檔案包含哪些欄位，以及欄位的說明和格式。

我們在「什麼是全站編輯」這篇文章中提到，開發者會使用使用 HTML 範本以及區塊註解 (Block Comment) 而不是 PHP 來描述區塊範本和區塊範本組件。

這篇文章即要帶你認識基本的區塊語法。

首先，一個基本的區塊是由 HTML 註解來呈現的。WordPress 會將這個註解內容編譯並且以 HTML 的方式呈現。

<!--                   /-->

在區塊註解中，會以一個用 wp 為前綴和區塊名稱來開頭。例如以下的區塊就是一個搜尋的區塊

<!-- wp:search /-->

區塊註解可以是一個 self-closed 的註解，也可以用開始和結束標籤來包含著 HTML 內容。例如前面提到的搜尋區塊，就是一個單行的 self-closed 註解，因為搜尋區塊不會包含其他內容。

下面的範例是一個段落區塊，中間包含著 HTML 內容，因為段落會包含著其他內容。

<!-- wp:paragraph -->
<p>Welcome to the world of blocks.</p>
<!-- /wp:paragraph -->