Separator Block Styles: Gradient and Ornament
Adds a fading gradient line and a centered ornament (✦) style to the Separator block, for more elegant breaks between sections.
Opens WPIDE on
Code
add_action( 'init', function () {
register_block_style( 'core/separator', array(
'name' => 'wpide-gradient',
'label' => 'Gradient',
'inline_style' => '.wp-block-separator.is-style-wpide-gradient{border:0;height:2px;background:linear-gradient(90deg,transparent,currentColor,transparent);opacity:.5;}',
) );
register_block_style( 'core/separator', array(
'name' => 'wpide-ornament',
'label' => 'Ornament',
'inline_style' => '.wp-block-separator.is-style-wpide-ornament{border:0;height:auto;background:none!important;text-align:center;overflow:visible;opacity:.6;}.wp-block-separator.is-style-wpide-ornament::before{content:"\2726 \2726 \2726";letter-spacing:.5em;font-size:1rem;}',
) );
} );Notes
Change the ornament character in the CSS content value.
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.