Heading Block Styles: Eyebrow and Accent Underline
Adds two style options to the Heading block: a small uppercase "eyebrow" label for section kickers, and a heading with a short accent line underneath.
Opens WPIDE on
Code
add_action( 'init', function () {
register_block_style( 'core/heading', array(
'name' => 'wpide-eyebrow',
'label' => 'Eyebrow',
'inline_style' => '.wp-block-heading.is-style-wpide-eyebrow{font-size:.8rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;opacity:.8;margin-bottom:.5em;}',
) );
register_block_style( 'core/heading', array(
'name' => 'wpide-accent-line',
'label' => 'Accent line',
'inline_style' => '.wp-block-heading.is-style-wpide-accent-line::after{content:"";display:block;width:3rem;height:4px;margin-top:.4em;border-radius:2px;background:currentColor;opacity:.6;}.wp-block-heading.is-style-wpide-accent-line.has-text-align-center::after{margin-left:auto;margin-right:auto;}.wp-block-heading.is-style-wpide-accent-line.has-text-align-right::after{margin-left:auto;}',
) );
} );Notes
Pick them in the block sidebar under Styles. The accent color follows currentColor, so it matches the text color you choose.
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.