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 是从块库的轮播中受欢迎的离开。 它有足够的多样性来取悦那些寻求商业友好型设计选项的人,同时又不会忽视只想找点乐子的用户。

资源

相关文章