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

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

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

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

段落區塊色彩設定

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

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

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,因為他比較符合整體編輯的流程,且提供了許多額外的編輯功能,個人覺得也都相當實用。如果你有其他不錯的外掛,也歡迎在留言區留言推薦給大家。

在〈[Gutenberg] – 如何替行內文字加上顏色和背景色〉中有 7 則留言

  1. Editorskit 现在不能edit 文字了吗?只能edit文字的底部颜色。

    回覆
    • 可以呀, EditorsKit 不會影響編輯文字,如果你不能編輯文字,可能是有外掛衝突了。建議關閉可能衝突的外掛再試試看。

      回覆
    • Hi~您好。這個是 WordPress 的外掛,無法使用在 Notion 上喔! Notion 本身就可以幫行內文字加上顏色了,你可以再試試看~

      回覆
  2. 雖然這是好幾年前的文章,但我還是必須跟作者說… 太感謝你了
    我是個Gutenberg編輯器白癡,一直用下拉選單改文字顏色好幾年了
    多年來一直被這個選字改顏色功能搞到瘋掉 (內心無限OS為什麼不能直覺一點啊???)
    直到我今天實在受不了Google發現這篇文章..
    原來真的有外掛支援這功能,我之前找老半天完全沒找到
    總而言之.. 謝謝

    回覆

發佈回覆給「BC」的留言 取消回覆

%d 位部落客按了讚: