# Add a Custom Block Style

> Registers extra style variations for core blocks, such as an "Outline" button and a "Card" group, that editors can pick in the block sidebar.

- Type: PHP
- Runs: Run everywhere
- Category: [Developer](https://wpide.com/library/category/developer/)
- Tags: block-editor, block-styles, gutenberg, design
- Author: WPIDE Team
- Installs: 0
- Updated: 2026-10-28
- Page: https://wpide.com/library/dev-register-block-style/

## Code

```php
add_action( 'init', function () {
    // Block => array( style name, label, CSS ).
    $styles = array(
        array( 'core/button', 'wpide-outline', 'Outline (thin)', '.wp-block-button.is-style-wpide-outline .wp-block-button__link{background:transparent;color:currentColor;border:1px solid currentColor;}' ),
        array( 'core/group', 'wpide-card', 'Card', '.wp-block-group.is-style-wpide-card{padding:1.5rem;border-radius:12px;background:#fff;box-shadow:0 2px 12px rgba(0,0,0,.08);}' ),
    );

    foreach ( $styles as $style ) {
        register_block_style( $style[0], array(
            'name'         => $style[1],
            'label'        => $style[2],
            'inline_style' => $style[3],
        ) );
    }
} );
```

## Notes

Edit the CSS in $styles. Each entry adds one option under Styles in the block settings.

## How to use it

Install the free WPIDE plugin (https://wordpress.org/plugins/wpide/), find "Add a Custom Block Style" in its snippet library and add it in one click; or create a new PHP snippet in WPIDE (or any code snippets plugin) and paste the code above. More snippets: https://wpide.com/library/