# 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.

- Type: PHP
- Runs: Run everywhere
- Category: [Block Editor](https://wpide.com/library/category/gutenberg/)
- Tags: block-styles, lists, design
- Author: WPIDE Team
- Installs: 0
- Updated: 2026-10-28
- Page: https://wpide.com/library/block-styles-lists/

## Code

```php
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 use it

Install the free WPIDE plugin (https://wordpress.org/plugins/wpide/), find "List Block Styles: Arrows and Numbered Steps" in its snippet library and add it in one click; or create a new PHP snippet in WPIDE (or any code snippets plugin) and paste the code above. More snippets: https://wpide.com/library/