Notion vs. WordPress 古騰堡編輯器

最近在學習使用 Notion 作為 Evernote 的替代工具 ,突然覺得 Notion 的編輯模式跟 WordPress 的古騰堡 (Gutenberg) 編輯器有幾分類似,雖然這兩者的設計和使用定位不一樣,但就編輯的這個概念應該是可以互相學習的。不相信嗎?來看看吧!


核心概念

  • Notion:將內容分成不同的 Block,Block 是不同的內容元件,例如文字、圖片、To Do List。免費的帳號可以使用 1000 個 Block。
  • 古騰堡: 官方都直接稱呼為區塊編輯器(Block Editor)了,應該就不用多做解釋了吧。

開始編輯&加入區塊

在 Notion 和 古騰堡的編輯器中,都可以直接輸入文字來開始編輯,預設的就是文字段落區塊。如果你要加入不同的區塊,都可以透過輸入斜線(/),來快速選擇要加入的區塊。不同的是,在 Notion 中除了可以選擇區塊外,還可以執行一些命令,例如輸入/delete 可以刪除當前的區塊。輸入/color 可以改變當前區塊文字的顏色。

Notion:輸入斜線來選擇要加入的 Block。
Gutenberg:輸入斜線來選擇要加入的區塊

移動區塊

在 Notion 和古騰堡中,都可以透過拖曳的方式來改變區塊順序。

Notion:滑鼠按住區塊左邊的六個灰點,透過拖曳的方式來改變順序。若是點擊的話可以叫出 Action 選單。

Gutenberg:一樣是透過滑鼠按著區塊左側的六個灰點來拖曳改變順序,另外也可以透過上下的箭頭來改變順序。


變更和轉換區塊

在 Notion 和古騰堡中,都可以將目前的區塊轉換成不同的區塊,但 Notion 可以選擇的操作方式相對多了一點也比較彈性。

Notion:點擊區塊左側的六個灰點來開啟選單,點擊 Turn Into 選單來選擇要轉換的區塊

Notion:在區塊內容在區塊內容的任何一個地方輸入 /turn 來開啟快速選單,選擇要轉換的區塊

Notion:可以一次選擇多個區塊,透過滑鼠右鍵來開啟選單,點擊 Turn Into 來批次轉換成其他區塊

Notion:雙擊文字內容或選擇文字可以叫出工具列,在工具列上的最左側會顯示目前的區塊類型,也可以選擇轉換成其他區塊

Gutenberg:在區塊的工具列上可以改變區塊的類型


工具列

Notion 和古騰堡編輯器針對行內文字都提供了工具列,讓你可以快速編輯文字的樣字、加入連結或是進行其他動作。

Notion:如果要針對行內文字進行樣式設定,需要雙擊文字,或用滑鼠選擇文字,來叫出工具列,在工具列中你可以變更文字樣式,例如常見的粗體、斜體或是加入連結等動作。

Gutenberg:當你滑鼠點擊了某個區塊,就會直接開啟工具列,個人覺得會有點干擾,因為我可能只是要輸入文字,不一定是要改變文字樣式或是做其他動作。在只是要單純輸入文字的狀況下,這個工具列因為會遮住上方的內容反而造成視覺上的干擾,折衷的方式是在設定的地方,將工具列置於編輯器的頂部,但相對的又會影響編輯的順暢度,變成要修改文字樣式滑鼠就必須再移到畫面的上方。


心得

Notion 和 古騰堡編輯器在編輯上同樣都是以區塊 (Block) 為核心概念,但在操作的一些小細節上仍有些微的不一樣。

Notion 作為筆記和協作軟體在一些編輯的體驗上還是做得比較好一點,古騰堡則還有一些進步的空間,例如要修改行內文字 (inline text),古騰堡就必須另外安裝外掛來達到。另外古騰堡的工具列在單純編輯內容的時候,多少會有點干擾,希望能有改善的方式。但總體而言,兩者都是很好的工具,古騰堡編輯器作為開放原始碼的工具,相信會有更大的改善和擴充空間。

延伸閱讀:

[Gutenberg] – 如何替行內文字加上顏色和背景色

最近在使用 Notion,覺得 Notion 在編輯上真的蠻順手的,在整個撰寫文章的過程中,動作不太會被打斷。回到 WordPress 的古騰堡編輯器中就會發現有一些小地方還是做得不是那麼理想。

不過既然 WordPress 是開放原始碼的軟體,自然有辦法改善。這次我們要改善的就是幫文字區塊中的行內文字(inline text)加上顏色和背景顏色。

在預設的古騰堡編輯器中,段落區塊的內容是可以改變文字或背景顏色的,但是顏色的調整會套用在整個區塊內容中。調整的地方是在右側區塊資訊欄中的 [色彩設定],可以調整整個段落區塊的背景顏色和文字顏色。

段落區塊色彩設定

但有時候在寫文章時,會希望透過修改文字顏色或是背景顏色來強調部分行內文字內容,使用預設的古騰堡段落區塊就無法做到了,這時候就要安裝第三方的外掛來達到這樣的目的。

