WordPress 5.0 區塊基本使用

黃小蛙 — Sat, 08 Dec 2018 12:19:11 +0000

接續上篇來寫 WordPress 5.0 使用心得，雖然升級上沒有發生任何問題，一下子就完成更新了，但是仔細看每篇文章，還是可以發現一些問題，這邊記錄一下使用心得跟小蛙更新後遇到的問題跟解決方案。

所有元素區塊(Block)化

更新之後首先最大的改變就是編輯器換成 Gutenberg，這個編輯器跟原本的編輯器概念上完全不太相同，小蛙一開始使用覺得有點麻煩 …

最大的變動就是這個 Gutenberg 編輯器了

以前的編輯器是使用一系列編排下來的方式，而 Gutenberg 整個改成以「區塊(Block)」為基本單位，一篇文章是由很多很多個區塊組合而成的，例如：閱讀更多、文章段落、圖片、列表 … 等，如果都是寫文章的話，感覺上不會有太大的差別，只要寫到分段，按下 Enter 就自動會切換到下一個段落。

其他元素的話就不再是透過”格式”的轉換，而是加入一個”該格式的區塊”，小蛙這邊舉個例子好了，假設現在要插入一個列表功能，先點選左上角的+符號

加入清單「區塊」

接著可以看到多了一個區塊跟一個點，上方則會出現該區塊中的工具列，右方也會切換到該區塊中可以設定的屬性。

小蛙一開始還在想，如果是有特殊 class 的元件要怎麼辦，上面這張圖很清楚，右方直接就可以提供設定該區塊物件綁定的 class。

直接在編輯器中輸入文字，該區塊就會自動設定成 Paragraph 也就是段落，如果這時候要插入段落以外的元素，只要點區塊旁邊的 + 或是左上角的 + 就可以選取其他元素。

如果發現中間少了一段或位置錯了，不用剪下貼上什麼的，只要拖著區塊旁邊的這個東西，就可調整位置或新增區塊，這一點小蛙真的覺得很方便。

點選上方的 Add block 可以插入一個段落或元素

左邊可以拖拉段落到正確的位置

上方最右邊的 … 工具列點下來有很多功能，只要停在要刪除的區塊中，點選「Remove Block」就可以刪除區塊了。

這個 … 工具列裡面有很多很有用的東西

第四點是一個非常方便的功能，如果有一些「系列文的連結」或是多篇文章中固定要呈現的內容，就可以透過這個功能來實現，以後如果內容有修改，只要修改這個區塊，所有包含這個區塊的文章都會跟著更改，真的非常方便喔！

在還沒有出現這個功能之前，小蛙是透過 Content Blocks (Custom Post Widget) 這個套件來做到這件事，現在 WordPress 5.0 的 Gutenberg 直接就包含了這個功能了，實在是太方便了！

接下來大概還會再記錄遇到的一些問題跟使用心得。

WordPress 5.0 系列：

這篇文章 WordPress 5.0 區塊基本使用最早出現於記下來。