通過EditorPlus WordPress插件進行控制塊設計

上周,當我對他的評論進行最終編輯時 古騰堡形式 專案,Munir Kamal正在準備為區塊編輯器推出另一種WordPress插件。 這個叫做 EditorPlus,它將創建一個用於塊的設計系統。 Kamal和他的團隊悄悄地對1.0版進行了最後潤飾,並在幾天後將其在WordPress插件存儲庫中發布。

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

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

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

EditorPlus如何工作通過editorplus-wordpress-plugin控制模塊設計通過EditorPlus WordPress插件控制模塊設計編輯圖庫塊的背景和填充。

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

  • 邊境
  • 框影
  • 漿紗
  • 背景
  • 保證金
  • 填充
  • 邊界半徑
  • 附加功能

這些選項卡將僅針對核心WordPress塊顯示,而不適用於第三方插件塊。 除了Extras選項卡之外,每個選項卡都對應於其CSS對應項。 「附加功能」選項卡提供了更高級的「顯示」選項,該選項允許用戶在CSS中更改塊換行元素的顯示值。 此選項最好留給高級用戶使用。 它還提供了一個過渡選項,可以很好地適用於懸停樣式。

每個塊選項選項卡還具有神秘的「 R」和「 H」按鈕。 「 R」按鈕允許用戶啟用響應選項,這意味著他們可以基於台式機,平板電腦和移動屏幕來更改塊樣式。 「 H」按鈕使用戶可以根據滑鼠懸停狀態更改設計。

通過editorplus-wordpress-plugin控制模塊設計通過EditorPlus WordPress插件控制模塊設計在懸停時向Pullquote塊添加陰影。

該插件在一些空間中包含了很多選項。 起初,所有新設計選項卡都可能讓人有些不知所措。 但是,只需少量使用,就很容易獲得一些肌肉記憶並迅速爆發自定義布局。

插件的每個選項都非常簡單。 而且,如果不是這樣,則可以通過塊編輯器獲得即時反饋的好處。

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

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

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

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

最後的想法

對於1.0版發行版,EditorPlus是一個堅實的開端。 在測試中,我發現了一些缺陷。 對於普通用戶而言,任何問題都可能以主題衝突的形式出現,而這些衝突很可能是在主題中使用CSS的高特異性或!important的主題。

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

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

像這樣:

喜歡載入中……

資源

相關文章