Allow ordered lists to be given a start value

[cwpnolen]

Is your feature request related to a problem? Please describe.
When creating an ordered list with accompanying imagery I am forced to manually add a start attribute to the <ol> tag

Describe the solution you'd like
Under the block settings, it would be helpful to have an option under "Advanced Settings" to define your start attribute (and potentially other common attributes) if the ordered list option has been selected within the block.

[ZebulanStanphill]

One thing to keep in mind is that you can have nested lists, so an option added to the block inspector would have to be made contextual to the current list, and also not show up in unordered lists. It is possible to do something like that, as shown by #7035.

It sounds like you are using multiple List blocks separated by Image blocks. Perhaps this is a situation that would be better resolved by the upcoming inline image support? See #2043 and #6959.

Turning the List block into a block that uses nested blocks is another option that could fix this issue. See #6394.

[danielbachhuber]

@cwpnolen Can you clarify what you mean by "add a start attribute"? A screenshot would be really helpful too.

[chrisvanpatten]

I believe it's referring to <ol>'s start attribute which allows you to start a <ol> at any point.

E.g.…

<ol start="3">
    <li>First</li>
    <li>Second</li>
    <li>Third</li>
</ol>

will output…

3. First
4. Second
5. Third

[danielbachhuber]

Ok, this is similar to #7335 #4498 and others. Essentially, where blocks don't have parity with the HTML spec.

[jekkilekki]

So, is there a way to add in the start attribute manually from the HTML editor of a block?

I've written an ordered list of things, but need to break up the list with additional explanatory text and/or images, but when I come back to add a start attribute to a consecutive <ol> block, it gives me a "This block contains unexpected or invalid content." error and won't let me click either the "Resolve" nor "Convert to HTML" buttons. Instead I have to do CTRL+Z to undo the changes and revert it to the original HTML block before I added the start attribute.

[jekkilekki]

Seems like a start attribute could be something that should be added to the "Advanced" settings of the List block.

[j0sh9]

Adding to this. It is a bug that the Ordered List tag cannot use the start attribute. I'm in the same boat as @jekkilekki where I need to add elements in a list, such as images, and the only option is to split the list.

Yes it would be nice to have nested elements, or a checkbox in the block settings, but at the very least we should be able to manually edit the HTML to add the start attribute. Right now it gives an error if you add the start attribute: "This block contains unexpeced or invalid content".

[danielbachhuber]

I've moved this into WordPress 5.0.x Follow Ups for further consideration.

[rhyous]

Wow! I write blog posts with code between numbered list. This feature isn't optional for me.

I write code blogs all the time like this:

1. First create a class

public class A
{
}

2. Add a property to that class

public class A
{
    public string Prop1 { get; set; }
}

Ok, my code isn't that basic, but still, not having a Start in your numbered list means Gutenberg wasn't ready.

See, I like to use new things. I try them. I like to move to the latest. But you released a tool so not-yet-ready it isn't possible for me to do so. The only way I can use Gutenberg is to write in straight html. Do you consider that exceptable?

[thetraininglady]

I'm in the same boat here. I write articles with step by step instructions and use screen shots after every 2nd or 3rd point, I cannot use gutenberg for this even though I really want to stay with the latest features. I'm enjoying discovering how to use each block etc but for my regular posts it is too limiting and so I've had to install Classic Editor.

[ancelmo93]

Found this CSS solution. Worked well for me.

ol {
list-style: none;
}

ol li:before {
counter-increment: mycounter;
content: counter(mycounter) ". ";
}

ol:first-of-type {
counter-reset: mycounter;
}

Just paste into "Additional CSS" in the customizer.

[LukaszJaro]

With some minor CSS adjustments, gutenberg already supports this, I call it "breaking out of a list"

1. Create your list as usual, press enter for next item.
   Press the 'indent list item' button for additional explanatory text
2. Press enter key and then press the "Outdent list item" to continue list

It's just a matter of styling the indented text by removing the bullet and any margin.

This is also fully accessible and semantically correct, no html hacks or invalid tags between the list items.

It's a matter of if this should be a separate block or should there be options in the current list block for something like this?

Note: this is simply a nested list, I have tech writers using this method with no complaints.

[gasova]

I'm in the same boat I need an ordered list but after the n+1 item needed to insert a table block then continue my ordered list starting at n+2. thus my ordered list is split in too parts and not being able to set the start attribute for ol tags in advanced options is really unbelievable !

[stefanciorici]

Do we have any news on this? Will this option be added for next versions? A simple number input for the "starts" would be enough.

[kevinvess]

Also– it would be nice to be able to select the list type under the block options sidebar.

