WebMan Design 推出 Abs,原生 WordPress 塊的附加樣式

WebMan Design 的所有者 Oliver Juhas 發布了第一個版本的 Abs – 附加塊樣式插件 在星期一。 與許多與塊相關的擴展不同,它不提供自己的任何塊。 相反,它註冊自定義樣式以增強與核心 WordPress 打包的樣式。

該插件總共添加了 18 種樣式。 有些特定於單個塊,例如可訪問性隱藏,它創建不可見的標題,使它們可供屏幕閱讀器使用。 其他的,例如投影樣式,是為多個塊註冊的。

總體而言,它是一個全面的集合,通常傾向於更實際的用例。 上面的重疊和下面的重疊樣式適合這種情況。 前者允許用戶將圖像、封面和其他塊向上凸起,與它們上方的部分重疊。 後者走向相反的方向。

webman-design-launches-abs-additional-styles-for-native-wordpress-blocks WebMan Design 推出 Abs,原生 WordPress 塊的附加樣式它上面的圖像重疊部分。

這種重疊的缺點是用戶無法控制塊向上或向下移動多遠。 負垂直邊距控制 是 WordPress 中廣受歡迎的功能,通常是創建專門布局所必需的。

Juhas 提供了一個 –abs_overlap_value CSS 自定義屬性。 DIY 用戶可以通過 CSS 進行控制。 至少,主題作者可以直接與插件集成。 但是,如果遇到所有麻煩,他們可能只是想為自己的主題註冊樣式。

雖然插件樣式在很多方面都很實用,但 Juhas 也加入了一些奇思妙想。 幾乎作為一個簽名,幾乎每個類似的插件都為與圖像相關的塊提供了至少一個 SVG 掩碼。 Abs 的畫筆樣式遵循相同的路徑:

webman-design-launches-abs-additional-styles-for-native-wordpress-blocks-1 WebMan Design 推出 Abs,原生 WordPress 塊的附加樣式應用於圖像的畫筆樣式。

那是插件中唯一這樣的 SVG 蒙版,這種風格幾乎被過度使用了。 至少畫筆選項打破了已經變得司空見慣的「斑點形狀」的模式。

Juhas 在插件頁面上有幾個示例截圖和 GIF,探索插件的功能,其中許多混合和匹配不同的塊和樣式。 我不太可能在這裡做到公正。 但是,我確實嘗試了幾種布局。

我最喜歡的創作之一是將 Media & Text 塊的 Wavy 樣式與分隔符的 Zigzag 混合:

webman-design-launches-abs-additional-styles-for-native-wordpress-blocks-2 WebMan Design 推出 Abs,原生 WordPress 塊的附加樣式混合了鋸齒形分隔塊的媒體和文本的波浪樣式。

Abs 還包括用於分隔塊的雙線選項。 但是,該插件在媒體和文本方面最為出色。 我只能假設 Juhas 看著它並意識到沒有足夠的設計師用它來做任何有趣的事情,而是自己承擔責任。 無論如何,這只是一個猜測。

該插件為媒體和文本添加了畫筆樣式,就像它為其他圖像類型塊一樣。 它還具有頂部媒體選項,用於在桌面和移動顯示器上堆疊塊的內容,以及用於平板電腦的類似堆疊選項。 它支持前面提到的兩種重疊樣式。 另外,用戶可以從它的 Gradient 變化中獲得一些里程,如下面的截圖所示:

webman-design-launches-abs-additional-styles-for-native-wordpress-blocks-3 WebMan Design 推出 Abs,原生 WordPress 塊的附加樣式用於媒體和文本塊的漸變樣式。

我只是在使用插件的開箱即用樣式觸及可能性的表面。 隨著時間和創造力,用戶可以用它創建一些獨特的布局。

我針對幾個基於塊的主題測試了 Abs,並且效果很好。 我遇到的唯一問題可能與運行最新的 Gutenberg 插件有關。 在為分隔塊使用鋸齒形樣式時選擇自定義顏色後,背景顏色會超過形狀。 而且,Column 塊的對齊樣式在編輯器中不左對齊或右對齊。 但是,它們確實在前端工作。

我是提供自定義樣式的插件的粉絲,Abs 是從塊庫的輪播中受歡迎的離開。 它有足夠的多樣性來取悅那些尋求商業友好型設計選項的人,同時又不會忽視只想找點樂子的用戶。

資源

相關文章