如果要修改部分行內文字顏色和背景色,有幾個外掛可以做到。

Advanced Rich Text Tools for Gutenberg

第一個外掛是 Advanced Rich Text Tools for Gutenberg,這個外掛是由 Automattic 的員工 Ella Van Durpe 所撰寫的,相信有一定的品質,另外這個外掛也已經由阿力獅提供了繁體中文的翻譯。

這個外掛除了可以針對行內文字設定顏色和背景顏色外,還提供了其他的功能,例如標示為程式碼片段、標示為上標和標示為下標等功能。不過標示行內文字顏色的功能跟預設的文字區塊顏色設定都是在右側的區塊資訊欄中進行設定,就撰寫來說感覺比較不是那麼直覺,而且因為這個功能是針對行內文字,放在整個區塊資訊欄中似乎比較不是那麼合理,但這個外掛的其他功能,像是上標和下標卻又是放在工具列中,這就有點摸不著開發者當初的設計邏輯了。

修改行內文字顏色和背景顏色

Gutenberg Page Building Toolkit – EditorsKit

另外一個外掛是 Gutenberg Page Building Toolkit – EditorsKit,或簡稱 EditorsKit。EditorsKit 是由 Jeffrey Carandang 所撰寫,Jeffrey 本身是 Phpbits Creative Studio 的創辦人,開發多個 WordPress 外掛,包含知名的 Widget Options 。另外他也是 CoBlocks 的共同創辦人,CoBlocks 已經於 2019年4月被 GoDaddy 收購

EditorsKit 在功能的設定設計上我覺得就比較符合我對文字編輯工具的想像,針對行內文字的相關設定都是在 Toolbar 中來進行設定,在編輯的過程中可以專注在整個編輯區域,不用再跳到右側的區塊資訊欄。

EditorsKit 除了文字格式外還提供了一些額外的功能:

  • 可修改標題的文字顏色和背景色
  • 針對桌機、平板、手機來顯示或隱藏區塊
  • 針對使用者登入或登出的狀態來顯示或隱藏區塊
  • 針對 Advanced Custom Fields(ACF) 欄位的值來顯示或隱藏區塊
  • 顯示區塊的導引線(Guide Line)
  • Markdown 語法支援

心得

以上,就是我針對行內文字顏色的外掛介紹,你可以選擇一個符合自己使用習慣的外掛,我個人的話會選擇 EditorsKit,因為他比較符合整體編輯的流程,且提供了許多額外的編輯功能,個人覺得也都相當實用。如果你有其他不錯的外掛,也歡迎在留言區留言推薦給大家。

初探 Twenty Twenty 主題

WordPress 5.3 即將於 11 月推出,其中將會包含一個新的預設主題 Twenty Twenty,這個主題將會完全地支援古騰堡編輯器。讓使用者在編輯的時候可以確保編輯的結果跟最後呈現的樣式一致。

為了加速主題的開發,Twenty Twenty 將會以 Chapin 這個主題為基礎,這個主題已經發布在 wordpress.org 上。

如果你要看目前 Twenty Twenty 的頁面設計,可以參考以下連結:

發布時程

根據官方的發布時程,WordPress 5.3 將於 11/12 推出,第一個發布版本預計於 10/15 推出。

參與貢獻

如果你有興趣貢獻 Twenty Twenty,你可以追蹤 WordPress core 的部落格文章,在整個設計和開發的流程中,在 Slack 的 #core-themes 頻道,每週都會有線上的會議。

主題的開發將會在 Github 上進行,目前開發中的版本已經上傳到 https://github.com/WordPress/twentytwenty。當主題開發完成,將會被合併到核心中,同時 Github 的 repo 將會被關閉。

相關連結

WordPress 備份插件 – 使用 duplicator 備份網站

網站的備份是每個網站管理者必備的技能之一,今天我們要介紹一個簡單易用的備份插件:duplicator。duplicator 目前已經有超過100萬個網站安裝

duplicator 並不只是一個備份的插件,她還可以協助你搬移網站。安裝並啟用插件後,進入後台->Duplicator->Packages,Package 清單會列出你過去的備份記錄,點擊 Create New 來新增備份。

新增備份的過程會透過1、2、3步驟來引導你,相當的清楚。第一個階段是 setup,在這個階段你可以設定你的備份的名稱,可以設定一個方便辨識的名稱,通常是日期為開頭,讓你知道這是哪一天的備份。

Storage 可以設定備份好的檔案要儲存在哪裡,預設是網站下的 wp-snapshots 資料夾。進階版可以將備份檔上傳到第三方儲存服務,例如 Dropbox、Google Drive、AWS S3 等服務。

Storage

Archive 可以設定什麼資料要打包進你的備份檔,包括檔案和資料庫。在 Files 分頁你可以設定要排除的資料夾或檔案,如果要排除請先將 Enable File Filters 啟用。你可以排除資料夾(Directories),或是使用檔案副檔名(File extensions)以及特定檔案(Files)來過濾不要的資料

常見的一個資料夾是快取外掛的資料夾 cache,這個資料夾存放著快取的檔案,這類檔案都可以透過快取外掛重新產生,所以沒有必要打包進備份檔,避免增加檔案的大小。

