Nick Diego上週釋出了Icon Block外掛。與可用的類似區塊不同，它不依賴於第三方庫。相反，它迎合了開發人員和DIY人群，允許他們將任何SVG直接新增到編輯器。
Diego是Block Visibility外掛的作者，該外掛剛推出一年多，正在成為該領域最好的專案。整個夏天，他擴充套件了一個專業版，增加了更多利基選擇的價值。到目前為止，在塊編輯器方面，他表現出願意為問題找到創造性的解決方案，並專注於全面的使用者體驗。他的最新外掛似乎沒有什麼不同。
拼湊Block Visibility的定價頁面是促使他建立Icon Block的原因。他有一個龐大的功能列表，並通過HTML區塊對圖示進行手工編碼。
Block Visibility定價表
“在對使用HTML區塊作為SVG圖示（並且不想使用塊庫）感到非常惱火之後，我本週將這個小區塊放在一起，”Diego 說。“我的目標是使用基本上所有原生WP元件構建一個簡單的SVG圖示區塊。隨著更多功能被新增到核心（邊距、響應控制元件等），我會將它們新增到區塊中。”
結果是成功的。它為這樣一個傾向於WordPress區塊系統的圖示解決方案檢查了很多框。
從本質上講，它允許終端使用者將任何SVG程式碼複製並貼上到文字欄位中，並使其在編輯器和前端呈現。
新增基本圖示
然而，它並不止於此。它使用一系列核心元件和區塊支援的功能來完善解決方案。它支援顏色和對齊等必備功能。使用者可以在連結到任何URL時調整圖示大小、填充和邊框半徑。
我想新增的一個功能是一組邊框樣式、寬度和顏色控制元件。這與其說是優先事項，不如說是一個很好的選擇。
調整圖示的顏色、大小、間距和邊框半徑
支援核心元件對於釋出來說很好，但Diego採取了額外的步驟並新增了自定義功能。圖示區塊有一個“旋轉”按鈕，允許使用者以90°的增量旋轉圖示。它還具有用於水平和垂直翻轉圖示的按鈕。
WordPress編輯器中有大量此類圖示外掛的用例。一個更常見的場景是一組頂部帶有圖形的簡單框。
帶有圖示的框
使用圖示區塊，這很簡單，可以通過使用欄目區塊、放入自定義圖示並對其進行自定義來實現。然而，還有更多的可能性。
缺失的部分在WordPress的末尾。目前，用於構建水平佈局的穩健解決方案並不多。很難在文字旁邊對齊圖示。
在最近新增的行變化對本集團塊節目承諾。體驗有點麻煩，但可以將圖示塊放在段落旁邊，如下面的螢幕截圖所示。我建立了一個帶有檢查圖示的快速定價表。
帶有圖示列表的定價列
目前還沒有辦法從介面控制每行專案之間的間距。我希望我的圖示更接近文字。
另一個問題是這應該是一個列表。沒有理由重新利用其他塊來構建佈局。但是，列表區塊不允許使用者巢狀塊。
這些不是Icon Block外掛的問題。它只是展示了WordPress應該實現的一個相當常見的用例。這將使這些型別的外掛更加強大。
支援圖示區塊登陸Gutenberg外掛，並最終進入WordPress。古騰堡專案負責人Matías Ventura在2019年發表過言論，探索允許使用者直接將SVG插入編輯器的想法。如果這樣做的話，它更可能是一個不允許終端使用者新增自定義程式碼的視覺化選擇器。在這種情況下，Diego的區塊可能仍然存在，作為具有更大靈活性的替代解決方案。
雖然該外掛以其當前形式可以作為WordPress社羣很大一部分的完美解決方案，但Diego計劃對其進行改進。他正在考慮為不想新增SVG程式碼的使用者新增一個圖示選擇器。預設情況下，這將顯示內建的WordPress圖示。但是，他還計劃允許第三方開發人員使用自定義“圖示包”對其進行擴充套件。
評論留言