什麼是全站編輯 (Full Site Editing)?

  1. 所有頁面上看到的內容都是一個區塊,例如 Logo 或是網站標題
  2. 你可以在編輯器編輯範本或範本組件
  3. 全站編輯會移除「自訂」和「小工具」選單
  4. 開發者會使用 HTML 範本而不是 PHP,以及使用區塊註解(block comments)和標記而不是 PHP 函式

編輯器和佈景主題如何配合

當你在網站編輯器或是範本編輯器儲存設計時,WordPress 會將設計儲存在資料庫中。在佈景主題中的檔案不會被更新,網站會使用儲存的範本。

WordPress 會儲存內容和標記在兩個新的內容類型 (post type):wp_templates 和 wp_template_part

佈景主題設定檔 (theme.json)

theme.json是用來設定區塊的預設值,例如內容寬度、文字顏色或背景色等外觀設定。
你也可以用來啟用或是關閉功能。

降低佈景主題開發的障礙

全站編輯將降低佈景主題的開發障礙,對於佈景主題作者來說,不需要再處理自訂以及小工具和 post meta boxes。

支援全站編輯的佈景主題將會更容易被建置,而且會包含更少的檔案和更少的 CSS。

如何測試全站編輯

通常在 WordPress 正式發佈之前都會有一段時間,而這段時間網站管理者或是開發者就可以透過測試版本來進行測試,避免正式版本釋出後更新到網站出問題,開發者也可以提早針對有問題的功能進行相對應的修改。隨著 WordPress 5.9 即將發佈,建議站長和開發者儘早測試新版本在自己網站上和客製化功能的相容性。本篇文章即在介紹如何測試最新版本 WordPress 的全站編輯功能。

步驟1 – 安裝 WordPress

如果你要測試開發中的 Gutenberg 功能,至少要 WordPress 5.8 以上的版本。另一個方式是安裝開發中的 WordPress 分支版本。如果你安裝開發中的 WordPress 分支版本,你可以選擇搭配 Gutenberg 外掛進行測試,或是不使用 Gutenberg 外掛也可以,因為 Guteberg 外掛會合併進入到之後發佈的 WordPress 區塊編輯器中。

步驟2 – 安裝 Gutenberg

要讓全站編輯功能可以啟用,你必須要安裝最新版本的 Gutenberg 外掛。你可以在 WordPress 後台進行安裝,或是到 WordPress 官方外掛目錄下載。https://wordpress.org/plugins/gutenberg/

你也可以使用開發中的 Gutenberg 外掛,但這不是必需的。你可以從 Gutenberg 的 Github 存放庫來下載最新開發中的 Gutenberg。

git clone https://github.com/WordPress/gutenberg

下一步使用命令列工具到 Gutenberg 的目錄下執行

npm install

最後再執行

npm run build

如果你沒有完成以上步驟,在 WordPress 後台會看到相關的提示訊息

步驟3 – 安裝區塊佈景主題 (Block Theme)

最後你需要安裝一個支援全站編輯的區塊佈景主題。你可以使用將來在 5.9 版本中內建的預設佈景主題  Twenty twenty-Two

以上就是測試全站編輯的準備步驟,接下來你就可以開始體驗全站編輯的功能囉!

如何開發一個區塊佈景主題 (Block Theme) – 01 – 檔案結構

WordPress 5.9 即將在 1/25 發佈,這次將會導入全站編輯,除了對於使用者來說是一個全新的體驗,對於開發者來說開發的方式也相當的不同。這一系列的文章將會介紹如何開發一個 Block theme。

Block theme 檔案目錄結構

上圖是一個基本的區塊佈景主題的檔案目錄結構,其中有兩個檔案是每個佈景主題一定要有的:index.php and style.css.

如果一個佈景主題要被辨識為區塊佈景主題那麼就必需要在 templates 資料夾中新增一個 index.html 範本檔案。

