WebMan Design Launches Abs, Additional Styles for Native WordPress Blocks – WP Tavern

April 1, 2022 Xploited Media

WebMan Design proprietor Oliver Juhas launched the primary model of the Abs – Additional block styles plugin on Monday. In contrast to many block-related extensions, it doesn’t provide any blocks of its personal. As a substitute, it registers customized types to boost these packaged with core WordPress.

In complete, the plugin provides 18 types. Some are particular to a single block, reminiscent of Accessibility Hidden, which creates invisible Headings, making them out there to display screen readers. Others, such because the Drop Shadow fashion, are registered for a number of blocks.

On the entire, it’s a well-rounded set that usually leans into extra sensible use instances. The Overlap Above and Overlap Under types match into this state of affairs. The previous permits customers to bump Picture, Cowl, and different blocks up, overlapping the part above them. The latter goes in the wrong way.

WordPress post editor with an image block that is shifted above a block with a blue background. — Picture overlapping part above it.

The draw back to such overlaps is that the person can’t management how far up or down the block shifts. Negative vertical margin controls are a sought-after characteristic in WordPress, typically essential to create specialised layouts.

Juhas supplied a --abs_overlap_value CSS customized property. DIY customers may management this through CSS. On the very least, theme authors may combine immediately with the plugin. Nevertheless, they could merely wish to register the types for their very own themes if going by all the difficulty.

Whereas the plugin types could also be sensible in some ways, Juhas additionally threw a bit of caprice within the combine. Nearly as a signature, practically each comparable plugin provides a minimum of one SVG masks for image-related blocks. Abs follows the identical path with its Paint Brush fashion:

Photo of paint cans with an cutout outline in the shape of brush strokes. — Paint Brush fashion utilized to a picture.

That’s the solely such SVG masks within the plugin, a mode that has nearly been overdone. A minimum of the Paint Brush choice breaks from the mould of “blob shapes” which have turn out to be commonplace.

Juhas has a number of instance screenshots and GIFs on the plugin web page that discover what the plugin is able to, lots of them mixing and matching completely different blocks and types. It’s unlikely that I’ll do it justice right here. Nevertheless, I did attempt my hand at a number of layouts.

Considered one of my favourite creations was mixing the Wavy fashion for the Media & Textual content 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 fashion for Media & Textual content with mixture of Zigzag Separator blocks.

Abs additionally features a Double Line choice for the Separator block. However, the plugin shines probably the most with Media & Textual content. I can solely assume that Juhas checked out it and realized that not sufficient designers had been doing something fascinating with it, taking the duty upon himself. That’s merely a guess, anyway.

The plugin provides a Paint Brush fashion for Media & Textual content because it does for different image-type blocks. It additionally has a Media on Prime choice for stacking the block’s contents on each desktop and cellular shows and the same stacking choice for tablets. It helps each the previously-mentioned overlapping types. Plus, customers can get some mileage from its Gradient variation, as proven within 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 fashion used for the Media & Textual content block.

I’m merely scratching the floor of potentialities with the plugin’s out-of-the-box types. With time and creativity, customers can create some distinctive layouts with it.

I examined Abs in opposition to a number of block-based themes, and it held up nicely. The one points I bumped into had been doubtless associated to working the most recent Gutenberg plugin. After choosing a customized coloration when utilizing the Zigzag fashion for the Separator block, the background coloration overtakes the form. And, the alignment types for the Column block don’t align left or proper within the editor. Nevertheless, they do work on the entrance finish.

I’m a fan of plugins that provide customized types, and Abs is a welcome departure from the carousel of block libraries. It has simply sufficient selection to please these on the lookout for business-friendly design choices whereas not neglecting customers who simply wish to have a bit enjoyable.