Extra Block Styles: Card, Pill Button, Shadow Image and Checklist
Adds four ready-made style options to the block editor: a card style for Group blocks, a pill style for buttons, a soft shadow for images and a checkmark style for lists.
Opens WPIDE on
Code
add_action( 'init', function () {
register_block_style( 'core/group', array(
'name' => 'wpide-card',
'label' => 'Card',
'inline_style' => '.wp-block-group.is-style-wpide-card{padding:1.5em;border-radius:10px;background:#fff;color:#1d2327;box-shadow:0 2px 12px rgba(0,0,0,.08);}',
) );
register_block_style( 'core/button', array(
'name' => 'wpide-pill',
'label' => 'Pill',
'inline_style' => '.wp-block-button.is-style-wpide-pill .wp-block-button__link{border-radius:999px;padding-left:1.75em;padding-right:1.75em;}',
) );
register_block_style( 'core/image', array(
'name' => 'wpide-shadow',
'label' => 'Soft shadow',
'inline_style' => '.wp-block-image.is-style-wpide-shadow img{border-radius:6px;box-shadow:0 10px 30px rgba(0,0,0,.18);}',
) );
register_block_style( 'core/list', array(
'name' => 'wpide-checklist',
'label' => 'Checklist',
'inline_style' => '.wp-block-list.is-style-wpide-checklist{list-style:none;padding-left:0;}.wp-block-list.is-style-wpide-checklist li::before{content:"\2713";margin-right:.6em;color:#00a32a;font-weight:700;}',
) );
} );Notes
Pick the styles in the block sidebar under Styles. Edit the CSS in each inline_style to match your design.
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.