For example: <ol type="a">

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ol#Attributes

[themightymo]

Following up on @j0sh9's comment above: It seems weird to me that it's not validating the "start" attribute when it's supported by most browsers.

It know it's never a simple fix, and I'm sorry I don't know how to fix this within Gutenberg... I appreciate all y'all do!

[prodport]

I'm in a similar boat. I do a lot of tutorials that include images. If you add an image block to illustrate a step, the numeric count starts over at 1. Apart from looking odd, it creates issues for people relying on screen readers. Think of going through Steps 1-6 and then step 7 now shows/speaks as Step 1.

Using "start" doesn't help. (except is I use a Custom HTML block)

I also run into the issue where Gutenberg then complains and wants to Resolve the issue, which often makes things worse.

If I'm editing an existing article, Gutenberg often throws in an extra set of

and
1. tags so my first step is labeled as 1, but is blank.

   My current workarounds include:

   1. Use the "How To" block in Yoast SEO. However, that poses a different set of issues
   2. Using a custom HTML block

[bostrowski]

Maybe someone will find it helpful - my "nasty" workaround with jQuery:

In theme header I've added jQuery script with on page load listener:

  <script>
    (function( $ ){
      $(document).ready( function(){
        $( 'ol[class^=startWith]' ).each(function( pIndex, pElem ){
          var 
            self = $(this),
            classes = self.attr('class').split(' '),
            temp;

          for ( var i in classes ) {
            if ( classes[i].toString().indexOf( 'startWith' ) > -1 ) {
              temp = classes[i].split('-');
              self.attr('start', temp[1]);
            }
          }
        });

      } );

    })(jQuery)
  </script>

and in list block attribute Additional CSS Class I'm adding css class startWith-X where X is value for start ol attribute.

editor:

result:

[supernovia]

Just adding a voice to say I'd love to see this fixed / enhanced in core. People should at least be able to start a list at a number, and change a list type.

[LukaszJaro]

This can be fixed by creating your own custom style for lists, example:

CSS style or custom block style:

ul ul {
list-style: none;
padding-left: 0;
Padding: 0;
margin-left: -16px;
}

WP block Editor:

Note you can do this with ordered lists as well. I think this should be closed as it is more of a theme styling question.

[gasova]

This can be fixed by creating your own custom style for lists, example:

CSS style or custom block style:

ol ol {
list-style: none;
padding-left: 0;
Padding: 0;
margin-left: -16px;
}

WP block Editor:

nope this isn't working, the issue is to define the starting number of the bullet. This is a standart w3c attribute and wp editor should support it anyways.

attribute name: start="5"

5. first item
6. second item

[rhyous]

This can be fixed by creating your own custom style for lists

You used the wrong word. This can be worked around not fixed by someone who knows css well, which 95% of the Wordpress users do not.

@LukaszJaro. Wordpress's goal is to make blogging the easiest possible for people who don't know html/css/javascript. So you want to close an issue that goes against everything Wordpress stands for? An issue where they are failing in their primary business purpose?

[ZebulanStanphill]

It should be noted that using CSS to set the start value is semantically wrong. The start value of a list is a semantic detail, and therefore should be set using HTML attributes, not CSS styling.

[LukaszJaro]

@ZebulanStanphill

It's actually very semantically correct, I did not change the HTML, I simply styled the list, I did not set the start value with CSS, I simply indented the list to create the desired workflow many technical writers use.

@rhyous

You could be right about me jumping the gun to close this issue, I just thought this falls under plugin/theme styling, I wanted to add my solution I used for numerous technical writers in which they were happy with. I hope it helps others.

[hacknug]

@LukaszJaro it is not since screen readers and others won't know about that change. To be semantically correct it should use the start attribute on the ol: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ol#Attributes

In other news, #15113 landed support for this feature so I guess this issue can be closed now (seems to be an older version of #17040). Like @ellatrix said in this comment: This will be in Gutenberg 6.4 and WordPress 5.3.

Follow-up issue for list-type support at #13888.

---

Only thing that was mentioned in this issue that's missing now would be the nested lists parts.

Since the block doesn't use InnerBlocks, we can't change the start value of any of the nested lists but I'm not sure this is an issue per se since it would be solved once we can add blocks inside list items like suggested in #6394 🤔

[ellatrix]

Only thing that was mentioned in this issue that's missing now would be the nested lists parts.

Right, it would still need to be adjusted so the control works on the selected list, not always the top parent list. I'll look into it if I find some time. Feel free to create an issue to track.

[ellatrix]

Let's close as this functionality has been added in #15113. Please create new issues for further enhancements.