Abs – Additional block styles

Hỏi đáp

I have a suggestion!

If you have a suggestion for a new block style, please share it here in support section or in GitHub repository 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.

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)) )"
        }
    }
}