List Block Styles: Arrows and Numbered Steps
Adds an "Arrows" style for bullet lists and a "Steps" style that turns numbered lists into large numbered circles, for features and how-to instructions.
Opens WPIDE on
Code
add_action( 'init', function () {
register_block_style( 'core/list', array(
'name' => 'wpide-arrows',
'label' => 'Arrows',
'inline_style' => '.wp-block-list.is-style-wpide-arrows{list-style:none;padding-left:0;}.wp-block-list.is-style-wpide-arrows li{padding-left:1.6em;position:relative;}.wp-block-list.is-style-wpide-arrows li::before{content:"\2192";position:absolute;left:0;font-weight:700;}',
) );
register_block_style( 'core/list', array(
'name' => 'wpide-steps',
'label' => 'Steps',
'inline_style' => '.wp-block-list.is-style-wpide-steps{list-style:none;padding-left:0;counter-reset:wpide-step;}.wp-block-list.is-style-wpide-steps>li{counter-increment:wpide-step;position:relative;padding-left:3em;min-height:2.2em;margin-bottom:1em;}.wp-block-list.is-style-wpide-steps>li::before{content:counter(wpide-step);position:absolute;left:0;top:-.1em;width:2.2em;height:2.2em;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;border:2px solid currentColor;}',
) );
} );Notes
Use "Steps" on a numbered list (ordered list) for the counters to make sense.
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.