古騰堡編輯器目前還是在慢悠悠地前進(jìn)著，也不看到一些比較有意思的插件，最近在 WP Tavern 看到一個(gè)介紹了新插件 EditorPlus，是一個(gè)很不錯(cuò)的東西，尤其是支持設(shè)置區(qū)塊在電腦、平板和手機(jī)端的大小等。
下面是簡(jiǎn)單翻譯的 WP Tavern 的文章，作者為 Justin Tadlock，大家一起來(lái)看看。
上周，在我對(duì)他的Gutenberg Forms項(xiàng)目的評(píng)論進(jìn)行最終編輯時(shí)，Munir Kamal正在準(zhǔn)備為塊編輯器發(fā)布另一種WordPress插件。這個(gè)稱(chēng)為EditorPlus，它將為區(qū)塊創(chuàng)建一個(gè)設(shè)計(jì)系統(tǒng)。Kamal和他的團(tuán)隊(duì)悄悄地對(duì)1.0版進(jìn)行了最后潤(rùn)飾，并在幾天后將其在WordPress插件存儲(chǔ)庫(kù)中發(fā)布。
與其他創(chuàng)建自定義模塊以實(shí)現(xiàn)特定設(shè)計(jì)的插件不同，EditorPlus為用戶(hù)提供了靈活的功能，可根據(jù)自己的現(xiàn)有情況自定義其頁(yè)面。它為WordPress的每個(gè)現(xiàn)有區(qū)塊增加了許多設(shè)計(jì)選項(xiàng)。在前端，它僅動(dòng)態(tài)輸出該頁(yè)面所需的CSS，從而節(jié)省了空間。
也許現(xiàn)在關(guān)于此插件的最好的事情是，它為許多與設(shè)計(jì)相關(guān)的功能奠定了基礎(chǔ)，這些功能可能會(huì)在古騰堡（Gutenberg）并最終成為WordPress的核心。古騰堡（Gutenberg）團(tuán)隊(duì)可以借用，迭代和改進(jìn)想法。我們已經(jīng)在Gutenberg 8.3中看到了實(shí)驗(yàn)性的內(nèi)邊距控件區(qū)域。開(kāi)發(fā)團(tuán)隊(duì)必須遵循后續(xù)的其他設(shè)計(jì)控制措施，這才有意義。這些控件首先在第三方插件中推出的好處是，該團(tuán)隊(duì)可以了解用戶(hù)對(duì)此的反應(yīng)，并在做出任何承諾之前了解它們是否可以直接在Gutenberg中工作。
對(duì)于那些希望在不接觸代碼的情況下?lián)碛写罅吭O(shè)計(jì)自由的人來(lái)說(shuō)，EditorPlus還是很有優(yōu)勢(shì)的。本質(zhì)上，該插件是不需要知道CSS的CSS編輯器。它通過(guò)塊選項(xiàng)為最終用戶(hù)提供了最需要的CSS功能的選項(xiàng)。對(duì)于那些喜歡修改設(shè)計(jì)并且功能強(qiáng)大到足以創(chuàng)建獨(dú)特布局而又不會(huì)在前端占用大量資源的人來(lái)說(shuō)，這是一個(gè)不錯(cuò)的選擇。
EditorPlus的工作方式
激活 EditorPlus 插件后，用戶(hù)可以轉(zhuǎn)到文章或頁(yè)面編輯器，立即開(kāi)始使用其選項(xiàng)。插入一個(gè)塊后，該插件將在塊選項(xiàng)面板下提供以下八個(gè)選項(xiàng)卡（每個(gè)+符號(hào)之前都有一個(gè)符號(hào)）：
- 邊框
- 陰影
- 大小
- 背景
- 外邊距（margin）
- 內(nèi)邊距（padding）
- 邊框半徑（圓角）
- 其他選項(xiàng)
這些選項(xiàng)卡將僅針對(duì)WordPress核心區(qū)塊顯示，而不適用于第三方插件塊。除了“其他”選項(xiàng)卡之外，每個(gè)選項(xiàng)卡都對(duì)應(yīng)于其CSS對(duì)應(yīng)項(xiàng)。“其他”選項(xiàng)卡提供了更高級(jí)的“顯示”選項(xiàng)，該選項(xiàng)使用戶(hù)可以在CSS中更改塊包裝元素的display值。此選項(xiàng)最好留給高級(jí)用戶(hù)使用。它還提供了一個(gè)過(guò)渡選項(xiàng)，可以很好地適用于懸停樣式。
每個(gè)塊選項(xiàng)選項(xiàng)卡還具有神秘的“ R”和“ H”按鈕。“ R”按鈕允許用戶(hù)啟用自適應(yīng)選項(xiàng)，這意味著他們可以基于電腦、平板和手機(jī)來(lái)更改塊樣式。“ H”按鈕使用戶(hù)可以根據(jù)鼠標(biāo)懸停狀態(tài)更改設(shè)計(jì)。
插件的每個(gè)選項(xiàng)都非常簡(jiǎn)單。
對(duì)于某些用戶(hù)來(lái)說(shuō)，有一些區(qū)域可能會(huì)出現(xiàn)問(wèn)題，這取決于他們的主題樣式如何影響某些塊。例如，“大小調(diào)整”選項(xiàng)卡下的寬度設(shè)置可能并不總是有效。一些主題將為塊添加最大寬度，無(wú)論大小如何，都會(huì)限制整體寬度。可以通過(guò)插件推翻此規(guī)則，但是Kamal選擇在1.0版中不這樣做。
注意邊距。根據(jù)主題設(shè)計(jì)，它可能使用左右邊距放置內(nèi)容。即使僅設(shè)置頂部或底部邊距，該插件也會(huì)自動(dòng)為左側(cè)和右側(cè)邊距輸出0。這可能會(huì)破壞某些主題的內(nèi)容布局。
我在使用插件時(shí)遇到的一個(gè)問(wèn)題是，我的主題樣式通常會(huì)否決插件的樣式。例如，默認(rèn)的Twenty Twenty主題p.has-background在其CSS中以添加自定義填充為目標(biāo)。因此，它以更高的優(yōu)先級(jí)取代了EditorPlus插件的CSS。預(yù)計(jì)會(huì)出現(xiàn)此問(wèn)題，并且插件開(kāi)發(fā)人員為每個(gè)設(shè)計(jì)選項(xiàng)以“重要”復(fù)選框的形式添加了解決方案。如果用戶(hù)在此框上打勾，則它將添加!important到輸出的樣式規(guī)則中，這將允許它否決主題樣式。這不是100％的傻瓜解決方案。您的里程可能會(huì)有所不同，具體取決于主題，但它適用于大多數(shù)用例。
我不喜歡用戶(hù)界面中重要復(fù)選框的想法。用戶(hù)不必?fù)?dān)心。但是，這是一個(gè)現(xiàn)實(shí)世界，主題和插件沒(méi)有真正的方法來(lái)傳達(dá)哪些設(shè)計(jì)規(guī)則比其他規(guī)則更重要。盡管不希望在用戶(hù)界面中使用它，但還是明智的選擇。否則，太多主題的樣式規(guī)則將覆蓋插件的CSS。
最后的想法
對(duì)于1.0版發(fā)行版，EditorPlus是一個(gè)堅(jiān)實(shí)的開(kāi)端。在測(cè)試中，我發(fā)現(xiàn)了一些缺陷。對(duì)于普通用戶(hù)而言，任何問(wèn)題都可能以主題沖突的形式出現(xiàn)，并且這些沖突很可能是圍繞主題的高優(yōu)先級(jí)或!importantCSS。
Kamal在該插件的網(wǎng)頁(yè)上明確指出，該插件還有更多其他用途。我不確定他的想法是什么，但我希望看到它們。我想為與文本相關(guān)的塊（例如標(biāo)題和段落）看到一個(gè)文本陰影選項(xiàng)。在圖庫(kù)塊中看到圖像的一些設(shè)計(jì)選項(xiàng)，而不僅僅是包裝元素，這也將是一件很不錯(cuò)的事情。
是否應(yīng)使用EditorPlus將取決于是否需要其他設(shè)計(jì)控件。EditorPlus適用于需要更類(lèi)似于輕量級(jí)頁(yè)面構(gòu)建器但又希望使用本機(jī)WordPress的用戶(hù)。這個(gè)插件很好地展示了可能性，并且很好地表明了有一天可能會(huì)出現(xiàn)在WordPress中的潛在設(shè)計(jì)選項(xiàng)。
- EditorPlus 官方：https://wpeditorplus.com/
- EditorPlus 下載地址：https://wordpress.org/plugins/editorplus/
