WordPress 5.9 全站編輯學習資源

Anne McCarthy 是 Automattic 的 Developer Relations Wrangler,近期也有在 WordCamp Taiwan 分享即將釋出的 WordPress 5.9 的全站編輯功能。

Anne 最近分享了一篇關於全站編輯的資源,裡面包含了許多資源、課程以及功能說明,如果你想更深入了解全站編輯,一定不可錯過 Anne 的這篇文章!

WordPress 5.9 新增的內容類型 (Post Type)

WordPress 5.9 新增了4種內容類型 (Post Type),這4種內容類型會在你啟用區塊佈景主題時使用到。

這4種內容類型包含:

  • wp_template:佈景主題使用的區塊範本
  • wp_template_part:區塊範本使用的範本組件
  • wp_global_styles:針對目前使用中的佈景主題,管理者建立和儲存的樣式
  • wp_navigation:導覽選單

要注意的是,這些內容類型是保留字,只有 WordPress 內部使用。

學習如何使用全站編輯設計網站

如果你想學習如何使用全站編輯 (Full Site Editing) 來設計網站,在 Learn WordPress 網站上有一個基礎的課程,讓你可以對全站編輯有基礎的認識,也為之後即將發佈的 WordPress 5.9 做準備。不過這個課程比較偏向概念上的介紹,WordPress 5.9 將會包含很多新的功能,如果你想要了解更多,可以參考 WordPress 5.9 詳解指南 (Field Guide)

WordPress 5.9 詳解指南 (Field Guide) 發佈

每次新版本的 WordPress 發佈之前都會發佈一個該版本的 Field Guide,說明這個版本的一些重大變動。而 WordPress 5.9 Filed Guide 也於近日發佈了。內容大多是針對開發者的一些注意事項,但一般使用者還是能從這些內容去知道這次版本的一些重大變動,也為這些變動提早做準備。

theme.json 基本結構介紹

在 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 檔案包含哪些欄位,以及欄位的說明和格式。

WordPress 佈景主題目錄 2021 回顧

根據 WordPress 官方的統計,2021年 一共增加了 1227 個佈景主題,其中只有 29 個是區塊佈景主題 (Block Theme)

如果你要找區塊佈景主題,可以透過 WordPress.org 的 Feature Filter 來過濾。在 Features 的部分勾選 Full Site Editing,然後點擊 Apply Filters 來顯示過濾的結果。

在這篇文章發佈的當下,原本 29 個區塊佈景主題已經成長到 35 個了,相信 2022 年會有更多的區塊佈景主題。

外觀自訂器 (Customizer) 在 WordPress 5.9 的角色

全站編輯即將在 WordPress 5.9 推出,對於使用者來說將會是全然不同的操作體驗。在全站編輯的模式下,網站上的所有外觀都可以透過網站編輯器來編輯,也因為這樣,將來若你在 WordPress 5.9 上啟用了支援全站編輯的佈景主題,那麼你將不會看到外觀自訂器 (Customizer)。

但如果你啟用的佈景主題不支援全站編輯,那麼你仍然可以用外觀自訂器來客製化你的外觀。

另外要注意的是,過去你可以在外觀自訂器中預覽未啟用的佈景主題,但在全站編輯下你是無法預覽未啟用的佈景主題的,因為網站編輯器只能在已啟用的佈景主題中使用,但目前已經有人開了一個 ticket,提出希望能夠預覽未啟用的區塊佈景主題。

結論

如果你要編輯或預覽區塊佈景主題,你要先啟用它。

如果你要預覽非區塊佈景主題,則可以依照過去的方式在外觀自訂器中進行預覽。

WordPress 只會在非區塊佈景主題顯示外觀自訂器,或是你使用的外掛有透過 customize_register action 來啟用外觀自訂器。

區塊語法 Block Grammar

我們在「什麼是全站編輯」這篇文章中提到,開發者會使用使用 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 -->

透過網站編輯器 (Site Editor) 來編輯範本

在之前的文章提到,要新增或修改範本及範本組件有三種方式,其中一種就是透過網站編輯器來修改。

如果要透過網站編輯器來編輯網站的範本,可以從 [外觀]->[編輯器] 進入。進入之後預設會顯示首頁的頁面編輯。

編輯範本

在範本清單頁面會顯示目前網站的範本,預設會顯示佈景主的的範本。

如果範本被編輯過,則在 icon 上會多一個藍點提示。

如果範本是由使用者新增,則 Added by 會顯示使用者資料。

如果範本是使用者新增的,則可以透過右方的管理項目來刪除範本

如果佈景主題預設的範本被修改過,則可以透過管理項目選單來回復成預設的範本。

如何建立 template 和 template part

建立區塊範本 (Template) 和區塊範本組件 (Template part) 的方式基本上可分為三種:

  • 手動建立。建立一個包含區塊標記的 HTML 檔案
  • 使用網站編輯器 (site editor)
  • 在區塊編輯器中使用範本編輯模式 (template editing mode)

資料來源:https://developer.wordpress.org/block-editor/how-to-guides/themes/create-block-theme/#creating-the-templates-and-template-parts