WordPress 古騰堡區塊設計選項增強插件 EditorPlus

古騰堡編輯器目前還是在慢悠悠地前進著,也不看到一些比較有意思的插件,最近在 WP Tavern 看到一個介紹了新插件 EditorPlus,是一個很不錯的東西,尤其是支持設置區塊在電腦、平板和手機端的大小等。

下面是簡單翻譯的 WP Tavern 的文章,作者為 Justin Tadlock,大家一起來看看。


上周,在我對他的Gutenberg Forms項目的評論進行最終編輯時,Munir Kamal正在準備為塊編輯器發布另一種WordPress插件。這個稱為EditorPlus,它將為區塊創建一個設計系統。Kamal和他的團隊悄悄地對1.0版進行了最后潤飾,并在幾天后將其在WordPress插件存儲庫中發布。

與其他創建自定義模塊以實現特定設計的插件不同,EditorPlus為用戶提供了靈活的功能,可根據自己的現有情況自定義其頁面。它為WordPress的每個現有區塊增加了許多設計選項。在前端,它僅動態輸出該頁面所需的CSS,從而節省了空間。

也許現在關于此插件的最好的事情是,它為許多與設計相關的功能奠定了基礎,這些功能可能會在古騰堡Gutenberg)并最終成為WordPress的核心。古騰堡(Gutenberg)團隊可以借用,迭代和改進想法。我們已經在Gutenberg 8.3中看到了實驗性的內邊距控件區域。開發團隊必須遵循后續的其他設計控制措施,這才有意義。這些控件首先在第三方插件中推出的好處是,該團隊可以了解用戶對此的反應,并在做出任何承諾之前了解它們是否可以直接在Gutenberg中工作。

對于那些希望在不接觸代碼的情況下擁有大量設計自由的人來說,EditorPlus還是很有優勢的。本質上,該插件是不需要知道CSS的CSS編輯器。它通過塊選項為最終用戶提供了最需要的CSS功能的選項。對于那些喜歡修改設計并且功能強大到足以創建獨特布局而又不會在前端占用大量資源的人來說,這是一個不錯的選擇。

EditorPlus的工作方式

編輯圖庫塊的背景和內邊距。

激活 EditorPlus 插件后,用戶可以轉到文章或頁面編輯器,立即開始使用其選項。插入一個塊后,該插件將在塊選項面板下提供以下八個選項卡(每個+符號之前都有一個符號):

  • 邊框
  • 陰影
  • 大小
  • 背景
  • 外邊距(margin)
  • 內邊距(padding)
  • 邊框半徑(圓角)
  • 其他選項

這些選項卡將僅針對WordPress核心區塊顯示,而不適用于第三方插件塊。除了“其他”選項卡之外,每個選項卡都對應于其CSS對應項。“其他”選項卡提供了更高級的“顯示”選項,該選項使用戶可以在CSS中更改塊包裝元素的display值。此選項最好留給高級用戶使用。它還提供了一個過渡選項,可以很好地適用于懸停樣式。

每個塊選項選項卡還具有神秘的“ R”和“ H”按鈕。“ R”按鈕允許用戶啟用自適應選項,這意味著他們可以基于電腦、平板和手機來更改塊樣式。“ H”按鈕使用戶可以根據鼠標懸停狀態更改設計。

在懸停時向引用塊添加陰影。

插件的每個選項都非常簡單。

對于某些用戶來說,有一些區域可能會出現問題,這取決于他們的主題樣式如何影響某些塊。例如,“大小調整”選項卡下的寬度設置可能并不總是有效。一些主題將為塊添加最大寬度,無論大小如何,都會限制整體寬度。可以通過插件推翻此規則,但是Kamal選擇在1.0版中不這樣做。

注意邊距。根據主題設計,它可能使用左右邊距放置內容。即使僅設置頂部或底部邊距,該插件也會自動為左側和右側邊距輸出0。這可能會破壞某些主題的內容布局。

我在使用插件時遇到的一個問題是,我的主題樣式通常會否決插件的樣式。例如,默認的Twenty Twenty主題p.has-background在其CSS中以添加自定義填充為目標。因此,它以更高的優先級取代了EditorPlus插件的CSS。預計會出現此問題,并且插件開發人員為每個設計選項以“重要”復選框的形式添加了解決方案。如果用戶在此框上打勾,則它將添加!important到輸出的樣式規則中,這將允許它否決主題樣式。這不是100%的傻瓜解決方案。您的里程可能會有所不同,具體取決于主題,但它適用于大多數用例。

我不喜歡用戶界面中重要復選框的想法。用戶不必擔心。但是,這是一個現實世界,主題和插件沒有真正的方法來傳達哪些設計規則比其他規則更重要。盡管不希望在用戶界面中使用它,但還是明智的選擇。否則,太多主題的樣式規則將覆蓋插件的CSS。

最后的想法

對于1.0版發行版,EditorPlus是一個堅實的開端。在測試中,我發現了一些缺陷。對于普通用戶而言,任何問題都可能以主題沖突的形式出現,并且這些沖突很可能是圍繞主題的高優先級或!importantCSS。

Kamal在該插件的網頁上明確指出,該插件還有更多其他用途。我不確定他的想法是什么,但我希望看到它們。我想為與文本相關的塊(例如標題和段落)看到一個文本陰影選項。在圖庫塊中看到圖像的一些設計選項,而不僅僅是包裝元素,這也將是一件很不錯的事情。

是否應使用EditorPlus將取決于是否需要其他設計控件。EditorPlus適用于需要更類似于輕量級頁面構建器但又希望使用本機WordPress的用戶。這個插件很好地展示了可能性,并且很好地表明了有一天可能會出現在WordPress中的潛在設計選項。

聲明:本站所有文章,如無特殊說明或標注,均為本站原創發布。任何個人或組織,在未征得本站同意時,禁止復制、盜用、采集、發布本站內容到任何網站、書籍等各類媒體平臺。如若本站內容侵犯了原著者的合法權益,可聯系我們進行處理。
歡迎關注我們的微信公眾號:WPDAXUE

倡萌

一個文科IT宅男,喜歡折騰WordPress和被它折騰 ^_^

暫無評論

發表評論