# Paragraph Block Styles: Tip, Note and Warning Callouts

> Adds three callout styles to the Paragraph block (tip, note and warning) with a colored side border and label, for documentation and tutorials.

- Type: PHP
- Runs: Run everywhere
- Category: [Block Editor](https://wpide.com/library/category/gutenberg/)
- Tags: block-styles, callouts, paragraph
- Author: WPIDE Team
- Installs: 0
- Updated: 2026-10-28
- Page: https://wpide.com/library/block-styles-paragraph-callouts/

## Code

```php
// Style name => label, heading text, color.
$wpide_callouts = array(
    'wpide-tip'     => array( 'Tip callout', 'Tip', '#00a32a' ),
    'wpide-note'    => array( 'Note callout', 'Note', '#2271b1' ),
    'wpide-warning' => array( 'Warning callout', 'Warning', '#d63638' ),
);

add_action( 'init', function () use ( $wpide_callouts ) {
    foreach ( $wpide_callouts as $name => $callout ) {
        $color = sanitize_hex_color( $callout[2] );
        $label = str_replace( array( '\\', '"' ), '', $callout[1] );

        register_block_style( 'core/paragraph', array(
            'name'         => $name,
            'label'        => $callout[0],
            'inline_style' => "p.is-style-{$name}{border-left:4px solid {$color};background:color-mix(in srgb,{$color} 8%,transparent);padding:.9em 1.1em;border-radius:4px;}p.is-style-{$name}::before{content:\"{$label}\";display:block;font-weight:700;font-size:.85em;text-transform:uppercase;letter-spacing:.06em;color:{$color};margin-bottom:.2em;}",
        ) );
    }
} );
```

## Notes

Edit the label text or colors in the $wpide_callouts array.

## How to use it

Install the free WPIDE plugin (https://wordpress.org/plugins/wpide/), find "Paragraph Block Styles: Tip, Note and Warning Callouts" 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/