threadi

<p>Extends the list block in Block Editor with options for numbered ordered lists such as 1.1, 1.2, 1.3, 2.1 etc.! Use individual numbers up to the 4th level. Also reversed lists (2.2, 2.1, 1.3, 1.2, 1.1 etc.), additional list-styles (like upper- and lowercase roman and alphabet) and custom icons (with Bootstrap, Dashicons or Fontawesome) are supported.</p>
<h3>Usage</h3>
<ol>
<li>Open a page where you want to use nested ordered lists.</li>
<li>Add a normal list block.</li>
<li>Choose ordered list to be able to use its list-style.</li>
<li>Check “Use nested ordered lists” on the right to enable them.</li>
</ol>
<h3>Repository and documentation</h3>
<p>You find some documentations <a href="https://github.com/threadi/nested-ordered-lists-block-editor/tree/master/docs" rel="nofollow ugc">here</a>.</p>
<p>The development repository is on <a href="https://github.com/threadi/nested-ordered-lists-block-editor/" rel="nofollow ugc">GitHub</a>.</p>


Nested Ordered Lists for Block Editor

Extends the list block in Block Editor with options for numbered ordered lists such as 1.1, 1.2, 1.3, 2.1 etc.!

Andy Feliciotti

<p>Easily keep your listicles with numbered lists updated correctly by using this plugin’s shortcode [auto-list-number]. This will display the number 1 and increment with ever use. Perfect if you write blog posts with steps or “top 10 lists”. This will allow you to easily add items to your lists or move elements around without worrying about updating headings with the correct numbers.</p>
<h4>Shortcode Usage examples</h4>
<p>Basic usage</p>
<pre><code>[auto-list-number] Item one.
[auto-list-number] Item two.
[auto-list-number] Item three.
</code></pre>
<p>Countdown example (for “Top 10” style lists)</p>
<pre><code>[auto-list-number display="countdown"] Best item (displays 3)
[auto-list-number display="countdown"] Second best (displays 2)
[auto-list-number display="countdown"] Third best (displays 1)
</code></pre>
<p>Position display example</p>
<pre><code>[auto-list-number display="position"] First item (displays "1 of 3")
[auto-list-number display="position"] Second item (displays "2 of 3")
[auto-list-number display="position"] Third item (displays "3 of 3")
</code></pre>
<p>Custom start number (for multi-part articles)</p>
<pre><code>[auto-list-number start="11"] This displays 11
[auto-list-number] This displays 12
[auto-list-number] This displays 13
</code></pre>
<p>Number formats</p>
<pre><code>[auto-list-number format="roman"] Displays I, II, III, IV...
[auto-list-number format="alpha"] Displays A, B, C, D...
[auto-list-number format="padded"] Displays 01, 02, 03...
</code></pre>
<p>Before and after text</p>
<pre><code>[auto-list-number before="#" after=":"] Displays "#1:"
[auto-list-number before="Step_" after="_-"] Displays "Step 2 -"
</code></pre>
<p>Note: Use underscore (_) for spaces in before/after attributes since WordPress trims spaces.</p>
<p>Extended example using all shortcode functions.</p>
<pre><code>Here is my list of [auto-list-number display="total"] items.

[auto-list-number] Here is the first item in the list.
[auto-list-number] Make long listicles with ease.
[auto-list-number] You can even have multiple lists in one article.
 [auto-list-number name="my-new-list" after=":" wrapper="span"] My new list (this will start at number one).
 [auto-list-number name="my-new-list" after=":" wrapper="span"] This will be a second item.
[auto-list-number] This item will be number 4.
</code></pre>
<h4>Shortcode Options</h4>
<ul>
<li><strong>name</strong> (Default: “default”) If your article has multiple lists this will keep track of multiple numbers. If a name isn’t set it will just use the list name of “default”. But if you have multiple numbered lists you want to keep track of you can use a unique name for each list in your article.</li>
<li><strong>wrapper</strong> (Default: null) Great if you want to wrap each number with a span, div or any html tag. By default the wrapper will include the class “auto-list-number”. This can be helpful if you want to style list numbers separately from your headings.</li>
<li><strong>before</strong> (Default: “”) Text to display before the number. Great for prefixes like “#” or “Step_” (use underscore for spaces, e.g., before=”Step_” displays “Step 1”).</li>
<li><strong>after</strong> (Default: “.”) After a number is displayed a period will be displayed by default. This option is great if you want to change this to a colon or remove it all together. Use underscore for spaces (e.g., after=”_-” displays ” -“).</li>
<li><strong>start</strong> (Default: 1) Set a custom starting number. Perfect for multi-part articles where Part 2 should start at number 11 instead of 1.</li>
<li><strong>format</strong> (Default: null) Change the number format. Options:
<ul>
<li>“roman” – Roman numerals (I, II, III, IV, V…)</li>
<li>“alpha” – Alphabetic letters (A, B, C, D… Z, AA, AB…)</li>
<li>“padded” – Zero-padded numbers (01, 02, 03…)</li>
</ul>
</li>
<li><strong>display</strong> (Default: “increase”) Controls how the number is displayed. Options:
<ul>
<li>“increase” – Default behavior, counts up (1, 2, 3…)</li>
<li>“countdown” – Counts down from total (10, 9, 8…) – perfect for “Top 10” style lists</li>
<li>“total” – Displays the total count of items</li>
<li>“position” – Displays “X of Y” format (e.g., “3 of 10”)</li>
</ul>
</li>
</ul>
<h4>Troubleshooting</h4>
<p>If you are having trouble with a table of contents plugin you can use the [auto-list-number-force-reset] shortcode to reset your post’s numbers. So ideally if your table of contents was at the top of your post you can put [auto-list-number-force-reset] below it so that all headings are reset to start at 1 again. This way the ToC plugin will loop through 1-4 for example then reset then the headlines can display 1-4 again.</p>


AutoListicle: Automatically Update Numbered List Articles

Automatically keep your numbered lists in articles displaying the correct number by using this shortcode [auto-list-number].

Nested Ordered Lists for Block Editor vs AutoListicle: Automatically Update Numbered List Articles