functions.php 不是必要的。如果你需要新增客製化的程式才會需要新增這個檔案。同時 theme.json 也是非必要的,除非你要管理全域樣式 (global style)。

區塊範本 (Block Templates)

區塊範本是你的佈景主題的基礎檔案,他們是一些包含 HTML 語法的檔案,且必須要放在 templates 資料夾中。區塊範本檔案是遵循 WordPress 檔案目錄結構的,所以 /templates/index.html 會對應到傳統佈景主題下的 index.php,/templates/404.html 會對應到傳統佈景主題下的 404.php,以此類推。

如果 WordPress 無法在 templates 目錄中找到對應的 html 檔案,那麼就會尋找佈景主題根目錄下的 .php 檔。

區塊範本組件(Block Templates Parts)

範本組件不是必須的,如果要新增範本檔案則要新增在 parts 資料夾中。它是用來幫助佈景主題開發者有效地重複利用一些可重複使用的程式。一個範本組件基本上就是一個區塊,它是用來包含其他區塊的容器。範本組件檔案會放在 parts 資料夾中,同時跟範本檔案一樣,它們也是一些 html 檔案,同時遵循 WordPress 的檔案目錄結構。所以 parts/header.html 就會對應到傳統佈景主題下的 header.php。

佈景主題的未來?Block-based Themes

隨著全站編輯(full-site editing)已經是一個實際的目標,佈景主題在未來將會有不同的面貌。目前 Gutenberg 團隊已經開始 block-based theme(以區塊為基礎的佈景主題) 的初版文件來描述 block-based theme 的概念和內容。

什麼是全站編輯 (Full Site Editing)?

在了解 Block-based theme 會如何運作之前,也許你可以先了解一下目前 Gutenberg 的發展方向。Gutenberg 的終極目標就是希望讓使用者可以透過區塊系統來客製化網站的任何功能和外觀,到目前為止,區塊系統主要用來編輯文章內容。

為了要達成 Full site editing 的目標,任何網站上的動態內容都必須是一個區塊,例如網站的選單或是標題,使用者可以將選單或標題放在網站的任何一個地方。或許你會開始懷疑,如果我可以任意移動這些區塊,那麼佈景主題存在的功能到底是什麼?

提議的佈景主題結構

目前提議的佈景主題結構跟現有的結構差不多。最大的差別在於佈景主題的樣板會區分為 “block-templates” 和 “block template parts”

theme
|__ style.css
|__ functions.php
|__ block-templates
    |__ index.html
    |__ single.html
    |__ archive.html
    |__ ...
|__ block-template-parts
    |__ header.html
    |__ footer.html
    |__ sidebar.html
    |__ ...

註:block-templates 和 block-template-parts 目錄已分別改為 templates 和 template-parts

如何使用 Gutenberg 鍵盤快速鍵

隨著 Gutenberg 的功能來越多,使用快捷鍵可以大幅加速你的編輯流程,如果你想要查詢 Gutenberg 的快速鍵有哪些,可以透過以下兩種方式來查詢有哪些快捷鍵可以使用。

透過工具列選單開啟快速鍵清單

開啟 Gutenberg 鍵盤快速鍵

透過快速鍵來開啟快速鍵清單

透過快速鍵開啟快速鍵清單會根據你的作業系統而有些不一樣。如果你是 Mac 的使用者,請使用 Ctrl + Opt + H 來開啟,如果你是 Windows 的使用者,請使用 Shift + Alt + H 來開啟。

快速鍵清單

鍵盤快速鍵Mac 快速鍵Windows 快速鍵
顯示鍵盤快速鍵清單Ctrl + Opt + HAlt + Shift + H
全域快速鍵Mac 快速鍵Windows 快速鍵
儲存變更Cmd + SCtrl + S
復原變更Cmd + ZCtrl + Z
取消復原變更Cmd + Shift + ZCtrl + Shift + Z
顯示或隱藏設定面板Cmd + Shift + ,Ctrl + Shift + ,
開啟區塊導覽選單Ctrl + Opt + OCtrl + Alt + O

