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.
Opens WPIDE on
Code
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 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.