WordPress 5.0 區塊基本使用

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

所有元素區塊(Block)化

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

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

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

操作區塊

新增

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

加入清單「區塊」

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

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

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

調整位置

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

點選上方的 Add block 可以插入一個段落或元素
左邊可以拖拉段落到正確的位置

刪除

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

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

  1. Duplicate 可以快速複製一塊一模一樣內容跟設定的區塊
  2. Insert Before, Insert After 可以在上方或下方新增一個新區塊
  3. Edit as HTML 是讓該區塊以 HTML 的方式編輯
  4. Add to Reusable Blocks 將該區塊儲存成可重複使用的區塊

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

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

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

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *