Phi Phan 使用圖標選項啟動分隔塊

不到一周後 啟動塊增強,Phi Phan 發布了另一個項目: 圖標分隔符. 它是一個塊插件,用於創建帶有 SVG 圖標的自定義分隔線。

「我嘗試在核心/分隔符中支持圖標,」當我們上次談到向核心塊添加圖標時,Phan 說道。 「但這需要更改標記。 所以我可能會專門為它創建一個新的小塊。」 現在,他至少檢查了他在待辦事項清單上提到的許多想法中的一個。

做一件事並且做得很好的插件通常是我最喜歡的擴展類型,Icon Separator 也不例外。 這也是塊系統本身的美妙之處。 它的設計目的是允許用戶在任何地方粘貼小組件。

首次插入圖標分隔符塊時,它看起來很像任何其他普通分隔符。 它在屏幕上輸出一條簡單的水平線:

phi-phan-launches-a-separator-block-with-an-icon-option Phi Phan 使用圖標選項啟動分隔塊圖標分隔符塊的默認輸出。

歡迎用戶在默認狀態下使用它,但這不會很有趣。 這個塊是關於圖標的。

該插件捆綁了來自 WordPress、Bootstrap 和 Ionicons 庫的 3,500 多個圖標,為用戶提供了很多選擇。 它看起來是 Phan 的 Block Enhancements 插件的遺留物——重複使用相同的代碼是有意義的。 該塊還允許用戶為自定義圖標輸入 SVG 代碼。

很快就選擇了一個圖標並開始在編輯器中自定義分隔符輸出:

phi-phan-launches-a-separator-block-with-an-icon-option-1 Phi Phan 使用圖標選項啟動分隔塊自定義圖標分隔符塊。

該插件有很多選項允許用戶自己製作。 除了選擇圖標外,他們還可以自定義其填充和描邊顏色、大小、間距、位置和對齊方式。

該塊還具有用於自定義分隔線本身的選項,包括實線、虛線和點線樣式。 用戶可以更改其對齊方式、寬度、顏色等。

phi-phan-launches-a-separator-block-with-an-icon-option-2 Phi Phan 使用圖標選項啟動分隔塊各種圖標和分隔符修改。

此塊是 WordPress 中可重用塊系統的理想用例。 假設用戶想在他們的網站上使用相同的分隔符設計,那麼設計一次並保存一份副本以供在其他需要它的地方使用是有意義的。

我對插件不使用


HTML 元素感到有點失望。 上次與 Phan 交談時,我變得很興奮。 我想看看有人會如何解決這個插件的問題,但我希望它可以通過語義


來解決。 部分原因只是作為一名開發人員和設計師的好奇心,知道它將作為通用塊用於任何主題設計的局限性。

Phan 採用了使用包裝器

並將圖標 代碼放入其中的不那麼令人頭疼的路線。 這開闢了更多的可能性,並且該塊可能對它更好。

但是,我想指出,對於那些需要在其內容中使用適當水平線的人來說,這個塊並不理想。


元素用於標記主題中斷。 在這些情況下,最好堅持核心分離器塊。

在分隔線是設計元素而不是內容中斷的情況下,請瘋狂。 圖標分隔符塊有很多選項。

來源

相關文章