通過 EditorPlus WordPress 插件控制塊設計

上週，當我對他的 Gutenberg Forms 項目的審查進行最後編輯時，Munir Kamal 正在準備推出另一種用於塊編輯器的 WordPress 插件。 這個叫做EditorPlus，它將為塊創建一個設計系統。 Kamal 和他的團隊悄悄地完成了 1.0 版的收尾工作，並在幾天后在 WordPress 插件庫中發布了該插件。

與許多其他創建自定義塊以實現特定設計結果的插件不同，EditorPlus 為用戶提供了使用他們手頭的內容自定義頁面的靈活性。 它為 WordPress 的每個現有塊添加了一系列設計選項。 在前端，它通過僅動態輸出該頁面所需的 CSS 來留下一個輕量級的足跡。

也許這個插件現在最好的事情是它為許多與設計相關的功能奠定了基礎，這些功能可能會在古騰堡找到一個永久的家，並最終成為 WordPress 的核心。 Gutenberg 團隊可以藉用想法、迭代和改進它們。 我們已經在 Gutenberg 8.3 中看到了實驗性的填充控制領域。 開發團隊在未來進行額外的設計控制是有道理的。 這些控件首先在第三方插件中推出的好處是，團隊可以看到用戶對它們的反應，並在做出任何承諾之前了解他們是否會直接在古騰堡工作。

對於那些喜歡在不接觸代碼的情況下擁有大量設計自由的人來說，EditorPlus 不乏好東西。 本質上，該插件是一個 CSS 編輯器，無需了解 CSS。 它通過塊選項為最終用戶提供最需要的 CSS 功能選項。 對於那些喜歡修補設計和強大到足以創建獨特佈局而不會使前端網站臃腫的人來說，這是一個遊樂場。

EditorPlus 的工作原理

激活 EditorPlus 插件後，最終用戶可以通過前往帖子或頁面編輯器立即開始使用其選項。 插入塊後，插件會在塊選項面板下提供以下八個選項卡（每個選項卡前面都有一個+符號）：

• 邊界
• 盒子陰影
• 漿紗
• 背景
• 利潤
• 填充
• 邊界半徑
• 附加功能

這些選項卡目前僅針對核心 WordPress 塊而不是第三方插件塊顯示。 除了 Extras 選項卡，每個選項卡都對應其 CSS 對應項。 Extras 選項卡提供了一個更高級的“顯示”選項，它允許用戶更改塊環繞元素在 CSS 中的display值。 此選項最好留給更高級的用戶。 它還提供了一個過渡選項，可以很好地與懸停樣式配合使用。

每個塊選項選項卡還具有神秘的“R”和“H”按鈕。 “R”按鈕允許用戶啟用響應選項，這意味著他們可以根據桌面、平板電腦和移動屏幕更改塊樣式。 “H”按鈕允許用戶根據鼠標懸停狀態更改設計。

該插件在一點點空間中包含了很多選項。 所有新的設計標籤一開始都會讓人感到有點不知所措。 但是，只要稍加使用，就很容易獲得一些肌肉記憶并快速爆發出自定義佈局。

每個插件的選項都相當簡單。 而且，當它們不是時，您可以通過塊編輯器獲得即時反饋的好處。

對於某些用戶來說，有一些領域可能會出現問題，這取決於他們的主題如何設計某些塊。 例如，尺寸選項卡下的寬度設置可能並不總是有效。 一些主題會為塊添加最大寬度，無論大小如何，這都會限制整體寬度。 可以通過插件否決這一點，但 Kamal 在 1.0 版中選擇不這樣做。

小心邊距。 根據主題設計，它可能會使用左右邊距來放置內容。 即使只設置了上邊距或下邊距，插件也會自動為左右邊距輸出0 。 這可能會破壞某些主題的內容佈局。

我在使用插件時遇到的一個問題是我的活動主題的樣式通常會推翻插件的樣式。 例如，默認的 Twenty Twenty 主題在其 CSS 中定位p.has-background以添加自定義填充。 因此，它以更高的特異性推翻了 EditorPlus 插件的 CSS。 這個問題是意料之中的，插件開發人員以“重要”複選框的形式為每個設計選項添加了一個解決方案。 如果用戶勾選此框，它會在輸出的樣式規則中添加!important ，這將允許它否決主題樣式。 這不是一個 100% 萬無一失的解決方案。 您的里程可能會有所不同，具體取決於主題，但它應該適用於大多數用例。

我不喜歡 UI 中重要的複選框的想法。 這不是用戶應該擔心的事情。 然而，在這個世界的現實中，主題和插件沒有真正的方式來傳達哪些設計規則比其他規則更重要。 儘管不希望將其包含在 UI 中，但將其包含在內是一個明智的決定。 否則，太多主題的樣式規則會覆蓋插件的 CSS。

最後的想法

對於 1.0 版本，EditorPlus 有了一個良好的開端。 在我的測試中，我發現了一些缺陷。 普通用戶的任何問題都可能以主題衝突的形式出現，這些衝突很可能是圍繞使用高特異性或!important在他們的 CSS 中的主題。

Kamal 在插件的網頁上明確表示，該插件還有更多功能。 我不確定他的想法是什麼，但我期待看到它們。 我希望看到與文本相關的塊（例如標題和段落）的文本陰影選項。 也很高興看到 Gallery 塊中的圖像的一些設計選項，而不僅僅是包裝元素。

是否應該使用 EditorPlus 取決於您是否需要額外的設計控件。 EditorPlus 面向那些需要更類似於輕量級頁面構建器但又想堅持使用原生 WordPress 的人。 這個插件很好地展示了可能性，並且很好地表明了有朝一日可能會出現在 WordPress 中的潛在設計選項。