嵌套和網格:超級列表塊增壓 WordPress 中的列表

自由 WordPress 開發者 Aurooba Ahmed 發布了 超級列表塊插件 今日早些時候。 從本質上講,它就像核心的 WordPress 列表塊——只是被增壓了​​。 這是她在 WordPress.org 上第一個公開發布的擴展程序。

該插件的主要用例是在列表項中添加其他塊。 但是,它的選項允許用戶通過支持基於網格的布局來進一步發展。

WordPress 目前不允許最終用戶通過編輯器將其他塊嵌套到列表項中。 它是富文本或什麼都不是,當您需要這種看似普通的功能時,它可能是編輯體驗中令人討厭的部分。 這個問題讓您想知道為什麼我們在平滑內容體驗之前轉向 FSE。 畢竟,HTML 列表項元素是其他內容的容器。

至少對我來說,這不是我經常需要的東西。 當我這樣做時,我通過自定義 HTML 塊對其進行編碼。 如果列表的內容很簡單,但當您想要嵌套更複雜的元素(如其他塊)時,這很有效。

Super List 塊將其嵌套的 Super List Item 塊變成幾乎任何東西的容器。 一個典型的用例是將多個段落或其他基於文本的塊(如標題)添加為單個列表項。

nesting-and-grids-super-list-block-supercharges-lists-in-wordpress 嵌套和網格:WordPress 中的超級列表塊增壓列表單個列表項下的標題和多個段落。

但是,該插件不限制用戶使用文本。 他們可以粘貼任何他們想要的東西,甚至可以將超級列表嵌套在超級列表項塊中。 不幸的是,在這種情況下,它的縮進被清零,因此它的項目不會出現嵌套。

該插件聲名鵲起可能是它的網格功能。 WordPress 中最接近的東西是 Columns 和 Gallery 塊。 但是,Columns 僅限於單行,Gallery 僅允許圖像。

這也是超級列表塊需要稍微改進的地方。 選擇水平(「網格」)方向時,會出現一個新框,允許用戶設置所有子列表項的最大寬度。

nesting-and-grids-super-list-block-supercharges-lists-in-wordpress-1 嵌套和網格:WordPress 中的超級列表塊增壓列表四乘四格的報價和圖像。

想創建一個四乘四的網格(兩行兩列),我立即選擇了 50%。 這是最有意義的。 但是,我沒有得到任何專欄。 該值太大,沒有考慮項目之間的裝訂線空間。 然後我降低了它,直到我達到一個有效的數字:47%。 我本可以查看頁面的源代碼並簡單地進行數學計算,但對於普通最終用戶來說,這將是一場猜謎遊戲。

更直觀的界面是將最大寬度選項切換為列號設置。 從技術上講,這將限制塊在某些情況下的靈活性。 但是,它將涵蓋絕大多數情況,即用戶只想要一個跨越其容器寬度的等寬列網格。

這假設插件最終不允許用戶在網格模式下微觀管理每個列表項。 插件的存儲庫中有一張打開的票證 添加選項 到單個超級列表項塊。

無論插件未來的發展方向是什麼,用於快速設置項目網格的易於使用的塊可能會出現在許多開發人員和站點所有者的工具箱中。

三個功能使這個插件比許多核心 WordPress 或第三方塊更易於使用。 第一種是用戶在編輯器中選擇了超級列表。 它不僅使用「+」圖標嵌套另一個塊,還附加了文本標籤「添加超級列表項」。

nesting-and-grids-super-list-block-supercharges-lists-in-wordpress-2 嵌套和網格:WordPress 中的超級列表塊增壓列表添加新的超級列表項按鈕。

單擊「+」編輯器圖標後,很容易對新塊的插入位置感到困惑。 超級列表塊的文本標籤使其非常容易理解。 我希望看到 WordPress 和其他第三方插件採用相同或類似的方法。

其他兩個不錯的功能出現在超級列表項塊的工具欄中。 第一個是用於跳回父塊的「設置」按鈕。 第二個是圓形「+」圖標,用於將另一個項目附加到列表中。

nesting-and-grids-super-list-block-supercharges-lists-in-wordpress-3 嵌套和網格:WordPress 中的超級列表塊增壓列表工具欄中的設置和附加按鈕。

在編輯器中選擇塊或按鈕時,這兩個選項似乎都減少了誤點擊。 但是,我更喜歡 WordPress 在子塊的工具欄中提供一些父塊設置的方法。 社交鏈接就是一個很好的例子,它允許用戶改變理由和對齊方式而無需來回跳轉。

總的來說,我對 Super List Block 作為第一個版本印象深刻。 我會密切關注它,看看它是如何成熟的。 非常值得在現在需要其功能的任何站點上進行部署。

來源

相關文章