Gutenberg Block Directory: 區塊目錄與單一區塊外掛

Gutenberg 在 6.5 的版本加入了一個新的實驗性功能,讓使用者在新增區塊的時候,可以搜尋到其他未安裝在網站上的區塊。而這些未安裝在網站上的區塊將來將會顯示在 WordPress.org 上的一個區塊的分類。這個功能其實是 Matt Mullenweg 在 2018 的 WordCamp US 上宣布的 9 Projects for 2019 中的其中一項。

如果你想實驗這項功能,可以自行安裝 Gutenberg,然後在 Gutenberg > Enable Block Directory search 中找到這項功能。

啟用 Block Directory

啟用之後,你就可以在區塊編輯器中插入區塊時搜尋區塊。這邊是以 Boxer 這個測試區塊為例。

當你插入了這個區塊時,實際上是安裝了一個外掛在你的網站上。所以你去外掛清單看會多出一個外掛。

到這邊你應該不難發現,未來將會有一個新的外掛型態,而這個外掛是以單一區塊的模式來提供功能。之所以會有這樣的概念原因在於,目前已經有很多的外掛提供了自己的區塊,但是基本上你很難用區塊的名稱去搜尋到這個區塊,而且在外掛的頁面上,也很難描述清楚提供的區塊的所有功能。

WordPress 團隊提出了一個新型態的外掛概念:Single Block Plugins。這些外掛只會提供一個區塊,且會在外掛的目錄中歸類在 Block Directory 這個內容中。更多的資訊和討論可以到這邊

參考資料:

ShareAblock – 一個開源共享的 Gutenberg 區塊、範本資料庫

ShareAblock 是由 EditorsKit 開發者所建立個一個開源共享的區塊、範本設計資料庫,成立的目標在於希望讓使用者能夠更快速地使用並設計區塊。所有人都可以自由地下載網站上的區塊或樣板,但上傳的資格目前仍有所限制,只有經過審核的部分作者可以上傳,不過你還是可以申請成為具資格的上傳者。

如何使用

由於目前 Gutenberg 並未支援區塊的匯出和匯入,如果要匯入下載的區塊或樣板,必須在網站上先安裝 EditorsKit,EditorsKit 支援以 json 的格式匯出區塊,並透過拖曳的方式直接匯入區塊到你的編輯器中。

匯出區塊內容

找到你想下載的區塊設計,頁面上會說明這個設計使用了哪些區塊,以及他個功能描述,按下 Download Now 來下載。

按下 Download Now 會跳出視窗要求輸入你的姓名和 Email。

完成後會有一個下載確認,這時候我才了解原來他是一個購買的流程,同時也會在這個網站幫你建立一個帳號,也許將來會有收費的計畫,讓一些比較進階或複雜的區塊設計能夠讓使用者付費下載,我覺得這也是蠻合理的,至於使用者買不買單就看之後的發展了。

匯入區塊內容

找到你下載的 json 檔,透過拖曳的方式直接拖曳到你正在編輯的編輯器中,即可完成匯入。以下為匯入的 Call to Action 區塊範例。

Schedule a free consultation

Vestibulum et magna mattis, sollicitudin convallis ligula ac. Ullamcorper turpis, nec metus nunc vel ullamcorper turpis, turpis. Augue justo nec convallis metus nunc vel turpis. 

範本

除了區塊以外,網站上還有另一個分類是範本 (Template),範本屬於比較完整的設計頁面,你可以快速地建構出頁面。

未來

目前 EditorsKit 和 ShareABlock 在做的事算是走在蠻前面的,很多你覺得不錯的功能也許將來也會直接內建在 Gutenberg 中,或許將來在 WordPress.org 上,除了外掛和主題之外,還會再多一個區塊的分類,讓使用者可以自由地上傳和下載區塊,我想屆時 Gutenberg 也會被更多使用者所接納。