資料庫(Database)的分頁可以設定你要打包的資料表(Table),一般不會特別去設定,畢竟我們希望的是完整的備份資料庫。如果你真的清楚你在做什麼,再進行這邊的設定。

若你的備份檔是希望安裝在另一台主機的話,Installer 這個設定可以幫你產生一個安裝檔,方便你安裝,這個設定不是必要的。即使不填的話,你在安裝的時候也可以手動輸入。

確定都設定好後,按下 Next 進入下一步。第二階段會根據你的設定掃描的的網站,掃描完成後會顯示掃描的結果。若是正常的會顯示 Good,代表你可以繼續完成打包的工作。若不正常會顯示紅色的 Fail。點開每個設定會顯示詳細的資訊或是錯誤訊息。

若掃描的結果都正常,請按下 Build 來進行打包。打包的時間會決定於網站的檔案和資料庫大小,若你使用虛擬主機,很有可能在這一個階段timeout,導致打包失敗,若失敗建議回到第一步驟,將不必要的檔案排除掉,再重新進行打包。

打包完成!你可以下載打包好的檔案(Archive),若你要將此備份檔安裝在其他主機,請一併下載 Installer 安裝檔。

下載下來備份檔,解壓縮後可以看到網站的整個目錄和檔案,其中還包含了備份的資料庫檔案 database.sql

以上,就完成了基本的備份。下一篇文章會跟大家說明,如何將此備份檔安裝的其他主機上。

參考資料:

How To Move Or Backup Your Website With The WordPress Duplicator Plugin

How To Use Duplicator WordPress Plugin to Migrate WordPress Hosting: DIY Guide

Duplicator: An Easy Way to Back Up, Copy, or Clone Your WordPress Content

如何調整 Jetpack Photon 圖片品質

Jetpack Photon 是很多使用 WordPress 架站的朋友會使用的功能, 使用 Photon 可以大幅降低網站的流量, 但其實 Photon 會壓縮圖片的品質, 如果你是對圖片品質比較要求的話, 可以試著調整 Jetpack 的壓縮比率。
Jetpack 提供了 quality 這個參數來讓你調整圖片品質, 要注意的是這邊的 quality是代表著壓縮的品質, 所以如果設為 100, 不代表他不會壓縮, 只是代表著失真的程度會比較小。

JPG 預設的 quality 為 89%, PNG 為 80%, 而 WebP 則為 80%. 要注意的是,如果瀏覽器支援 WebP, 則 JPG 和 PNG 會被自動轉為 WebP。而當 quality 設為100時, 將會進行無失真壓縮, 在某些情況下可能會產生比原本圖片還要大的圖。

Photon API

Photon

Mastering Image Optimization in WordPress

使用 Local by Flywheel 進行 WordPress 本地端開發

先前我們介紹過如何使用 DesktopServer 進行本地端開發,當時文章中提到了另一款類似的付費工具 pressmatic,如今已被 Flywheel 買下,而買下之後 pressmatic 更名為 Local by Flywheel ,且變成完全免費,使用 Local by Flywheel 可以快速建構本地端的開發環境。

Flywheel 於日前也被 WPEngine 收購了,所以將來也許 Local 也會加入對 WPEngine 的整合。

目前 Local 除了免費的版本外,也提供了付費的版本,付費的版本多了一些進階的功能,像是團隊的協作,以及可以直接將你在電腦上做好的網站同步到 Flywheel 上。免費和付費版本的比較可以參考官網的比較圖

1.下載 Local

到 https://local.getflywheel.com/ 下載

2.啟用 Local

第一次啟用時需安裝一些軟體,從畫面可以知道,Local 的執行實際上是透過 virtualbox 的虛擬化技術

安裝完後會進入 Local 的網站管理介面,介面相當的簡潔,按下 Create A NEW SITE 開始建立你的第一個網站吧!

3.建立網站

跟著 Local 的步驟即可完成網站的建立。第一個步驟需要輸入網站簡單的名稱,作為識別用,你也可以設定網站的domain,這邊預設是用.local當結尾,你也可以用.test(但不要用 .dev,因為 .dev 已經是 google 買下的頂級網域,無法作為本機開發使用)。網站資料的路徑預設是放在 ~/Local Sites/ 底下,你也可以改成你習慣的位置。

因為本地端開發經常會需要建立新網站,這時候你可以建立一個安裝包,這邊稱作 blueprint,例如你可以將 WordPress 和你經常使用的插件打包成 blueprint,這樣下次開新網站時,只要選擇這個安裝包就可以直接安裝,不用再重新下載那些經常使用的插件,是不是很方便呢!

  1. Step1: 輸入網站基本資訊
  2. step2 選擇網站環境
  3. step3 設定 wp 帳號資訊

完成後按下 add site, 即可完成網站建置,由於我們是第一次建立網站,Local 會詢問要不要將剛剛設定的網站管理員帳號密碼設成預設,這樣下次就不用再重新設定。

你的第一個網站就完成囉!

在瀏覽器中輸入test.local, 即可看到我們剛安裝好的網站