Multiple bundled themes ignore/override ordered list types

[Greg Raven]

If you set up an ordered list in Twenty Sixteen or Twenty Seventeen, and then try to add a type to it, WordPress ignores the type. You can get only a numbered list.

[subrataemfluence]

Can you please explain the steps for reproduction?

Is it like adding an ordered list via content editor and then applying a list-type via CSS?

If yes, please let us know about the following:

1. WordPress version
2. Content editor you are using (Classic or Gutenberg, since the latter is already available)
3. If Gutenberg, please confirm whether the same is happening with the classic editor as well
4. Testing WordPress core and bundled themes recommends that no additional plugins activated except bundled ones like Akismet and Hello Dolly. Please make sure you are testing on a fresh WordPress installation with twentysixteen or twentyseventeen activated.

Thanks!

[Greg Raven]

1) Either apply list styling to existing text, or import an HTML list.

2) Go into the Text view tab in the post editor page.

3) Manually type in a list type, e.g. <ol type="a">

I'm using WordPress 4.9.8 in Classic mode. This is a fresh install, using the Twenty Sixteen theme.

[sabernhardt]

To customize the list styling, it is usually better to use CSS than the type attribute:
<ol style="list-style-type: lower-alpha;">

​TinyMCE Advanced is one plugin that can help add those styles to each new list, using the Visual editor.

Though there is no editor support in WordPress core to set the type attribute, it may be worth adding theme support for when lists have that attribute. ​MDN mentions the case of assigning the type to lists in a legal or technical document, where the type conveys a specific meaning for reference.

Twenty Sixteen and Twenty Seventeen both set the style for ordered lists to decimal, even when they are nested (Twenty Twenty is one theme that styles nested ordered lists with letters and/or Roman numerals). If that rule is simply removed, then the styling would use the browser default, which is typically decimal anyway for English browsers. And default styling would honor the type. Another, probably less advisable, option to support it would be using ol:not([type]).

[sabernhardt]

#57920 was marked as a duplicate.

[sabernhardt]

In #57920, @zoonini notes that almost all of the 'classic' bundled themes (up to Twenty Twenty-One) have list style overrides for ordered lists. This was a clear design decision, good or bad, so any ordered lists that do not have the type attribute should continue to have the same style as the theme always gave.

Raising the specificity with ol:not([type]) could cause other issues. Using ol:where(:not([type])) might fit well for this situation in browsers that WordPress officially supports, though old browsers that have trouble with :where() might then show their default list type where it should be none (from the CSS reset). Adding a style for ol[type] only worked with revert-layer for me, and that has ​very low browser support.

The ephemera widgets (in Twenty Eleven and Twenty Fourteen) might be best to leave as the square style.

[shawfactor]

As I commented on the other thread this should be fixed with priority as overriding key HTML functionality is bad

Imo best not to worry about older browsers, plenty of other key WordPress functionality does not work in non supported browsers anyway

Trac ticket: 44777

Css is given for unorder list type in bundle themes style.css except Twenty Twenty Three

[sabernhardt]

My logic was flawed regarding the CSS reset. When the reset defines the ol style as none, the theme overrides that later in the cascade with the same selector (and/or one with a higher specificity). Using ol:where(:not([type])) is probably fine.

[audrasjb]

Given the patch still needs testing and as we're very close to WP 6.3 beta 1 release date, let's move this to milestone 6.4.

[wasiur195]

Can anyone provide the proper steps to replicate this issue? Like- video evidence or screenshots.

[oglekler]

@sabernhardt what is the next step? Am I right that we need to try what you have suggested in comment:11? I am also wondering if we can try it for one theme and if it will be working correctly only them to make it for all themes.

[sabernhardt]

Starting a patch with ol:where(:not([type])) for only one theme (at first) sounds good.

Some instructions to reproduce the incorrect style are in comment:3, but the block editor could require more information.

1. Activate Twenty Twenty-One (or any earlier bundled theme except for Twenty Thirteen).
2. Go to the post editor.
3. If using the block editor, create a Classic block. (If you have a special block from a plugin that allows the type, you could use that, but the standard List block considers the type attribute unexpected.)
4. Add an ordered list within the Classic block.
5. If you are not already in the Code view, switch to that. You could select either "Code editor" from the 3-dot Options menu near the Publish button or "Edit as HTML" from the block's Options.
6. In the ol tag, add a non-numeric type, such as <ol type="a"> for lowercase letters.
7. Switch to the visual mode ("Exit code editor" or "Edit visually"). The list continues to use the decimal numbering style, regardless of the type.
8. Save the post and view it on the front end. This also has the decimal numbering style.

[karmatosed]

I am going to try and dig into testing this to see what we can do about shipping. It looks to me like we both need testing and then an iterated patch is that correct?