Make WordPress Core

Opened 6 years ago

Last modified 6 months ago

#44777 new enhancement

Multiple bundled themes ignore/override ordered list types

Reported by: greg-raven's profile Greg Raven Owned by:
Milestone: Future Release Priority: normal
Severity: normal Version:
Component: Bundled Theme Keywords: has-testing-info needs-screenshots has-patch changes-requested
Focuses: css Cc:

Description

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.

Change History (18)

#1 @SergeyBiryukov
6 years ago

  • Component changed from General to Bundled Theme

#2 @subrataemfluence
6 years ago

  • Keywords reporter-feedback added

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!

#3 @Greg Raven
6 years ago

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.

#4 @sabernhardt
4 years ago

  • Keywords 2nd-opinion added

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]).

#5 @sabernhardt
12 months ago

#57920 was marked as a duplicate.

#6 @sabernhardt
12 months ago

  • Focuses css added
  • Keywords reporter-feedback 2nd-opinion removed
  • Milestone changed from Awaiting Review to Future Release

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

Version 0, edited 12 months ago by sabernhardt (next)

#7 @sabernhardt
12 months ago

  • Type changed from defect (bug) to enhancement

#8 @sabernhardt
12 months ago

  • Keywords needs-patch added
  • Summary changed from Twenty Sixteen and Twenty Seventeen ignore/override ordered list types to Multiple bundled themes ignore/override ordered list types

#9 @shawfactor
12 months ago

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

This ticket was mentioned in PR #4250 on WordPress/wordpress-develop by @jakariaistauk.


12 months ago
#10

  • Keywords has-patch added; needs-patch removed

Trac ticket: 44777

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

#11 @sabernhardt
11 months ago

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.

#12 @sabernhardt
11 months ago

  • Milestone changed from Future Release to 6.3

#13 @oglekler
8 months ago

  • Keywords needs-testing added

#14 @audrasjb
8 months ago

  • Milestone changed from 6.3 to 6.4

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.

#15 @wasiur195
6 months ago

  • Keywords needs-patch has-testing-info needs-screenshots added; has-patch removed

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

#16 @oglekler
6 months ago

  • Keywords has-patch changes-requested added; needs-testing needs-patch removed

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

#17 @sabernhardt
6 months ago

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.

#18 @sabernhardt
6 months ago

  • Milestone changed from 6.4 to Future Release
Note: See TracTickets for help on using tickets.