Title: Abs &#8211; Additional block styles
Author: WebMan Design | Oliver Juhas
Published: <strong>30 Maret 2022</strong>
Last modified: 13 Maret 2026

---

Cari plugin

![](https://ps.w.org/additional-block-styles/assets/banner-772x250.jpg?rev=2701784)

![](https://ps.w.org/additional-block-styles/assets/icon.svg?rev=2701784)

# Abs – Additional block styles

 Oleh [WebMan Design | Oliver Juhas](https://profiles.wordpress.org/webmandesign/)

[Unduh](https://downloads.wordpress.org/plugin/additional-block-styles.1.8.2.zip)

 * [Detail](https://id.wordpress.org/plugins/additional-block-styles/#description)
 * [Ulasan](https://id.wordpress.org/plugins/additional-block-styles/#reviews)
 *  [Instalasi](https://id.wordpress.org/plugins/additional-block-styles/#installation)
 * [Pengembangan](https://id.wordpress.org/plugins/additional-block-styles/#developers)

 [Bantuan](https://wordpress.org/support/plugin/additional-block-styles/)

## Deskripsi

Provides new additional creative styles for your WordPress website native blocks
in editor (Gutenberg). Simply activate the plugin and use newly available block 
styles (see “Frequently Asked Questions” for more info).

#### List of included block styles:

**Portfolio gallery**
 Display caption of gallery images below the image to create
a portfolio-like appearance.

**Enhanced Media & Text**
 Enable creative transition between media and text containers.
Also, display the media on top for easy feature or service display.

**Image effects**
 Give your Image and Media & Text blocks interesting, unique look
with brushstroke, flower, blob or oval shape.

**Overlap blocks**
 Overlap various (container) blocks over content above or below.
Or pull them left and right.

**Modern quotes**
 A modern bubble style is provided for Quote block.

**List items**
 Separate list items and latest posts with a border. Or display lists
inline.

**Remove gaps**
 You can remove gaps between columns or gallery images. Also, a 
useful style to remove vertical gap from various blocks is provided.

**Column alignment**
 Use this style with singular column which is not 100% wide.
You can then align the column in columns container using these styles.

**Shadows**
 Make various blocks stand out applying a drop shadow style. Or push
the Cover block background further to the back with inner shadow.

**Responsive styles**
 Hide a column, or stack columns and Media & Text on tablet
screens (in portrait orientation).

**Separator styles**
 New double line and zigzag separator styles are provided.

**Edge sapes**
 Apply wavy top and bottom edge for multiple blocks (props to [CoBlocks plugin](https://wordpress.org/plugins/coblocks/)
for inspiration).

**Accessibility related styles**
 You can hide headings accessibly. They will still
be accessible for assistive technology such as screen reader, but visually they’ll
be hidden.

#### Got a suggestion?

If you have a suggestion for a new block style, please share it here in [support section](https://wordpress.org/support/plugin/additional-block-styles/)
or in [GitHub repository issues](https://github.com/webmandesign/additional-block-styles/issues).

## Tangkapan Layar

 * [[
 * Preview of “Wavy” Media & Text and right aligned column
 * [[
 * Gallery with “Caption below” style and “Modern bubble” quote
 * [[
 * Paint brushed image, list with line separator, overlapping content below and 
   inner shadow styles preview
 * [[
 * Media & Text with “Media on top” style, ideal for presenting features or services,
   and zigzag separator style
 * [[
 * Preview of Image block styles
 * [[
 * Preview of Column block styles
 * [[
 * Preview of Gallery block styles
 * [[
 * Creating services list with Media & Text block and “Media on top” block styles
 * [[
 * Preview of List block styles
 * [[
 * Preview of Media & Text block styles and overlapping styles
 * [[
 * Preview of Quote block styles
 * [[
 * Preview of “No vertical gap” and “Inner shadow” styles
 * [[
 * Preview of Separator block styles
 * [[
 * Horizontally pulled middle column and oval image style preview
 * [[
 * Flower, blob and oval image style within curved group block
 * [[
 * Wavy edges block
 * [[
 * “Raster” Media & Text style

## Instalasi

 1. Unzip the plugin download file and upload `additional-block-styles` folder into
    the `/wp-content/plugins/` directory.
 2. Activate the plugin through the _“Plugins”_ menu in WordPress.
 3. Plugin works immediately after activation by adding additional block styles into
    your WordPress block editor. And you can customize plugin options on **Settings
    Abs** screen.

## Tanya Jawab

### I have a suggestion!

If you have a suggestion for a new block style, please share it here in [support section](https://wordpress.org/support/plugin/additional-block-styles/)
or in [GitHub repository issues](https://github.com/webmandesign/additional-block-styles/issues).

### How does it work?

Once you enable the plugin, it will do its magic automatically. The plugin adds 
new block styles for WordPress native blocks in editor (Gutenberg).

With block styles you can change block appearance with one click. Simply choose 
your preferred style from block options in sidebar on the page/post edit screen 
and you are done.

 [Video tutorial about how to use block styles](https://vimeo.com/517486265).

### Are there any plugin options?

Yes, you can set several of plugin’s style properties and choose which block styles
to enable on the **Settings  Abs** screen.

### How to change shadow intensity?

You can set shadow properties in **Settings  Abs  Shadows** screen section.

### How to change overlap size?

You can set overlap size in **Settings  Abs  Overlapping** screen section.

### How to disable certain block styles?

You can toggle block styles in **Settings  Abs  Toggle block styles** screen section.

### Are there any custom blocks?

No. This plugin only registers new block styles, which means it only provides CSS
code to style blocks differently. There is no custom block included in this plugin.

### Are there any custom enhancements to blocks?

No. Just new block styles.

### Can I modify plugin CSS variables via `theme.json` file?

Yes. You can set `settings.custom.abs` object in your theme’s `theme.json` file,
such as follows:

    ```
    "settings": {
        "custom": {
            "abs": {
                "overlap-value": "100px",
                "overlap-inline-value": "min(10vw, 100px)",
                "overlap-gradient-value": "100px",
                "shadow-blur": "1em",
                "shadow-opacity": ".15",
                "pull": "calc( -1 * var(--wp--custom--abs--overlap-value) )",
                "drop-shadow": "0 calc(var(--wp--custom--abs--shadow-blur) / 10) var(--wp--custom--abs--shadow-blur) rgba(0,0,0, var(--wp--custom--abs--shadow-opacity))",
                "inner-shadow": "inset 0 calc(1.5 * var(--wp--custom--abs--shadow-blur) / 10) calc(1.5 * var(--wp--custom--abs--shadow-blur)) rgba(0,0,0, calc(1.33 * var(--wp--custom--abs--shadow-opacity)) )"
            }
        }
    }
    ```

## Ulasan

![](https://secure.gravatar.com/avatar/bd32ec9cd108d4da374f25e02a072568ef20be167ffcc318d2ca620be1435ec0?
s=60&d=retro&r=g)

### 󠀁[Perfect for Enhancing Gutenberg Block Styles!](https://wordpress.org/support/topic/perfect-for-enhancing-gutenberg-block-styles/)󠁿

 [apollosk](https://profiles.wordpress.org/apollosk/) 29 Oktober 2024 1 balasan

I’ve been using Additional Block Styles for a few weeks, and it’s a game-changer!
This plugin adds so many creative styling options to Gutenberg blocks, making it
easy to give my site a fresh, custom look without needing extra CSS. The options
are straightforward, and the styles integrate seamlessly with existing blocks. Highly
recommend for anyone looking to take their WordPress design up a notch!

![](https://secure.gravatar.com/avatar/cb9358ffd8587c3498800d9c404ab24e3f8cf81596d7038125e10a65c76226de?
s=60&d=retro&r=g)

### 󠀁[Block style extension as it should be](https://wordpress.org/support/topic/block-style-extension-as-it-should-be/)󠁿

 [Bjarne Oldrup](https://profiles.wordpress.org/oldrup/) 1 Juni 2024 3 balasan

I meant to test Abs for quite some time now, as it cleverly extends the possible
styles of the core blocks, not adding a gazillion extra “advanced heading” blocks
etc. to your already bloated block inserter. Abs adds a class to the blocks meaning,
you can actually disable the Abs plugin entirely, and your content will still render,
just with normal core styles. You won’t even get the dreaded “This block contains
unexpected or invalid content.” This approach makes Abs very robust, in the way 
that should you ever encounter a problem with the Abs styling, you just disable 
that feature in the Abs settings panel, and core WordPress styling will be used.
No lock in. No dependencies. Tested with WP 6.5, PHP 8.3, the W3C HTML Validator
and WebAIM Wave. No issues found. Definitely give Abs a try. I might not do as much
as some block plugins, but what it does, it does extremely well.

 [ Baca semua 2 ulasan ](https://wordpress.org/support/plugin/additional-block-styles/reviews/)

## Kontributor & Pengembang

“Abs – Additional block styles” adalah perangkat lunak open source. Berikut ini 
mereka yang sudah berkontribusi pada plugin ini.

Kontributor

 *   [ WebMan Design | Oliver Juhas ](https://profiles.wordpress.org/webmandesign/)

“Abs – Additional block styles” telah diterjemahkan dalam 5 bahasa. Terima kasih
kepada [para penerjemah](https://translate.wordpress.org/projects/wp-plugins/additional-block-styles/contributors)
untuk kontribusi-nya.

[Terjemahkan “Abs – Additional block styles” dalam bahasa Anda.](https://translate.wordpress.org/projects/wp-plugins/additional-block-styles)

### Tertarik mengembangkan?

[Lihat kode](https://plugins.trac.wordpress.org/browser/additional-block-styles/),
periksa [repositori SVN ](https://plugins.svn.wordpress.org/additional-block-styles/),
atau mendaftar ke [log pengembangan](https://plugins.trac.wordpress.org/log/additional-block-styles/)
melalui [RSS](https://plugins.trac.wordpress.org/log/additional-block-styles/?limit=100&mode=stop_on_copy&format=rss).

## Log Perubahan

Please see the [`changelog.md` file](https://github.com/webmandesign/additional-block-styles/blob/master/changelog.md)
for details.

## Meta

 *  Versi **1.8.2**
 *  Diperbarui **1 bulan yang lalu**
 *  Instalasi Aktif **400+**
 *  Versi WordPress ** 6.7 atau yang terbaru **
 *  Diuji hingga **7.0**
 *  Versi PHP ** 8.0 atau yang terbaru **
 *  Bahasa
 * [English (US)](https://wordpress.org/plugins/additional-block-styles/), [Slovak](https://sk.wordpress.org/plugins/additional-block-styles/),
   [Spanish (Colombia)](https://es-co.wordpress.org/plugins/additional-block-styles/),
   [Spanish (Ecuador)](https://es-ec.wordpress.org/plugins/additional-block-styles/),
   [Spanish (Spain)](https://es.wordpress.org/plugins/additional-block-styles/),
   dan [Spanish (Venezuela)](https://ve.wordpress.org/plugins/additional-block-styles/).
 *  [Terjemahkan dalam bahasa Anda](https://translate.wordpress.org/projects/wp-plugins/additional-block-styles)
 * Tag
 * [block style](https://id.wordpress.org/plugins/tags/block-style/)[block-editor](https://id.wordpress.org/plugins/tags/block-editor/)
   [blocks](https://id.wordpress.org/plugins/tags/blocks/)
 *  [Tampilan lanjut](https://id.wordpress.org/plugins/additional-block-styles/advanced/)

## Rating

 5 dari 5 bintang.

 *  [  2 5-star reviews     ](https://wordpress.org/support/plugin/additional-block-styles/reviews/?filter=5)
 *  [  0 4-star reviews     ](https://wordpress.org/support/plugin/additional-block-styles/reviews/?filter=4)
 *  [  0 3-star reviews     ](https://wordpress.org/support/plugin/additional-block-styles/reviews/?filter=3)
 *  [  0 2-star reviews     ](https://wordpress.org/support/plugin/additional-block-styles/reviews/?filter=2)
 *  [  0 1-star reviews     ](https://wordpress.org/support/plugin/additional-block-styles/reviews/?filter=1)

[Your review](https://wordpress.org/support/plugin/additional-block-styles/reviews/#new-post)

[Lihat semua ulasan](https://wordpress.org/support/plugin/additional-block-styles/reviews/)

## Kontributor

 *   [ WebMan Design | Oliver Juhas ](https://profiles.wordpress.org/webmandesign/)

## Bantuan

Ada yang ingin dikatakan? Butuh bantuan?

 [Lihat forum bantuan](https://wordpress.org/support/plugin/additional-block-styles/)

## Donasi

Apakah Anda ingin mendukung pengembangan plugin ini?

 [ Donasi untuk plugin ini ](https://www.webmandesign.eu/contact/#donation)