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.
Opens WPIDE on
Code
// 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 add this snippet
- Install WPIDE on your WordPress site (it is free) and open Code Snippets.
- Use snippet above adds it from the library in one click. Or copy the code into a new snippet with the same code type.
- It is added inactive: review the code and settings, then switch it on.