WebMan Design Launches Abs, Additional Styles for Native WordPress Blocks

WebMan Design owner Oliver Juhas released the first version of the Abs – Additional block styles plugin on Monday. Unlike many block-related extensions, it does not offer any blocks of its own. Instead, it registers custom styles to enhance those packaged with core WordPress.

In total, the plugin adds 18 styles. Some are specific to a single block, such as Accessibility Hidden, which creates invisible Headings, making them available to screen readers. Others, such as the Drop Shadow style, are registered for multiple blocks.

On the whole, it is a well-rounded set that often leans into more practical use cases. The Overlap Above and Overlap Below styles fit into this scenario. The former allows users to bump Image, Cover, and other blocks up, overlapping the section above them. The latter goes in the opposite direction.

WordPress post editor with an image block that is shifted above a block with a blue background.
Image overlapping section above it.

The downside to such overlaps is that the user cannot control how far up or down the block shifts. Negative vertical margin controls are a sought-after feature in WordPress, often necessary to create specialized layouts.

Juhas provided a --abs_overlap_value CSS custom property. DIY users could control this via CSS. At the very least, theme authors could integrate directly with the plugin. However, they may simply want to register the styles for their own themes if going through all the trouble.

While the plugin styles may be practical in many ways, Juhas also threw a bit of whimsy in the mix. Almost as a signature, nearly every similar plugin offers at least one SVG mask for image-related blocks. Abs follows the same path with its Paint Brush style:

Photo of paint cans with an cutout outline in the shape of brush strokes.
Paint Brush style applied to an image.

That is the only such SVG mask in the plugin, a style that has almost been overdone. At least the Paint Brush option breaks from the mold of “blob shapes” that have become commonplace.

Juhas has several example screenshots and GIFs on the plugin page that explore what the plugin is capable of, many of them mixing and matching different blocks and styles. It is unlikely that I will do it justice here. However, I did try my hand at several layouts.

One of my favorite creations was mixing the Wavy style for the Media & Text block with Zigzag for Separator:

Media & Text block in WordPress editor. Image is on the left with a wavy border on the right.  On the right of the image is some demo text, with separators in a zigzag pattern.
Wavy style for Media & Text with mix of Zigzag Separator blocks.

Abs also includes a Double Line option for the Separator block. But, the plugin shines the most with Media & Text. I can only assume that Juhas looked at it and realized that not enough designers were doing anything interesting with it, taking the responsibility upon himself. That is merely a guess, anyway.

The plugin adds a Paint Brush style for Media & Text as it does for other image-type blocks. It also has a Media on Top option for stacking the block’s contents on both desktop and mobile displays and a similar stacking option for tablets. It supports both the previously-mentioned overlapping styles. Plus, users can get some mileage from its Gradient variation, as shown in the following screenshot:

Purple image of the inside of a gaming computer in the Media & Text block inside of the WordPress post editor. On the right, a purple background fades into the image, overlapping it slightly.
Gradient style used for the Media & Text block.

I am merely scratching the surface of possibilities with the plugin’s out-of-the-box styles. With time and creativity, users can create some unique layouts with it.

I tested Abs against several block-based themes, and it held up well. The only issues I ran into were likely related to running the latest Gutenberg plugin. After selecting a custom color when using the Zigzag style for the Separator block, the background color overtakes the shape. And, the alignment styles for the Column block do not align left or right in the editor. However, they do work on the front end.

I am a fan of plugins that offer custom styles, and Abs is a welcome departure from the carousel of block libraries. It has just enough variety to please those looking for business-friendly design options while not neglecting users who just want to have a little fun.

4 responses to “WebMan Design Launches Abs, Additional Styles for Native WordPress Blocks”

  1. Great innitiative!
    Suggestion: to be able to add CSS to each custom style, per blocks, inside global styles.

  2. The paintbrush style of images looks really cool. I used to have a firedancing blog on Facebook and I could imagine having this style of photo “frame” for the fire-related pics from my shows. It looks almost the same as the whirlwind that is formed when spinning a firestaff.

  3. Thank you for a helpful test and review of the plugin, Justin!

    With this plugin I wanted to provide some additional block styles for all users regardless the theme they use. Many of the block styles were created from necessity (for various common use cases I often experience) as block editor does not provide options to recreate such styles at the moment.

    You are correct about Media & Text block :) Some time ago I realized the block is perfect for presenting services or features as it neatly encapsulates everything into one container, but it was missing the “Media on top” style. Starting with that style it was just a matter of inspiration to continue then.

    Thanks for pointing out the Gutenberg plugin related issues – I will have a look at them in next Additional Block Styles plugin update.

Leave a Reply

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Newsletter

Subscribe Via Email

Enter your email address to subscribe to this blog and receive notifications of new posts by email.

%d bloggers like this: