Notion vs. WordPress Gutenberg 編輯器

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


核心概念

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

開始編輯&加入區塊

在 Notion 和 Gutenberg 的編輯器中,都可以直接輸入文字來開始編輯,預設的就是文字段落區塊。如果你要加入不同的區塊,都可以透過輸入斜線(/),來快速選擇要加入的區塊。不同的是,在 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),古騰堡就必須另外安裝外掛來達到。另外古騰堡的工具列在單純編輯內容的時候,多少會有點干擾,希望能有改善的方式。但總體而言,兩者都是很好的工具,古騰堡編輯器作為開放原始碼的工具,相信會有更大的改善和擴充空間。

延伸閱讀:

發佈留言