Block Variations: Notice Box and Card
Adds "Notice box" and "Card" to the inserter as ready-made Group block variations with starter content, so editors insert consistent components in one click.
Opens WPIDE on
Code
add_filter( 'get_block_type_variations', function ( $variations, $block_type ) {
if ( 'core/group' !== $block_type->name ) {
return $variations;
}
$variations[] = array(
'name' => 'wpide-notice',
'title' => 'Notice box',
'description' => 'A highlighted box for important information.',
'scope' => array( 'inserter' ),
'icon' => 'info',
'attributes' => array( 'className' => 'wpide-notice', 'layout' => array( 'type' => 'constrained' ) ),
'innerBlocks' => array(
array( 'core/paragraph', array( 'content' => '<strong>Note:</strong> add your message here.' ) ),
),
);
$variations[] = array(
'name' => 'wpide-card',
'title' => 'Card',
'description' => 'Heading, short text and a button.',
'scope' => array( 'inserter' ),
'icon' => 'id-alt',
'attributes' => array( 'className' => 'wpide-card', 'layout' => array( 'type' => 'constrained' ) ),
'innerBlocks' => array(
array( 'core/heading', array( 'level' => 3, 'content' => 'Card title' ) ),
array( 'core/paragraph', array( 'content' => 'One or two sentences about this item.' ) ),
array( 'core/buttons', array(), array( array( 'core/button', array( 'text' => 'Learn more' ) ) ) ),
),
);
return $variations;
}, 10, 2 );
add_action( 'wp_enqueue_scripts', function () {
wp_register_style( 'wpide-group-variations', false, array(), '1.0' );
wp_enqueue_style( 'wpide-group-variations' );
wp_add_inline_style( 'wpide-group-variations', '.wpide-notice{border-left:4px solid #2271b1;background:rgba(34,113,177,.07);padding:1em 1.25em;border-radius:4px;}.wpide-card{padding:1.5em;border-radius:10px;box-shadow:0 2px 12px rgba(0,0,0,.08);}' );
} );Notes
Uses the class names wpide-notice and wpide-card; style them in your theme or with a CSS snippet. Needs WordPress 6.5+.
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.